• トップ
  • ブログ一覧
  • 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}

    終わり

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

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background