この記事ではデイトラWeb制作コースでの学習記録、感想やつまずいた点などをご紹介します。
参考になりましたら幸いです。
前回の「ポートフォリオ作成編」はこちら。
DAY7【Sassを学習しよう】
DAY7はSassの基礎を学びました。
Sassとは？
Sassとは「Syntactically Awesome StyleSheet」の略で、CSSをより楽に書くための拡張言語です。
Sassの書き方は2通りあり、
- Sass
- Scss
の2種類がありますが、Scssの方が主流ということでこちらで勉強しました。
デモはSassMeisterというWeb上のツールを使いました。
覚えるべき記法
Web制作で特によく使うのはこの4つ。
- 入れ子(ネスト)
- 変数
- “&”で擬似要素を追加
- ＠mixin
特に@mixinをメディアクエリで使うのがとても便利とのこと。
動画を見ながら一緒に手を動かしましたが、入れ子で記述できることで視認性が高まりより管理しやすいなと思いました。
明日から実際にSaccを使ってみます。
DAY8【デイトラ簡易版サイトのCSSをSassで書き直してみよう】
DAY8は初級編で作ったデイトラ簡易サイトのCSSをSassで書き換えました。
- 入れ子(ネスト)
- 変数
- “&”で擬似要素を追加
- ＠mixin
これらを全て使うのが条件です。
拡張機能「DartJS Sass Compiler and Sass Watcher」をインストール
.scssファイルはそのままHTMLに読み込むことができないため、SassからCSSに変換する処理（＝コンパイル）が必要。
今回はVSCodeの拡張機能「DartJS Sass Compiler and Sass Watcher」を使用しました。
他にも「Live Sass Compiler」の名前をよく目にしますね。
尚、コンパイルされるタイミングはstyle.scss（メインのSassファイル）が保存されるタイミングです。
ファイル分割
Sassには”_”（アンダーバー）から始まるファイル名を無視する特性があり、これを利用してファイル分割をします。
私が最初引っかかったのは、リセットCSSも”_”から始まるSassファイルにするべきだということ。
バッティングしてしまったので試しに上記の操作をすると、無事読み込まれました。
実際にやってみた
無事反映されるのを確認し、少しファイル分割をしてみました。
今回のファイル分割はこんな感じ。
- _button.scss
- _main.scss
- _reset.scss
- _color.scss
- _responsive.scss
- style.scss
主に使い回しそうなボタン、カラー、メイン（.container）をファイル分割してみました。
ファイル分割して@useで呼び出す際、フォルダを作成して階層が違う場合には
@use “setting/responsive”;
とフォルダ名を入れないと反映されません。
よく考えたらそうなんだけど最初は忘れがち
やはり入れ子が便利ですね！
入れ子でレスポンシブを記述できるので、直したいなと思ったときに行ったり来たりしなくて済みますし効率が上がります。
あとはホバー時の指定なども新たに記述しなくていいのでわかりやすいです。
今回は書き直しでしたが、１から作るときはファイル分割できることも視野に入れてパーツ分けを行うと良さそうですね。
効率的にコードを書けるようになるとプログラマーぽくてワクワクします（笑）
個人的な今後の課題
実際にSassを使ってみて、今後もっと改善できそうだなと思ったこともご紹介します。
ファイル分割
便利さを実感したファイル分割ですが、もっといい分け方があるだろうなと思います。
次回使うときははにわマンさんが紹介されていた、「吉田式」を試してみようかなと思います。
function
思えばfunctionを全然使えていませんでした…
デモではfont-size＋２などのように使われていましたが、最初そういった視点でコードを書いてなかったなと…
他にどんな時に使うべきかあまり思い浮かびませんでした。
勉強不足だな〜
書籍とかでCSS設計を体系的に学ぶか検討中です
DAY9【CSS設計の基本概念からクラスの付け方をイメージしよう】
DAY9はCSS設計からのクラス名をつける考え方を学びました。
特に自分に必要だなと思った要素をピックアップします。
「コンテナー」と「コンテンツ」の分離
CSSを書くとき、特定のコンテナに依存しないようにCSSを指定しようという考え方。
例えば.section-topの中に.titleというクラスを入れたとして、.titleクラスは自由に他で使いまわせるようにしようという考え方です。
これはSassで入れ子にする時に注意するべき点ですね。
入れ子の中のクラスは親要素でしか使えないので…
状態を管理する
例えば.buttonをクリックされた時、.is-activeクラスなどで要素の状態を管理する手法があります。
「〇〇したとき〇〇する」
という動きの指定になるので、:hoverなどに近いものですね。
これはSassで使うときは入れ子で”&”をよく使うとのこと。
まとめ
前回のJavascript・jQueryは体力消耗した感がありましたが（笑）
今回は純粋に楽しかったです。
どんどんできることが増えて楽しい。
そして一つ一つを掘り下げすぎず「実務でよく使うもの」をよく紹介していただけるので効率的に学べるのがデイトラのいいところですね。
さらに掘り下げるなら各自で勉強！
次回は「デザインカンプからコーディング編（前編）」をレポートします！
コメント