CSS機能が向上したおかげでサイトの軽量化できるし、JSなしで使えるものも増えてきていますね。Web業界10年以上、身にしみて便利になったと思う今日このごろです。
最近よく使うプロパティはもちろん、情報のアップデートも兼ねて、今回はマスターしておきたいCSS10選ということでお届けします。
かみーゆ/フロントエンドエンジニア
資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。
CSSだけでscroll-behavior
遠い昔であれば、JSで記述したスムーズスクロールもCSSで解決できるようになりました。スピードなどは調整できませんが十分使えます。
html {
scroll-behavior: smooth;
}ヘッダー固定の場合。例えばヘッダーの高さが60pxの場合はscroll-paddingを60px足せばいいだけです。
html {
scroll-behavior: smooth;
scroll-padding-top: 60px;
}iOSなどの可変するビューポート対応、height と dvh
iOSで height: 100vh こんな変な隙間ができる問題覚えてますか？
単位vhが出たときは画期的で、スマホのドロワーメニューやフルスクリーンのサイトで大活躍しました。iOSのビューポートがスクロールに応じてメニューが出てくるのでJSを書いて対応などしなければなりませんでした。
現在ではdvhですべてのモダンブラウザで対応可能です。
| バリエーション | 値 |
|---|---|
| Large | lvw, lvh, lvmin, lvmax |
| Small | vw, svh, svmin, svmax |
| Dynamic | dvw,dvh,dvmin,dvmax |
height: 100dvh;margin-inline: auto でセ ンタリング
ブロックコンテンツのセンタリングは以下のようにしていました。
.box {
margin-left: auto;
margin-right: auto;
}CSSの「論理プロパティ」で、要素の「インライン方向」のマージンを設定するためのものです。ブロックのコンテンツを文章の方向のように扱えます。 margin-inlineを使えば1行ですみます。
.box {
margin-inline: auto;
/*
上記は以下のショートハンド
margin-inline-start: auto;
margin-inline-end: auto;
*/
}先程も言及したようにただ縦書きのときには注意が必要です。
上下のマージンが設定されます。
内側のコンテンツ要素のサイズを合わせたい max-content
私はよく文字に下線を引いたようなデザインを実装することがあります。
従来はdisplay: inlineで、position: absoluteやdisplay: grid;grid-direction:columnを利用して無理やり内側のコンテンツ要
max-contentを使えば、1行でコンテンツにピタッとハマった要素が作れます。
- min-content: ボックス内で自動改行される場合、そのコンテンツを収納するインラインサイズ
- max-content: コンテンツの幅とおなじになる
- fit-content: 上記2つを組み合わせたもの
日本語は英語のように単語単位で改行しないので、我々が主に使うのはmax-content とfit-contentだけでいいと思います。
.subtitle {
width: max-content;
}内側のコンテンツ要素のサイズを合わせたい max-content|CODEPEN
親要素だけに固定：position: sticky
もうすっかり定番中の定番！position: stickyです。メニュー追従させることがありますよね？
position: stickyを使うと特定の親要素の中だけ固定され、スクロールなどが終わると固定が終わります。
このサイトも利便性を考えPCでは記事の領域だけ目次を右に固定してあります。
article {
position: relative;
}
.table-of-content {
position: sticky;
right: 0;
top: 0;
}background-clip でアイコン作成|CODEPEN
word-break:keep-all と<wbr>でディバイス幅に応じて改行
ディバイス幅で変なところで改行されたら悲しいですよね？
そんな時はword-break:keep-all と<wbr>が活躍します。
実際文章はきれいに読ませたい文章や、見出しでは重宝しますが、ブログなどの長めの記事ではぶっちゃけ使えません。
<h2>内側のコンテンツ要素の<wbr>サイズを<wbr>合わせたい max-content</h2>h2 {
word-break: keep-all;
}
word-break:keep-all と
background-clip でアイコン作成
最近アイコンをbackground-clipで作成する機会がい増えました。
素材がすぐ用意できない時は、borderで謎のハックを駆使して作っていましたが、コードは長くなるし疲れます。
background-clipを使えばコードの記述量が減ります。
a {
background: #ff9e08;
display: grid;
color: #fff;
grid-template-columns: 10px 1fr 10px;
border-radius: 8px;
font-weight: bold;
padding: 16px;
box-sizing: border-box;
text-align: center;
align-items: center;
height: 50px;
max-width: 300px;
text-decoration: none;
&::before {
content: '';
}
&::after {
content: '';
display: block;
height: 8px;
width: 10px;
background: #fff;
clip-path: polygon(100% 50%, 0 0, 0 100%);
}
}アイコンの位置もabsoluteではなく grid を使えば小難しい計算が必要なくなり、コードも使いまわしできます。
background-clip でアイコン作成|CODEPEN
ジェネレーターを使えば簡単に図形が作れます。
backdrop-filterで重なった下のコンテンツにフィルターする
backdrop-filterを使うと下に重なるコンテンツにフィルターを掛けることができます。
当サイトのヘッダーは半透明白でbackdrop-filterとblur()でぼかしています。
backdrop-filter: blur(2px);
関数は以下のとおりです。drop-shadowとsaturateは使わないので省きます。
| 関数 | 効果 | 値 |
|---|---|---|
| blur | ボカす | 1px〜 |
| brightness() | 明るさの調整 | 0%~ (100%がデフォ) |
| contrast | コントラストの調整 | 0%（グレー)~ (100%がデフォ) |
| grayscale() | グレースケールに変換 | 0% ~100% |
| hue-rotate() | 色相の角度を回転 | 0deg~ |
| invert() | 反転 | 0%~100% |
| opacity() | 透過率を適用 | 0% ~100% |
| sepia() | セピア調 | 0% ~100% |
backdrop-filterで重なった下のコンテンツにフィルターする|CODEPEN
image-set で背景も webp 対応する
サイトを軽くしたいのでどんどんwebpを使いたい！ところです。現在ではすべてのモダンブラウザに対応しているようで、当サイトも以前アニメーションはgifアニメからwebpに切り替えました。
iOSであれば14以降、MacはmacOS 11 Big Sur以降であれば対応済み。6年前webp対応のサーバだったので画像が見れないとクレームを喰らったことがあります。もうそろ完全にWebpに切り替えてもいい気もしますが、、、、
HTML内の画像であれば、pictureタグで出し分けれますがCSSを背景で設定する場合はimage-setを使います。
.element {
background-image: image-set(
url("xx.jpg") type("image/jpg"),
url("xx@1x.webp") type("image/webp") 1x,
url("xx@2x.webp") type("image/webp") 2x,
);
}url("xx@2x.webp")←画像パス
type("image/webp")←画像タイプ
2x←ディスプレイの解像度これでRetinaなどの高解像度のブラウザでも画像がぼやけることはありません。
image-setを対応していないブラウザ対策。
.element {
background: url("xx.jpg")
}
@supports (background-image: image-set(url("xx@1x.webp") type("image/webp") 1x)){
.element {
background-image: image-set(
url("xx@1x.webp") type("image/webp") 1x,
url("xx@2x.webp") type("image/webp") 2x,
);
}
}background-imageに設定した値を一個だけ書いておけば対応してくれます。
iOS 16以下に対応する場合は、-webkit-を付与してください。
.element {
background: url("xx.jpg")
}
@supports (background-image: -webkit-image-set(url("xx@1x.webp") type("image/webp") 1x)){
.element {
background-image: -webkit-image-set(
url("xx@1x.webp") type("image/webp") 1x,
url("xx@2x.webp") type("image/webp") 2x,
);
background-image: image-set(
url("xx@1x.webp") type("image/webp") 1x,
url("xx@2x.webp") type("image/webp") 2x,
);
}
}interpolate-size で height:auto のコンテンツをアコーディオンアニメーション
要素に含まれるコンテンツの大きさを基準に要素のサイズのことをintrinsic-sizeといいます。
interpolate-sizeはintrinsic-sizeをアニメーション化するかどうかを指定するためのCSSプロパティです。
値をallow-keywordsにセットするとintrinsic-sizeが使えるようになります。
現時点ではChromeとEdgeのみの実装ですが、一足先にご紹介しておきます。
- FireFox一方向だけアニメーションする
- Safari全くだめ
<div>
<button type="button">トグルボタン</button>
<ul class="content">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div>@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
button {
&.open {
& + .content {
height: auto;
}
}
}
.content {
transition: height .3s;
height: 0;
overflow: clip;
}
}const title = document.querySelector('button')
title.addEventListener('click', ()=>{
const hasClass = title.classList.contains('open')
title.classList.toggle('open', !hasClass)
})interpolate-size でheight:autoのコンテンツをアコーディオンアニメーション|CODEPEN
interpolate-sizeが全ブラウザに対応されるのが待ち遠しい！
interpolate-sizeなんかは実装されたらいろんな煩わしいハックをしなくて良くなるので超期待しています。
今回は10つのCSSについて触れましたが、マスターしておきたいCSSって10個どころじゃないんですが笑
grid、flexあたりをやり始めると記事一個になっちゃうので辞めときます。
この記事が皆さんのコーディングライフの一助となれば幸いです。
最後までお読みいただきありがとうございました。
