• トップ
  • ブログ一覧
  • 知ってると便利なCSS 8選!
  • 知ってると便利なCSS 8選!

    岡坂(エンジニア)岡坂(エンジニア)
    2022.10.14

    IT技術

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

    place-content / place-items

    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つ1つの要素にマージンをつける必要はありません🙆

    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}

    ちなみに、ulolなどのリスト要素は暗黙のうちに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}
    岡坂(エンジニア)

    岡坂(エンジニア)

    おすすめ記事