はじめに
この業界に携わり、長い間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 のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します
background-clip: text;
-webkit-background-clip: text;
color: transparent;
この場合は、背景を前景のテキストの中に（切り取って）表示します
clip-path
clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります
clip-path: circle(40%);
この場合は、半径と中心位置を使用して円を定義し、クリッピング領域を作ります
inline-size
書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します
inline-size: 150px;
writing-mode: vertical-rl;
vertical-rl: 右から左へのブロックの流れの方向。文は垂直に実行される状態の高さの指定を設定できます
リストの数え方の制御
start 属性を使用すると、1 以外の数からリストを数え始めます
<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 属性はリストのカウントアップではなくカウントダウンを開始します
<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 属性を使用すると、リスト項目を特定の数値に設定できます
<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 のプロパティで、指定された段数で要素の内容物を分割します。
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）を実際のコードを見ながら学ぶことができるため、設計方法を検討したいときに読むべき本だなと感じました。また、細かいトピックスもあるため、実際のコード修正にも役立てる情報も掲載されていて開発のヒントになりそうでした。 |
さいごに
今回、学んだ方法や内容を紹介してみました。
本記事を読んでみて、再度何かの技術を学ぶきっかけになりましたら幸いです😊