学校ではできるのに、家に戻るとうまくできない。『初心者の証ですね』というクラスメートの言葉に、確かに、と納得した26日目でした。体調にも気を配りながら、一日ずつ積み重ねたいと思っています。
属性セレクターを使う
属性で対象を絞る指定を学びました。例えばa[href^="https"]は、href属性の値がhttpsで始まるa要素を選びます。^=は先頭、$=は末尾、*=は含む文字列を条件にします。
要素名と属性指定の間に空白を入れると意味が変わる点にも注意します。
CSSの優先関係
同じ条件で比較すると、ID、class・属性・疑似クラス、要素・疑似要素という詳細度の区分があります。classと属性を別の強さとして覚えるのは不正確でした。実際には出所、重要度、カスケードレイヤーなども関わるため、詳細度だけがすべてではありません。
!importantを付ける前に、どのルールが適用されているかを調べたいです。
画面サイズを変えて表示確認
Chromeの開発者ツールの端末表示を使い、狭い画面での見え方を確認しました。これは実機そのものではなく、端末表示のシミュレーションです。利用するOSとブラウザーのメニューから、対応する操作を確認します。
後半はPhotoshopも使った検定向け演習。定規やガイド、グループ化など、制作中によく使う操作も復習しています。
※2015年の授業を整理した記録です。
参考：W3C Selectors
https://www.w3.org/TR/selectors-4/
Chrome DevTools
https://developer.chrome.com/docs/devtools/device-mode/
