【第5弾】少しのコードで実装可能な10のCSS小技集
CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！
↑私が10年以上利用している会計ソフト！
目次
- ネストで親子セレクターを管理
- チェックボックスやラジオボタンの色を変更
- アスペクト比を指定する
- 新しいメディアクエリーの範囲指定方法
- 背面の要素をぼかす
- 要素を画面のど真ん中に固定表示
- 空の要素にスタイルをあてる
- 条件に合致しないセレクターにスタイルをあてる
- スムーススクロールのジャンプ位置
- 動いている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;
}
}
See the Pen
CSSでネストの指定 by Mana (@manabox)
on CodePen.
2. ラジオボタンやチェックボックスの色を変更
これまではフォームのパーツを装飾するのはなかなか難しかったのですが、 accent-color を使ってラジオボタンやチェックボックスの色を変更できるようになりました。手軽にブランドカラーに合わせてデザインできるので、覚えておくといいですね！
CSS
form {
accent-color: #f55;
}
See the Pen
accent-color by Mana (@manabox)
on CodePen.
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;
}
See the Pen
aspect-ratio by Mana (@manabox)
on CodePen.
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」をクリックして、別タブで開いて幅を変えてご確認ください！ ↓
See the Pen
Media queries using comparison operators by Mana (@manabox)
on CodePen.
5. 背面の要素をぼかす
指定した要素そのものに効果を加える filter というプロパティーがありますが、backdrop-filter を使えば、背面にある要素に効果を加えられます。グラスモーフィズムなデザインにする時には必須ですね。実は私のポートフォリオサイトのヘッダー部分にも使用しているので、確認してみてください！Safari用には -webkit- ベンダープレフィックスをつけておきましょう！
CSS
.box {
backdrop-filter: blur(8px);
background-color: rgba(255,255,255,.5);
}
See the Pen
backdrop-filter by Mana (@manabox)
on CodePen.
この例では 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;
}
↓ デモ画面をスクロールしてみてね！ ↓
See the Pen
Centered fixed position by Mana (@manabox)
on CodePen.
7. 空の要素にスタイルをあてる
表にデータが記述されていない空のセルがある時や、事前にメッセージが入る要素だけ用意しておくときなど、空の要素を指定するには :empty 擬似クラスが使えます。 content で表示したい文字列や画像などを加えてもいいでしょう。その場合は ::before 疑似要素と組み合わせます。
CSS
td:empty {
background: #eee;
}
td:empty::before {
color: #ccc;
content: '―';
}
See the Pen
:empty by Mana (@manabox)
on CodePen.
8. 条件に合致しないセレクターにスタイルをあてる
:not() は列挙されたセレクターに一致しない要素を表す擬似クラスです。カッコ内に含めたくないセレクターを記述して除外でき、否定擬似クラスとも呼ばれています。
例えばあらかじめ画像にぼかしをかけておき、カーソルをあわせたときだけぼかしをなしにする場合、これまではこのように記述していました。
CSS
img {
filter: blur(4px);
}
img:hover {
filter: none;
}
しかし、 :not() を使えばこのようにスッキリ記述できます：
CSS
img:not(:hover) {
filter: blur(4px);
}
See the Pen
:not(:hover) by Mana (@manabox)
on CodePen.
9. スムーススクロールのジャンプ位置
ページ内リンクをクリックすると、リンク先へスルスルッと移動するスムーズスクロール。過去記事「【第3弾】少しのコードで実装可能な15のCSS小技集」でも紹介しましたね！ただ、scroll-behavior: smooth を指定しただけだと、ジャンプしたエリアの位置が微妙にずれたり、上の要素と重なったりして使いづらかったのです…。そこで、 scroll-padding-top を指定して、ジャンプ先エリアの位置を調整しましょう！
CSS
html{
scroll-behavior: smooth;
scroll-padding-top: 4rem;
}
See the Pen
CSS Smooth Scrolling w/ scroll-padding by Mana (@manabox)
on CodePen.
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%; }
}
↓ 動いている画像にカーソルを乗せて動きを止めてみましょう！ ↓
See the Pen
Stop animation using animation-play-state by Mana (@manabox)
on CodePen.
