はじめに

この業界に携わり、長い間CSS（Sass）のコードを書いてきました。
レイアウトを組む手法も変化し、flex や grid などの登場によって、現在ではわざわざ float で右カラムにしたり clearfix で解除したりしなくてよくなりました。（いい時代🎉）
このような新しいプロパティの登場により、もう一度改めてCSSについて学び直してみようと思いました。

勉強方法

サイトで学び直す
書籍で学び直す

サイトで学び直す

今回は以下のサイトを使って学び直しました
（CSSだけではなく、HTMLやJavaScriptなども用意されていました📝）

CSS - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS

以下、あまり触れて来なかったと感じたプロパティを紹介します😊

background-clip

background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します

css

background-clip: text;
-webkit-background-clip: text;
color: transparent;

この場合は、背景を前景のテキストの中に（切り取って）表示します

clip-path

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります

css

clip-path: circle(40%);

この場合は、半径と中心位置を使用して円を定義し、クリッピング領域を作ります

inline-size

書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します

css

inline-size: 150px;
writing-mode: vertical-rl;

vertical-rl: 右から左へのブロックの流れの方向。文は垂直に実行される状態の高さの指定を設定できます

リストの数え方の制御

start 属性を使用すると、1 以外の数からリストを数え始めます

html

<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

この場合、リスト番号は4・5・6・7と表示されます

reversed 属性はリストのカウントアップではなくカウントダウンを開始します

html

<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

この場合、リスト番号は4・3・2・1と表示されます

value 属性を使用すると、リスト項目を特定の数値に設定できます

html

<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

この場合、リスト番号は2・4・6・8と表示されます

column-count

column-count は CSS のプロパティで、指定された段数で要素の内容物を分割します。

css

column-count: 3;

この場合は、段落を3つに分割して表示されます

書籍で学び直す

ざっくりつかむ CSS設計

	ざっくりつかむ　CSS設計著者：高津戸壮発売日：2022/1/18
学べる内容	CSS設計で必要な基礎知識（CSSの扱い方・管理・運用方法など）を学ぶことができる
おすすめ度	⭐⭐⭐⭐⭐
所感	スタイルガイドやコンポーネント一覧を作成する重要性や、Block間の余白の設計方法、ビルドの説明、コンポーネントの考え方など、チーム開発に必要な情報が網羅されているためとても勉強になった。チームで開発する方にもぜひ読んでいただきたい内容でした。

CSS設計完全ガイド ~詳細解説+実践的モジュール集

	CSS設計完全ガイド ~詳細解説+実践的モジュール集著者：半田惇志発売日：2020/2/27
学べる内容	CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化。ボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、それらの組み合わせ方まで、実践的なコードの解説を読むことができる
おすすめ度	⭐⭐⭐⭐
所感	5つのCSS設計方法（OOCSS・SMACSS・BEM・PRECSS・FLOCSS）を実際のコードを見ながら学ぶことができるため、設計方法を検討したいときに読むべき本だなと感じました。また、細かいトピックスもあるため、実際のコード修正にも役立てる情報も掲載されていて開発のヒントになりそうでした。

さいごに

今回、学んだ方法や内容を紹介してみました。
本記事を読んでみて、再度何かの技術を学ぶきっかけになりましたら幸いです😊

改めて学び直すCSS

はじめに

勉強方法

サイトで学び直す

background-clip

clip-path

inline-size

リストの数え方の制御

column-count

書籍で学び直す

ざっくりつかむ CSS設計

CSS設計完全ガイド ~詳細解説+実践的モジュール集

さいごに