はじめに

@takamoso さんという方のツイートが自分のTwitterに流れてきて、面白い手法だなとは思ったのですが、コンテナクエリが全ブラウザで対応な現在、わかりやすくできないかと思い、コンテナクエリを利用したやり方のご紹介です。

コンテナクエリを利用したやり方

コンテナ幅によってスタイルを変えられるというめちゃくちゃすぐれたCSSのプロパティです。コンテナ幅が500px未満だったらそのコンテナ内だけテキストを赤にするなど設定することも可能です。

以下が自分の実装したやり方です

See the Pen Untitled by Tomoya Masaki (@mu-tomoya) on CodePen.

まず、container: layout / inline-size;で.containerクラスに対してcontainerの設定をしてあげます。layoutはcontainer-nameで、inline-sizeは横方向のサイズで判定ということです。

そしてmax-widthを設定してあげます。そのmax-widthの値が、コンテナクエリで判定するブレークポイントとなります。

次に.containerクラスの中のpタグです。そのままだとwidthが.containerクラスと同じになってしまうので、width:fit-content;で幅を文字列の幅にしてしまいましょう。こうすると、今度はtext-alignが効かなくなります。幅が文字列と同じ幅なのでそうなりますね。margin-leftとmargin-rightでautoを設定するやり方で、中央寄せにします。

そして最後に、コンテナクエリをつけます。500px以上の時はmargin-leftを0にすれば左寄せになるので、

@container layout (min-width: 500px;) {
  p {
    margin-left:0;
  }
}

となります。
以上のやり方で、テキストが1行のときは中央揃えで複数行のときは左揃えにしてみました。

@containerが実装される前まではtakamosoさんのやり方が良さそうでしたが、そのやり方はちょっとテクニカルすぎるかなと思いました。@containerを使ったやり方のほうが直感的に扱えるなと感じました。

コンテナクエリは全ブラウザに対応したので、ぜひじゃんじゃん利用してみましょう。

あと、こちらの方の記事も興味深かったのでご紹介です。