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アプリケーション作成を作ってみるシリーズの動画です。今回はシリーズ第七弾で最終回です。生成したパスワードそれぞれに「コピーする」ボタンを設定し、気軽にユーザーがコピーでき…
Sass / Scss について
- そもそもSassとは?
-
Sass(Syntactically Awesome Style Sheets)は、CSSをより強力かつ効率的に扱うための上位言語です。ここでは、Sassの基本的な概念とその利点について解説します。
Sassの歴史と目的
Sassは2006年に登場し、CSSの限界を超えるために開発されました。従来のCSSの手法では難しかったタスクを簡単にし、より構造化された方法でスタイルシートを書くことができます。
Sassの主な特徴
- 変数: CSSにはない変数を使用し、コードの再利用性を高める。
- ネスト: HTMLの階層構造をCSSに反映させることで、コードの可読性を向上させる。
- ミックスイン: 再利用可能なCSSグループを作成し、コードの重複を避ける。
- 継承: スタイルルールを他のルールに拡張または継承させる。
- 関数: 色の操作や数学的計算など、複雑な操作を簡素化。
- Sassの変数について
-
変数は、繰り返し使用するCSSの値(色、フォントサイズ、マージンなど)を保存するための機能です。例えば、サイト全体で一貫した色を使いたい場合、その色を変数に割り当てることで、一箇所での変更が全体に反映されます。
変数の宣言と使用
宣言: $primary-color: #ff4500; のように $ 記号を使って変数を宣言します。
使用: color: $primary-color; のようにして変数を使用します。
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
のようにして色の値を変数に割り当てることができます。使用する際は、変数名を指定するだけで、その値を読み込むことができます。
変数のスコープ
- ローカル変数: 特定のセレクタや関数内で定義し、そのスコープ内でのみ有効です。
- グローバル変数: スタイルシートのトップレベルで定義し、どこからでもアクセス可能です。
!default フラグを使用することで、変数が未定義の場合のみ値を割り当てることができます。これはテーマやライブラリのカスタマイズに便利です。
SASS/SCSSでは、色($blue: #3498db;)、数値($margin: 16px;)、文字列($font-family: "Helvetica, sans-serif";)、リスト($dashes: 5px 10px 15px;)、マップ($font-weights: ("regular": 400, "medium": 500, "bold": 700);)など、さまざまなデータ型を変数に割り当てることができます。
変数は、コードの再利用性と保守性を高め、効率的なスタイリングを可能にします。この記事で紹介したテクニックを活用し、より洗練されたSASS/SCSSスタイルシートを作成しましょう。
- SASS/SCSSの違い、それぞれのメリットや特徴について
-
SASS(Syntactically Awesome Style Sheets)とSCSS(Sassy CSS)は、CSSの拡張言語で、より効率的かつ柔軟なスタイリングを可能にします。この記事では、SASSとSCSSの違いと、それぞれのメリットや特徴について詳しく掘り下げます。
SASSとSCSSの基本的な違い
- SASS: インデント(タブやスペース)によって構造が決定される、CSSとは異なる構文を持つ。
- SCSS: CSSと同様のブラケット({})とセミコロン(;)を使用する、CSSにより近い構文。
SASSのメリットと特徴
- シンプルな構文: より少ないコードでスタイルを記述できる。
- コードの読みやすさ: インデントにより、親子関係が直感的にわかりやすい。
- 適用範囲: 主にプロジェクトの初期段階や小規模なプロジェクトで好まれる。
SCSSのメリットと特徴
- CSS互換性: 既存のCSSファイルをそのままSCSSファイルとして使用できる。
- 拡張性: 大規模なプロジェクトやチームでの開発に適している。
- ツールのサポート: 広範な開発ツールとの互換性。
SASSとSCSSは、同じ目的を持ちながらも異なるアプローチを提供します。プロジェクトの要件やチームのスキルセットに基づいて、最適な選択を行うことが重要です。この記事を通じて、それぞれの言語の特徴とメリットを理解し、プロジェクトに最適な選択をしてください。
- SASSの便利な機能mixin(ミックスイン)について
-
SASS/SCSSの強力な機能の一つに@mixinがあります。@mixinの基本的な使い方から、引数の使用、@includeでの呼び出しに至るまでを解説します。
@mixinとは?
@mixinは、再利用可能なスタイルブロックを作成するためのSASS/SCSSの機能です。コードの重複を減らし、プロジェクトの保守性を高めることができます。
基本的な使い方
定義: @mixin ディレクティブを使用してミックスインを定義します。例:
@mixin buttonStyle() { width: 200px; height: 40px; display: grid; place-items: center; }
button { @include buttonStyle; }
引数を使った応用
引数の定義: ミックスインに引数を加えることで、カスタマイズ可能なスタイルを作成できます。例:
@mixin buttonStyle($bgColor) { width: 200px; height: 40px; display: grid; place-items: center; background-color: $bgColor; }
引数の使用: 定義した引数を指定してミックスインを使用します。例:
.link { @include buttonStyle(blue); }
@mixinは、SASS/SCSSにおいて非常に強力なツールです。効果的に使用することで、コードの保守性と再利用性を大きく向上させることができます。この記事で学んだテクニックを活用し、より効率的なスタイルシートを作成しましょう。
- if, else if, elseなどの条件分岐を使う
-
SASS/SCSSでは、if、else if、elseなどの条件分岐を使って、さまざまな状況に応じたスタイリングを適用することができます。この記事では、これらの条件分岐の基本的な使い方と実践的な活用方法を紹介します。
条件分岐の基本
SASS/SCSSでは、if、else if、elseなどの条件分岐を使って、異なるスタイルを適用することができます。特に@mixin内でこれらを使用することで、より柔軟かつ動的なスタイリングが可能になります。
条件分岐の基本
- if文: ある条件が真の場合に特定のスタイルを適用します。
- else if文: 複数の条件を順に評価し、最初に真となる条件に対応するスタイルを適用します。
- else文: どの条件も真でない場合に適用されるスタイルを指定します。
@mixin内での条件分岐
@mixinを使って、パラメータに基づいて異なるスタイルを適用する方法を紹介します。
@mixin button-style($type) { @if $type == 'primary' { background-color: blue; color: white; } @else if $type == 'secondary' { background-color: grey; color: black; } @else { background-color: white; color: black; } } .button { @include button-style('secondary') }
@mixin内での条件分岐は、SASS/SCSSを使ったスタイリングにおいて強力なツールです。ここで紹介したテクニックを活用して、動的かつ柔軟なデザインを実現しましょう。
- ループ処理(繰り返し)をする方法とその活用
-
SASS/SCSSでは、@for、@each、@whileといったループ処理を使用して、反復的なスタイルを簡単に生成することができます。これらのループ処理の書き方を解説します。
ループ処理の基本
- @forループ: 指定した回数だけスタイルを繰り返します。
- @eachループ: リストやマップの各要素に対してスタイルを適用します。
- @whileループ: 条件が真の間、スタイルを繰り返します。
@forループの使い方
@for $i from 1 through 10 { .item-#{$i} { width: 10px * $i; } }
@eachループの使い方
$colors: red, blue, green; @each $color in $colors { .#{$color}-text { color: $color; } }
@whileループの使い方
$i: 1; @while $i < 10 { .item-#{$i} { width: 10px * $i; } $i: $i + 1; }
SASS/SCSSのループ処理を使用することで、効率的に反復的なスタイルを生成することができます。この記事で紹介したテクニックを活用し、より動的かつ柔軟なスタイルシートを作成しましょう。
- 自作関数(function)を作る方法とその仕組み
-
SASS/SCSSでは、独自の関数(function)を定義してスタイルシート内で使用することができます。この記事では、自作関数の作成方法とその仕組みについて詳しく解説します。
自作関数の基本
- 関数の定義: @function ディレクティブを使用して関数を定義します。
- 戻り値: 関数は値を返すため、@return ステートメントを使用します。
例:ピクセルをレムに変換する関数
@function px-to-rem($size, $base: 16px) { @return $size / $base * 1rem; } p { font-size: px-to-rem(16px); // 1remに変換される }
自作関数を使うことで、SASS/SCSSのコードをより効率的かつ動的にすることが可能です。この記事で学んだテクニックを活用し、より洗練されたスタイルシートを作成しましょう。
- @contentの活用について
-
Sassの@contentディレクティブは、mixin内で定義されたスタイルブロックに、追加のスタイルルールを挿入することを可能にします。この記事では、@contentの使用方法と、メディアクエリやその他のスタイリングにおいてどのように活用できるかを解説します。
@contentの基本
- 用途: @mixinを使って定義されたスタイルブロック内に、コンテンツを動的に挿入するために使用します。
- 構文: @contentは、@includeで呼び出された@mixin内で使用します。
構文: @contentは、@includeで呼び出された@mixin内で使用します。
@mixin respond-to($media) { @if $media == 'mobile' { @media (max-width: 600px) { @content; } } @else if $media == 'tablet' { @media (max-width: 900px) { @content; } } } .example { @include respond-to('mobile') { font-size: 12px; } }
@contentの応用
- 複数のスタイルルール: 異なるコンテキストで異なるスタイルルールを適用する際に便利です。
- コードの再利用性: 同じパターンのスタイルブロックを複数の場所で使用する際に、コードの重複を避けることができます。
@contentディレクティブを活用することで、Sassでのコーディングがより柔軟かつ効率的になります。この記事で紹介したテクニックを活用し、メディアクエリやその他のスタイリングに応用してみましょう。