更新日
【第5弾】少しのコードで実装可能な10のCSS小技集
CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！
【第 4 弾】少しのコードで実装可能な 10 の CSS 小技集
目次
- ネストで親子セレクターを管理
- チェックボックスやラジオボタンの色を変更
- アスペクト比を指定する
- 新しいメディアクエリーの範囲指定方法
- 背面の要素をぼかす
- 要素を画面のど真ん中に固定表示
- 空の要素にスタイルをあてる
- 条件に合致しないセレクターにスタイルをあてる
- スムーススクロールのジャンプ位置
- 動いている CSS アニメーションを止める
HTML・CSS の全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！
1. ネストで親子セレクターを管理
親セレクターを何度も記述しなくても、ネスト（入れ子）にすることで子セレクター管理も簡単にできます。これだけでコーディングの時間を短縮できますよね。ブロックごとのまとまりも把握しやすくなり、メンテナンスも楽になります。
書き方は、親セレクターのブロックの中に、子セレクターのスタイルを記述していけます。Sass と同じ書き方ですね。また、& を使って親セレクターにつなげることもできます。例えば以下の例で .item:hover としたいところでは、.item のブロックの中に &:hover のブロックを記述しています。
CSS
.item {
background: #fff;
.title {
color: #0bd;
font-size: 2rem;
}
&:hover {
box-shadow: 0 0 1rem #999;
}
&:first-of-type {
margin-top: 3rem;
}
}
2. ラジオボタンやチェックボックスの色を変更
これまではフォームのパーツを装飾するのはなかなか難しかったのですが、 accent-color を使ってラジオボタンやチェックボックスの色を変更できるようになりました。手軽にブランドカラーに合わせてデザインできるので、覚えておくといいですね！
CSS
form {
accent-color: #f55;
}
3. アスペクト比を指定する
コンテンツの横：縦の比率のことをアスペクト比と言います。決まったピクセル数を指定できるならそれでもいいのですが、レスポンシブ対応がめんどうだったり、そもそも数値がわからないこともありますよね。
そんな時は aspect-ratio で比率を指定するといいでしょう。書き方は、幅 / 高さ というように、スラッシュで区切って比率を値に指定します。例えば YouTube 動画でおなじみの 16:9 にしたい時は aspect-ratio: 16/9 、以下の例のように正方形にしたいときは aspect-ratio: 1/1 を記述します。画像や動画、 iframe などに使えます。
CSS
img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
4. 新しいメディアクエリーの範囲指定方法
これまでのメディアクエリーと言えば min-width や max-width などを使ってブレークポイントを指定していました。もちろん慣れればこれでも問題なく記述できるのですが、なんか直感的でないというか、わかりにくいような、不思議な書き方ですよね…？プログラミングをしている人なら、< や <= といった記号（比較演算子）で記述できないものか…と考えた人も多いでしょう。
そして長い月日を経て、ようやく記号を使った記述ができるようになりました！例えばこれまで
CSS
@media (min-width: 400px) and (max-width: 799px) {
body {
background: #0bd;
}
}
と記述していたところを
CSS
@media (400px <= width < 800px) {
body {
background: #0bd;
}
}
のように記述できますよ！
↓ デモ画面右上の「EDIT ON CODEPEN」をクリックして、別タブで開いて幅を変えてご確認ください！ ↓
5. 背面の要素をぼかす
指定した要素そのものに効果を加える filter というプロパティーがありますが、backdrop-filter を使えば、背面にある要素に効果を加えられます。グラスモーフィズムなデザインにする時には必須ですね。実は私のポートフォリオサイトのヘッダー部分にも使用しているので、確認してみてください！Safari 用には -webkit- ベンダープレフィックスをつけておきましょう！
CSS
.box {
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.5);
}
この例では blur()（ぼかし）を使っていますが、他にも種類あるのでいろいろ試してみてください！
- blur() … ぼかし
- brightness() … 明度
- contrast() … コントラスト
- drop-shadow() … 影
- grayscale() … グレースケール
- hue-rotate() … 色相回転
- invert() … 階調
- opacity() … 透過
- saturate() … 彩度
- sepia() … セピア
6. 要素を画面のど真ん中に固定表示
モーダルウィンドウやライトボックスの画像など、画面の上下左右真ん中に表示したい時は inset:0 と margin:auto を加えましょう。余計な計算は不要です！便利になりましたねー！ちなみに固定する必要はないときは、 position: absolute を使っても同じように要素のど真ん中に表示されます。
CSS
.heart {
position: fixed;
inset: 0;
margin: auto;
width: 100px;
height: 100px;
fill: #f99;
}
↓ デモ画面をスクロールしてみてね！ ↓
7. 空の要素にスタイルをあてる
表にデータが記述されていない空のセルがある時や、事前にメッセージが入る要素だけ用意しておくときなど、空の要素を指定するには :empty 擬似クラスが使えます。 content で表示したい文字列や画像などを加えてもいいでしょう。その場合は ::before 疑似要素と組み合わせます。
CSS
td:empty {
background: #eee;
}
td:empty::before {
color: #ccc;
content: "―";
}
8. 条件に合致しないセレクターにスタイルをあてる
:not() は列挙されたセレクターに一致しない要素を表す擬似クラスです。カッコ内に含めたくないセレクターを記述して除外でき、否定擬似クラスとも呼ばれています。
例えばあらかじめ画像にぼかしをかけておき、カーソルをあわせたときだけぼかしをなしにする場合、これまではこのように記述していました。
CSS
img {
filter: blur(4px);
}
img:hover {
filter: none;
}
しかし、 :not() を使えばこのようにスッキリ記述できます：
CSS
img:not(:hover) {
filter: blur(4px);
}
9. スムーススクロールのジャンプ位置
ページ内リンクをクリックすると、リンク先へスルスルッと移動するスムーズスクロール。過去記事「【第 3 弾】少しのコードで実装可能な 15 の CSS 小技集」でも紹介しましたね！ただ、scroll-behavior: smooth を指定しただけだと、ジャンプしたエリアの位置が微妙にずれたり、上の要素と重なったりして使いづらかったのです…。そこで、 scroll-padding-top を指定して、ジャンプ先エリアの位置を調整しましょう！
CSS
html {
scroll-behavior: smooth;
scroll-padding-top: 4rem;
}
10. 動いている CSS アニメーションを止める
画像がカルーセルや自動スクロールなどで動く Web サイトも多いですよね。過去記事「懐かしの marquee？テキストを自動スクロールさせる方法と実装例」でも CSS で自動スクロールを表現する方法を紹介しました。しかし、場合によってはアニメーションを止めてコンテンツをしっかり見せたいこともあるでしょう。
そこで animation-play-state プロパティーを使って、カーソルをあわせたときにアニメーションを停止できるように設定してみましょう。値は running がアニメーション実行、 paused が停止です。
CSS
div {
display: flex;
animation: marquee 16s linear infinite alternate;
}
div:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
translate: 0;
}
100% {
translate: -100%;
}
}
↓ 動いている画像にカーソルを乗せて動きを止めてみましょう！ ↓