【受講記録】デイトラWeb制作コース初級編DAY23

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

初級編DAY23の押さえておきたいポイント

Sass

Sassとは、Syntactically Awesome Style Sheets　＝　構造的にイカしたスタイルシート

CSSの拡張言語でスタイルが2つ。主流はSCSS。

• Rubyのようにインデント形式で書いていく『SASS』スタイル
• CSSと同じようにカッコでくくる『SCSS』スタイル

入れ子の書き方

子要素のスタイルは親要素のクラスの中に{}で入れ子形式で書くことができる。
孫要素も同様の書き方で書くと書ける！

CSSで書くと長くなってしまうようなものも入れ子形式なら簡単に書ける。

また、＆で繋げて擬似要素やクラスを付け足すこともできる。

Sassで変数を使う

Sassでは変数も使うことができる。
$をつけて変数名を指定、:で値を定義する。

$link-color-active: #fff

何回も使いそうなものは変数に定義することでいろいろな場所で使うことができる。

フォントサイズやカラーを変えたいときにベタ書きしていると保守性が低い。
変数で定義しておけば一回書き換えれば変数部分が全て書き変わるので非常に楽。
保守性が高い。

サイト内でよく使うようなカラーやフォントサイズは変数を使うことを意識する！

変数は四則演算も可能。

＠extend

@extendとはすでに設定している別のクラスのスタイルを引き継げる。

共通で使いたいスタイルを共通パーツのクラスとして用意し、@extendで使い回しができる。

@mixin

@mixinは@extendと異なり、引数が作れる。
＠extendはすでに作られているクラスを使いまわせるが、@mixinは型として一部変更しつつ使える。

@mixinで定義したものを呼び出すときは@includeを使う
一部だけ変更したいけどだいたい使い回ししたいときに使える。

@mixinをつかったメディアクエリ

CSSで書くとメディアクエリを別のボックスに書くので、元のクラスから離れた位置に書くことになり、見づらかった。

Sassだと対象のCSSクラスに対するメディアクエリとして入れ子で書くことができるので、コードが短くなるのはもちろん、要素ごとにメディアクエリのブレイクポイントを指定できてすぐにわかりやすいコードになる。

• マップ型変数＝どの画面幅でスタイルを指定したいかブレイクポイントをキーとして定義
• @mixinでキーを呼び出してスタイルを指定していく
• @contentは、呼び出し元で定義したスタイルを指す。
  （下の例でいくとheight: 60pxのこと）
• マップ変数を複数定義（細かく定義）することでブレイクポイントを増やすことも可能。

//マップ型変数breakpointsを定義
$breakpoints: (
//キー　　値
  'sp': 'screen and (max-width: 767px)', //767px以下（スマホ）用の表示
  'pc': 'screen and (min-width: 768px)' //768px以上（タブレット・PC）用の表示
) !default;
//メディアクエリ用のmixinを定義。デフォルト値はsp
@mixin mq($breakpoint: sp) {
//map-get(マップ型変数, キー)で値を取得
  @media #{map-get($breakpoints, $breakpoint)} {
    //この中をカスタムできる
    @content;
  }
}
//使用例
.header {
  height: 100px; //ＰＣ用の表示
  @include mq(sp) {
    height: 60px; //スマホの時だけ高さを60pxに！
  }
}
/*このように @media screen and (width: 767px) { } を書かなくても、
PC用のcssを書きながらスマホ用の表示を書き足すことができます！ */

Sassではfunctionも使える。書き方はこんな感じ↓

@function activeFontSize($base-size){
  @return $base-size + 2px ;
}

初級編DAY23の追加で調べたいことメモ

• この記事（https://haniwaman.com/sass/）がすごくわかりやすいのでもう一度読む！
• Web制作者のためのSassの教科書読みたい！

初級編DAY23の感想と記録

Day21,22の課題をやっているときに、

スマホはここに書いて・・・タブレットPCはここに書いて・・・
あれ、どこいった・・・
とわからなくなったので、こんな感じ↓でコメント入れて無理やり目立たせていました。
  /* ——————-モーダルを開く—————— */

それがいらなくなるので、「わかりやすい」の意味をとても実感できました！

使いこなせるように、実践していこう！

引き続きがんばろう！

DAY23 完了日　：　2024年11月11日（月）
DAY23 所要時間　：　1h
Web制作コース 初級編Total ：　44h