1. HOME
  2. ブログ
  3. IT技術
  4. 知ってると便利なCSS 8選!

知ってると便利なCSS 8選!

知ってると便利なCSSを8個ご紹介します!

place-content / place-items

flexbox や grid を使用するときに頻繁に使用する align-content と justify-content 等を一括で指定できるプロパティです。
place-content は、align-content と justify-content の一括指定が可能で、place-items はalign-items と justify-items の一括指定ができます。

gap / row-gap / column-gap

flexbox や grid を使用した際の、要素と要素の間隔を指定することができます。
1つ1つの要素にマージンをつける必要はありません🙆

clamp()

最小値、推奨値、最大値の指定が可能なCSSの関数です。
ビューポートに合わせて、幅やフォントサイズを変えたい時などに便利です👍

clampは最小値・最大値ともに指定しますが、推奨値と最大値のみ指定できるmax()推奨値と最小値のみ指定できるmin()もあります。

counter() / counters()

CSS の中で数字をカウントさせることが可能です。
数字の入った装飾を、擬似要素を使って実装する時などに便利そうです♪

ちなみに、ulolなどのリスト要素は暗黙のうちにlist-itemというカウンターを持っているので、以下のようにするとカウントが確認できます👇

user-select

テキストを範囲選択できるかどうかを指定できます。
ボタンをダブルクリックしたときに、テキストが選択されてしまう...みたいなことありませんか?
user-selectを使えばその問題が解決します💫

@media print

スクリーンサイズ別のスタイルでよく使われるメディアクエリですが、印刷用のスタイルの指定もできます。
印刷物には載せたくない部分を非表示にしたり、印刷時に見やすいレイアウトを作ることも可能です🙆‍♀️

:has()

引数の要素が含まれるかどうかで、スタイルを指定できます。
引数には、>+ など CSS で用いられる演算子と一緒に使用することも可能です👍
※2022年9月現在、Firefox など十分にサポートされてないブラウザがあるので、ご注意ください。

CSS変数

特に、サイトやアプリでカラー規定があったり、使う色が決まっている時に、カラーを変数化するのがおすすめです。
もちろんカラー以外の値も変数化できます。
定義時は--をつけて定義し、使用時はvar()を使って呼び出します。

書いた人はこんな人

岡坂(エンジニア)
岡坂(エンジニア)
Webエンジニア。
好きなものはフルーツタルト。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア