• トップ
  • ブログ一覧
  • 2023年のCSSの復習しておく
  • 2023年のCSSの復習しておく

    岡坂(エンジニア)岡坂(エンジニア)
    2024.01.15

    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}

    終わり

    以上で復習事項の共有は終わりです!
    実際に使っていけるといいですねー!

    岡坂(エンジニア)

    岡坂(エンジニア)

    おすすめ記事