ここ最近は更なるスキルアップのためにホームページ制作のコーディングを捗らせてくれる便利なモダンCSS（新しく進化したCSS）を学んでいます。

『モダンCSS』で検索してみると魅力的でいかにも今時でリッチなサイトにするためのCSSの実装方法がたくさんヒットして、是非使ってみたいと思わせてくれるようなものばかりでした。

そこで今回はモダンCSSを実際に触ってみて、その際に生まれた感想や注意点などを併せてこちらでご紹介していければと思っています。

目次

1. aspect-ratio
2. scroll-behavior
3. :has() 関数、:not() 関数

このプロパティは、要素の幅と高さの比率を指定して保持することのできるプロパティです。これにより、要素がリサイズされても指定した比率を保つことができます。

従来であれば、比率を設定したい要素の疑似要素にpadding-topで値をして・・・といった煩雑な作業が必要だったのですが、このプロパティを使えば楽に設定できるようになりました。

【使い方】

比率を設定したい要素にaspect-ratio: 横幅/縦幅;を記述します。

注意点としては、ただ比率を指定だけではなく、width, heightのどちらか一方にpx,%などの値を指定して、もう一方はautoを指定する必要があります。width,heightのどちらにも値を指定してしまうと比率が設定できないのでお気を付けください。

参考：【効かない原因を完全解明】aspect-ratioの正体を暴く
URL：https://itokoba.com/archives/8643#toc9

従来であればJavaScriptを用いて実装していたスムーススクロールがCSSのscroll-behavior: smooth;のたった一行で実装できるようになります。

もし、スムーススクロールした後の着地点を少し調整したいようであればscroll-padding-topで調整します。ヘッダーが追従するようなサイトでは見出しと被る可能性が高いので特に有効ですね。

アニメーションの時間等の指定はできないので、もし細かく設定したい場合はJavaScriptで実装することをお勧めしますが、特にこだわりがない場合はこちらのプロパティで十分です。

たった２行でスムーススクロールが実装できるのは凄まじいですね！

:has() 関数は特定の子要素を持つ親要素を選択するために使用します。

例えば、同じcontainerというクラスを持っている親要素でも、子要素にimgタグを持っているcontainerクラスにのみスタイルを適用するといったような感じになります。

hasという名の通り、特定の要素を持っているのか？を問われているわけですね。

反対に:not() 関数は特定の要素を持っていないかを問われています。

コードを見ていただくと、

・highlightというクラスが付与された子要素を持っているcontainerクラスに緑色の枠線をつける（has関数）。

・highlightというクラスを持っていないitemクラスの背景をグレーにする(not関数)。

・h2タグを持っているcontainerクラスの背景に薄いグレーを敷く(has関数)。

となっています。

このように同じクラスを持っていて、基本的な装飾・レイアウトが変わらないコンテンツでも、中に入っている要素次第で少し見た目を変えたい場合に有効ですね！

今回は以上となります。

これからもどんどん新たなCSSを学んでいくつもりなのでシリーズ化してご紹介していきたいと思います！

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから

もぐら

コーダー

2022年入社。実務未経験ながらも一念発起してWeb業界に飛び込みました。日進月歩の変化の速い業界で日々の勉強が必要不可欠ですが、楽しみながら一人前になるべく頑張っています。