おか（エンジニア）知ってると便利なCSS 8選！
おか（エンジニア）IT技術
知ってると便利なCSSを8個ご紹介します！
flexbox や grid を使用するときに頻繁に使用する align-content と justify-content 等を一括で指定できるプロパティです。
place-content は、align-content と justify-content の一括指定が可能で、place-items はalign-items と justify-items の一括指定ができます。
1.sample1 {
2 display: grid;
3 justify-content: center;
4 align-content: center;
5}
6/* ↑↓ どちらも同じスタイルを定義してます */
7.sample2 {
8 display: grid;
9 place-content: center center;
10}gap / row-gap / column-gap
flexbox や grid を使用した際の、要素と要素の間隔を指定することができます。
１つ１つの要素にマージンをつける必要はありません🙆
1.sample1 {
2 display: grid;
3 gap: 20px 10px; /* row-gapが20px, column-gapが10pxになります */
4}clamp()
最小値、推奨値、最大値の指定が可能なCSSの関数です。
ビューポートに合わせて、幅やフォントサイズを変えたい時などに便利です👍
1.sample1 {
2 width: clamp(200px, 10vw, 400px); /* 基本は10vw。ただし、最小値は200px、最大値は400px */
3 font-size: clamp(1rem, 2vw, 5rem); /* 基本は2vw。ただし、最小値は1rem、最大値は5rem */
4}clampは最小値・最大値ともに指定しますが、推奨値と最大値のみ指定できるmax()、推奨値と最小値のみ指定できるmin()もあります。
counter() / counters()
CSS の中で数字をカウントさせることが可能です。
数字の入った装飾を、擬似要素を使って実装する時などに便利そうです♪
1.listed-section {
2 counter-reset: list; /* 'list' というカウンターを設定&初期化 */
3}
4
5.listed-section-item::before {
6 counter-increment: list; /* list カウンターに1を加算 */
7 content: "No." counter(list);
8}ちなみに、ulやolなどのリスト要素は暗黙のうちにlist-itemというカウンターを持っているので、以下のようにするとカウントが確認できます👇
1li::before {
2 content: counter(list-item);
3}user-select
テキストを範囲選択できるかどうかを指定できます。
ボタンをダブルクリックしたときに、テキストが選択されてしまう...みたいなことありませんか？
user-selectを使えばその問題が解決します💫
1.button {
2 user-select: none; /* テキストの選択ができなくなります */
3}@media print
スクリーンサイズ別のスタイルでよく使われるメディアクエリですが、印刷用のスタイルの指定もできます。
印刷物には載せたくない部分を非表示にしたり、印刷時に見やすいレイアウトを作ることも可能です🙆♀️
1/* no-printクラスを付与した要素は印刷時に非表示になります */
2@media print {
3 .no-print {
4 display: none;
5 }
6}:has()
引数の要素が含まれるかどうかで、スタイルを指定できます。
引数には、> や + など CSS で用いられる演算子と一緒に使用することも可能です👍
※2022年9月現在、Firefox など十分にサポートされてないブラウザがあるので、ご注意ください。
1li:has(a) {
2 background-color: aquamarine; /* a要素を持つli要素の背景色を指定してます */
3}
4
5li:has(> a) {
6 background-color: aquamarine; /* 直下にa要素を持つli要素の背景色を指定してます */
7}CSS変数
特に、サイトやアプリでカラー規定があったり、使う色が決まっている時に、カラーを変数化するのがおすすめです。
もちろんカラー以外の値も変数化できます。
定義時は--をつけて定義し、使用時はvar()を使って呼び出します。
1/* rootで定義するとどこでも使用可能になります */
2:root {
3 --primary: pink;
4}
5
6p {
7 background-color: var(--primary); /* 背景色はpinkになります */
8}ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
Webエンジニア
