2023年のCSSの復習しておく
IT技術
2023年のCSSの復習をしておこうかなと思いました!
CSSって、いつの間にか機能追加されてたり、効率的な実装方法が実はあったりして、定期的にキャッチアップしないとなーと思ってます^^;
今年注目された仕様や機能を見ていきます!
ここで紹介するものは、主要なブラウザの安定バージョンで対応されているものです。
コンテナクエリ
今まで、レスポンシブデザインを実装する際はビューポートのクエリを使うのが基本だったかと思いますが、指定要素のサイズ基準でレスポンシブできます。
以下の例では、親要素が500px以上のクエリを指定しています。
`main`という名前のコンテナクエリを作成し、親要素のクラスに`container`プロパティ(`container-name` + `container-type`)でコンテナクエリを適用しています。
`container-type`でオプションに合わせたコンテナコンテキストが生成され、`container-name`では適用する名前付きコンテナを指定しています。
1.parent {
2 width: 100%;
3 container: main / inline-size;
4 /* ↑適用するコンテナクエリを指定。以下と同義。
5 container-name: main;
6 container-type: inline-size;
7 */
8 display: grid;
9 gap: 8px;
10}
11
12.card {
13 display: grid;
14 word-break: break-all;
15 border: 1px solid gray;
16 border-radius: 8px;
17 overflow: hidden;
18}
19
20// コンテナクエリの設定
21@container main (width > 500px) {
22 .card {
23 grid-template-columns: 100px 1fr;
24 gap: 4px;
25 }
26}
親要素の幅が500pxより大きい場合
親要素の幅が500px以下の場合
コンテナクエリ宣言時、名前をつけない場合は、コンテナのコンテキストを持つ要素(≒`container-type`が宣言されている要素)全てにそのクエリが適用されます。
1// 名前なし
2@container (width > 500px){
3 .card {
4 grid-template-columns: 100px 1fr; gap: 4px;
5 }
6}
サブグリッド
`display: grid;`を利用するグリッドの話です。
サブグリッドを利用すると、親グリッド内の、子要素のグリッドの整列基準に、親グリッドのトラックを利用することができます。
具体的に言うと、`grid-template-columns`と`grid-template-rows`に`subgrid`というオプションが追加されました。
このオプションを設定すると、設定した行/列は、親のトラックを参照できるようになります。
親グリッドのCSS
1.container {
2 display: grid;
3 grid-template-columns: repeat(3, 200px);
4 word-break: break-all;
5}
子要素に通常のグリッドを適用した場合
1.item {
2 display: grid;
3}
子要素にサブグリッドを適用した場合
1.item {
2 display: grid;
3 grid-template-rows: subgrid;
4 grid-row: span 2; // 使う行の幅指定。2つ先の行までの大きさにする。
5}
親のグリッドのトラックが変わったのが分かるかと思います。
補足
上記で、サブグリッドを適用した場合、理想の配置にするために、`grid-row`を指定しましたが、指定しなかった場合はこうなります。
実際にサブグリッドを使うときは、開発者ツールでトラックの変化を確認しながら使うと良いかもです。
1.item {
2 display: grid;
3 grid-template-rows: subgrid;
4}
color-mix()
2つのカラーを組み合わせたカラーを表現できます。
特にメインカラーのサブカラーを色の割合で作りたい時に便利かなと思いました。
使用する際には、1.色空間, 2.カラー1つ目とその割合, 3.もう1つのカラー を指定します。
以下のコードでは、srgbの色空間で、red20%、white80%の色が指定されてます。
1p {
2 color: color-mix(in srgb, red 20%, white);
3}
ネスト
Sassを使わなくても、通常のCSSでネストができちゃいます。
デフォルトでネストできるなんてとても便利で有り難いです〜。
こんな感じで使えます↓
1.container {
2 & a {
3 color: red;
4
5 &:hover {
6 color: yellow;
7 }
8 }
9
10 .text {
11 color: blue;
12 }
13}
layer
スタイルにレイヤーという考えを取り入れ、スタイルをレイヤーごとに管理できます。レイヤーの優先度もコントロール可能です。
以下のように、layerの中にスタイルを宣言すると、指定スタイルがレイヤーに割り当てられます。
1@layer base {
2 p {
3 color: #999999;
4 }
5}
また、最初に複数のレイヤーを宣言すると、優先度を設定できます。
後ろになるほど優先度が高くなるので、`base < utilities`のレイヤー構造を宣言できます。
1@layer base, utilities;
2
3@layer base {
4 p {
5 color: black;
6 }
7}
8
9@layer utilities {
10 p {
11 color: pink;
12 }
13}
ファイルごとにレイヤーを設定することもできます。
以下のコードだと、`base.css`のスタイルデータをbase layerに、`utilities.css`のものをutilities layerに割り当てています。
1@import "base.css" layer(base);
2@import "utilities.css" layer(utilities);
nth-of
nth-child等は、兄弟要素の位置(n番目)によって、スタイルを指定することができました。
これに、of という表現が加わったことで、条件に当てはまった要素の中で、指定位置のスタイルを宣言できます。
従来の使い方
偶数位置の要素のcolorがredになります。
1li:nth-child(2n) {
2 color: red;
3}
of を使ってフィルタリング
`focus`クラスを持つ要素のなかで、偶数位置の要素にボーダーが付きます。
1:nth-child(2n of .focus) {
2 border: 2px solid pink;
3}
:user-valid / :user-invalid
:valid / :invalid に似た擬似セレクタです。
:valid / :invalid は、ユーザーが入力していない状態でも有効無効を判定するのに対して、:user-valid / :user-invalid はユーザーが入力した後に有効無効を判定します。
使い方は通常の擬似要素と同様です。
1input:user-valid {
2 border: 1px solid lime;
3}
三角関数
CSSで扱う数値として三角関数が追加されました。
複雑なアニメーションやレイアウトを実装する際に役立ちそうです。
1div {
2 width: calc(sin(45deg) * 200px);
3}
終わり
以上で復習事項の共有は終わりです!
実際に使っていけるといいですねー!
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
Webエンジニア