SASS/SCSSの動画リスト
この再生リストでは、CSSプリプロセッサであるSassを学び、効率的で保守性の高いスタイルシートを実現するためのスキルを身につけることができます。Sassの導入方法から始め、変数・ネスト・ミックスインなどの基本機能を簡潔に解説します。
実践的なプロジェクトを通じて、Sassを使ったコードの構造化やリファクタリング、コンパイルといった技術も学びます。これにより、実践的なSassプロジェクトに取り組み、プロフェッショナルなスタイルシートを追求できるようになります。
再生リストを活用して、Sassを使いこなし、効率的で保守性の高いスタイルシートを実現しましょう。スキルが向上し、見事なスタイルシートを作成できるようになることで、スタイリングの世界で活躍できることでしょう。
-
14:43
初心者向け!SASSをCSSに変換して、使ってみましょう!Dart sass対応の「Live Sass Compiler(ライブサスコンパイラー)」
Visual Studio Code(ビジュアルスタジオコード)というエディターを使って、簡単にSassをCSSに変換(コンパイル)してみましょう。また、Sassの便利なWebツールも紹介していきま…
-
08:06
SASS/SCSS解説!最もよく使う機能、ネスト(nest)について
Sass(サス)/Scssでよく使うと思われる機能、「ネスト(入れ子)」について説明しています。初心者の方は最初に覚えておくと、かなり楽です!
-
10:04
SASS/SCSS解説!変数について
Sass(サス)/Scssで変数を使う時の方法を動画にしました。よく使うカラーコードやサイズなどを定義しておくと、いちいち覚えなくて済んだり、計算する際に変数を活用することができます。ぜひ、覚えて効…
-
08:53
SASS/SCSSの違い、それぞれのメリットや特徴について説明していきます!
Sass(サス)と言う言語自体は1つですが、書き方が2種類存在するのがSassです。広く普及しているscssの書き方と、少数派だけどメリットも多いsassの書き方を、それぞれ解説しています。
-
17:44
SASS/SCSS!@mixin(ミックスイン)を徹底解説!引数や実例、@includeでの呼び出しまで
Sass(サス)/Scssで使えるかなり便利な機能mixin(ミックスイン)について説明しています。他の言語でいう関数のようなものです(Sassの自作関数functionとは別です。)動画内で紹介し…
-
10:30
SASS/SCSSの組込み関数紹介!色を明るくしたり、透明にして効率的にコーディングをおこないましょう。
数あるSassの組み込み関数の中から、今回は色に関するものをピックアップして紹介しています。・lighten・darken・adjust-hue・transparentizeを使って、効率的にコード…
-
17:30
SASS/SCSSでif, else if, elseなどの条件分岐を使ってみましょう!実践的な活用の仕方まで紹介。
Sass(サス)で条件分岐を行う方法と、その活用を紹介しています。さらに、三項演算子の書き方まで実例をあげています。
-
21:43
SASS/SCSSでループ処理(繰り返し)をする方法と、その活用方法!
Sass(サス)でのfor文(繰返し)の処理のやり方・考え方とどのように活用していったら良いかを解説しています。グラデーションを作ったり、アニメーションを上手くズラす方法などを実践的に説明しています…
-
13:30
SASS / SCSS の自作関数(function)を作る方法とその仕組みについて学んでいきましょう!
@functionや@returnとは何か?引数(ひきすう)をどう使えば良いのか?まで説明しています!Sassにはmixin(ミックスイン)というものがあり、どちらかというとmixinの方が使われる…
-
15:41
SASS / SCSS でz-indexを効率よく管理する方法
レイヤー(重なり)が複雑なサイトを作っていると、z-indexの管理に困ることがありませんか?この動画ではそういった悩みをSassの自作関数を使うことによって解消します。有名な管理方法ですので、今回…
-
15:46
Sassでeach文を使って、コーディング効率をあげる方法!
同じようなクラス名・セレクタや、CSSプロパティを書く時、Sassでは効率的に書く方法があります!JSのforEachと同じようにSassでeach文を書けるようになることで、修正時などにスムーズに…
-
05:43
Sassの@contentの活用について解説!メディアクエリなどのmixinの記述の幅を広げて、効率的なコードを書いていきましょう!
@media や @hover などのメディアクエリなどを記述していく際に便利な、@content について説明しています。レスポンシブなサイトを作成するには必須の機能なので、是非覚えていきましょう!
-
18:24
Sassのファイル分割@useと@forwardの使い方!前編
これまでファイルを分割し他のファイルに読み込ませるには、@importという記述でしたが、廃止になりました。新しく使えるようになったのが、この@useと@forwardです。しっかりと覚えて、ファイ…
-
09:04
Sassのファイル分割@useと@forwardの使い方!後編
これまでファイルを分割し他のファイルに読み込ませるには、@importという記述でしたが、廃止になりました。新しく使えるようになったのが、この@useと@forwardです。しっかりと覚えて、ファイ…
-
22:29
Sassのおすすめのフォルダ、ファイル構成について。ある程度の大きさのサイトやWordPressにおけるSassの構成について
Sassでファイル分割をしていくようになると、構成が複雑になりがちになってしまいます。この動画では、1つの例としてSassのファイル構成を紹介しています。規模によっても違ってきますが、まずはこういっ…
-
33:34
【JavaScriptでパスワード生成ツールを作る!】パスワードジェネレーターを1から作ってみましょう! まずはファイルの作成や簡単なパスワード生成から #1
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。ライブコーディングをおこないながら、実際にアプリケーションを作っていきます。実践的なツールを作ることでJavaScri…
-
18:26
【JavaScriptでパスワード生成ツールを作る!】英語の小文字と大文字を含めたパスワードを生成できるようにJavaScriptを書き換えてみましょう! #2
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第二弾で、前回までパスワードが数字のみだったものに加えて英字を追加してみます。英字を追加すること自体は簡…
-
33:47
【JavaScriptでパスワード生成ツールを作る!】間違われやすい文字列を除外する欄を生成して、さらにユーザーが追記・編集できるようにしましょう!! #3
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第三弾で、ユーザーがよく見間違えやすいような文字列を除外する為の機能を実装します。配列と文字列を変換する…
-
22:55
【JavaScriptでパスワード生成ツールを作る!】 どんな文字列でパスワードを生成するか、ユーザーに選択してもらう為の機能を追加しましょう! #4
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第四弾で、ユーザーにパスワードの文字列の生成のされ方を選択してもらう機能を実装します。数値のみなのか、数…
-
20:13
【JavaScriptでパスワード生成ツールを作る!】生成するパスワードの文字数をユーザーが選択できるような機能を追加しましょう! #5
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第五弾で、ユーザーが、生成されるパスワードの文字数を選択できる機能を追加していきます。選択肢としてよく使…
-
23:39
【JavaScriptでパスワード生成ツールを作る!】生成するパスワードの個数をユーザーが選択できるような機能を追加しましょう! #6
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第六弾で、ユーザーが、生成されるパスワードの個数を選択できる機能を追加していきます。選択肢としてデフォル…
-
44:42
【JavaScriptでパスワード生成ツールを作る!】生成したパスワードを気軽にコピーできるような機能を付けましょう! #7(最終回)
JavaScriptでWebアプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第七弾で最終回です。生成したパスワードそれぞれに「コピーする」ボタンを設定し、気軽にユーザーがコピーでき…