2022年に見かけたモダンなCSSの書き方を振り返る
はじめに
2022年6月15日にInternet Explorerのサポートが終了しました。
(IEの完全無効化は2023年2月14日予定)
そのこともあり2022年は今までとは異なるCSSプロパティを使用したモダンな実装例の記事や発信をよく見かけた気がします。
ただしこれらは従来の実装方法でもできる表現であったので、「この記事はあとでしっかり読もう」とブラウザの新規タブで開いてそのまま塩漬けにしたり、ブックマーク的に"いいね"した該当ツイートを読み返すことなく流していたので、ここで一度サルベージしてその他追加したものを備忘録としてまとめました。
要素の中央配置
<div class="parent">
<div class="child"></div>
</div>
上記の子要素アイテムを親要素の中央に配置したい場合はFlexboxやpositionを指定することで実現できますが、より効率的な記述も可能です。
place-itemsを使うGrid Layout
以下はよく見られるFlexboxを使用してアイテムの主軸と垂直方向を指定することで中央に配置する方法。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
このFlexbox LayoutではなくGrid Layoutにすることで、place-itemsプロパティを使った2行で実現可能です。
.parent {
display: grid;
place-items: center;
}
place-itemsプロパティはアイテムのそれぞれの軸であるalign-itemsとjustify-itemsプロパティの配置を一括指定するプロパティ。
つまりplace-items:center;はそれぞれをcenterに指定して中央配置を実現しています。
place-items - MDN
insetを使うposition
現在位置と相対位置を指定して子要素の原点位置を上から半分と左から半分の中央に持ってきた後、その原点をtranslateを使って子要素の中央に合わせる従来の方法。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
位置の指定はinsetとmarginを使うことでよりシンプルに記述できます。
.parent {
position: relative;
}
.child {
position: absolute;
inset: 0;
margin: auto;
}
insetはtop, right, bottom, leftに対して一括指定できるプロパティ。
つまりmarginやpaddingと同じように1行で位置指定要素を扱えます。
この例は四隅を全て0で指定し、margin:auto;で中央配置を実現している形です。
inset - MDN
Flexboxでの要素間余白
横並びのカードリストなどをFlexboxを使ってレイアウトを組む場合、カード自体にmarginを設定して余白を調整していました。
しかしmarginを使うと２段目に改行した場合不要な箇所に余白がついてしまったり、相殺を考える必要があったりと直感的な実装が難しい部分もありました。
Flexboxでgapプロパティを使用した余白調整
CSSのgapプロパティは元々Grid Layout用のプロパティでしたが、Flexboxでも使えるようにアップデートされました。
親要素に余白であるgapを指定することで子要素(子コンポーネント)に余白を持たせる必要がありません。
また指定する値とCSSが表現する内容が直感的で分かりやすく、FigmaのAuto Layoutで構築したデザインも落とし込みやすくなります。
.parent {
display: flex;
flex-wrap: wrap;
gap: 30px 100px;
}
指定したgapの値がどこに当たっているか分かりやすい
スムーススクロール
かつてはJavaScriptを用いて実装していたスムーススクロールをCSSのみで実装できるようになりました。
scroll-behaviorを使ったスムーススクロール
scroll-behavior:smooth;を指定することでページ内のスムーススクロールを実現できます。
html {
scroll-behavior: smooth;
}
id指定したセクションへスムースに移動する
位置調整のscroll-marginとscroll-padding
スムーススクロールすると意図した位置と異なる着地点の場合があります。
例えばスクロール先のコンテンツが固定ヘッダーの下に潜り込んでしまい被って見えなくなっているなど。
その際はscroll-marginまたはscroll-paddingを使った余白の指定をすることでスクロール後の着地点を調整可能です。
html {
scroll-behavior: smooth;
/* スクロールコンテナであるHTML全体のトップに100pxのヘッダー高さ分の余白を設定 */
scroll-padding-top: 100px;
}
.section {
/* スクロール対象コンテンツのトップに80pxの余白を設定(つまりここは180pxの余白になる) */
scroll-margin-top: 80px;
}
scroll-marginおよびscroll-paddingは一括指定プロパティ。つまりtopだけの指定も可能です。
scroll-paddingは親要素であるスクロールコンテナに指定することで子要素全てに反映します。
scroll-marginは子要素であるスクロールコンテンツに指定することで、特定の要素に余白を反映できます。
scroll-padding-topを指定してheaderとの重なりを回避
scroll-margin - MDN
scroll-padding - MDN
1行テキストの左右均等割り付け
テキストを左右両端に合わせる均等割り付けはtext-align:justify;を使うことで実装できますが、「テキストは最終行を除いて左右の端がラインボックスの左右の端に揃うように間隔が空けられる」とMDNの記載の通り、改行した文の最終行と1行のテキストには反映されません。
<table>
<tr>
<th>名前</th>
<td>フェルナンド・アロンソ</td>
</tr>
<tr>
<th>出身地</th>
<td>スペイン</td>
</tr>
<tr>
<th>趣味</th>
<td>ドライブ</td>
</tr>
</table>
1行テキストで均等割り付け対応前
text-align-last:justifyで均等割り付け
text-align-last:justify;を使うことでブロックの最後の行や1行テキストを均等割り付けすることが可能です。
th {
text-align-last: justify;
}
1行テキストで均等割り付け対応後
text-align-last - MDN
おまけ：ブラウザを直接編集する
「カード型のレイアウトを組んだけれどもコンポーネント内の文字量が増えたりしたらどんな見え方になるだろう...🤔」
と考えて確認する場合、元々のコード側でコンテンツ量を変更したり検証ツール内のHTML要素を直接編集していました。
この作業をより簡単に確認することができます。
Document.designModeで文書を編集可能にする
CSSではなくWeb APIですが文書全体を編集可能にするかを制御するDocument.designModeの設定を変えることで、実装したCSSの挙動を確認しやすくなります。
設定を"on"にすることでブラウザに表示されてある画面全てがテキストエディタのように、カーソルで選んでキーボードから自由に入力することができます。
Chromeのコンソールから実行するとすぐに確認可能
内包物の量に応じた挙動の確認をしやすい
(これは以前からあるWeb APIですが2022年に存在を知りました)
Document.designMode - MDN
Discussion