[CSS]実はかなり便利！意外と見落とされがちなスタイルシートのテクニックのまとめ

Post on:2016年10月26日

1. レスポンシブ対応に便利な「calc()」

「calc()」はおそらく紹介する中では最もよく使われていますが、ここで取り上げる価値があります。もしあなたが一度も「calc()」を使ったことがないなら、例えばある要素の幅を指定したピクセル分だけ減らすことが簡単にできます。

.box {
  width: calc( 100% - 20px );
}

.box {

width: calc( 100% - 20px );

}

一見、Sassのプリプロセッサのように見えるかもしれませんが、これはネイティブなCSSで、ブラウザはこの計算を行って要素のサイズをレンダリングします。

.boxの要素のサイズは、100%から20pxをマイナスされた幅で表示されます。このスタイルシートは、可変幅の要素と一緒に固定幅の要素を置くなど、多目的に使用することができます。

備考

2. 目からウロコの「@media」の使い方

サポートブラウザは限られていますが、「@media」でポインターデバイスを使用する方法は非常に役立ちます。多くの人は「@media(screen){}」を使用し、スクリーンの幅に基づいていると思います。

「@media(pointer){}」はマウスやあなたの指のようなポインティングデバイスに基づき、ボタンのサイズなどを調整することができます。

@media( pointer: coarse) { }

1	@media( pointer: coarse) { }

ポインターの状態は、以下の3つを定義できます。

none: デバイスの主要な入力方法に、ポインティングデバイスが含まれていない。
coarse: デバイスの主要な入力方法に、限定された正確に操作できるポインティングデバイスが含まれている。; タッチスクリーン、動作感知センサーを含みます。
fine: デバイスの主要な入力方法に、正確に操作できるポインティングデバイスが含まれている。; マウス、タッチパッド、スタイラスペンを含みます。

備考

Webkit系とIE Edgeはサポートされており、iOS Safari, Android Chromeでも問題ありません。Firefoxでは利用できません。

3. カラー指定を変数でおこなえる「currentColor」

CSS3で導入された「currentColor」は、CSSでカラーの指定を変数でおこなえる便利な値です。

.card {
    color: #333333;
}
.card--error {
    color: #ff0000;
}
    .card__guts {
        border-top-color: currentColor; // see note below [1]
    }

.card {

color: #333333;

}

.card--error {

color: #ff0000;

}

.card__guts {

border-top-color: currentColor; // see note below [1]

}

「currentColor」は親のカラーのプロパティから値を継承させることができます。
上記の例だと、通常のカードは#333333で、エラーは#ff0000、ボーダーはそれらに合わせて変化することになります。

備考

4. フォームにかなり便利「:valid, :invalid, :empty」

疑似クラス「:valid」と「:invalid」は、フォームのinput要素の種類に応じた妥当性に基づいて、「:valid」は有効時に、「:invalid」は無効時にだけスタイルを適用できます。
例えば、無効なメールアドレスが入力された時だけ、input要素のカラーをレッドにできます。

input:valid { color: green; }
input:invalid { color: red; }

1 2	input:valid { color: green; } input:invalid { color: red; }

疑似クラス「:empty」は、要素が空の状態の時に適用されます。
例えば、テンプレートで条件付きのコード「<h1>{name}</h1>」で、「{name}」が無い時だけ非表示できます。

h1:empty { display: none; }

1	h1:empty { display: none; }

備考

5. ナンバリングするためにol要素は必要ない「counter」

順序のあるリストを必要とするけど、ol要素を使わないで実装できると思いますか？ JavaScriptは無しです。

心配いりません。一般的なCSSで実装できます。

.shelf { counter-reset: books; }
    .shelf__book { counter-increment: books; }
        .shelf__book::before {
            content: "Book " counter(books) " of 10.";
        }

.shelf { counter-reset: books; }

.shelf__book { counter-increment: books; }

.shelf__book::before {

content: "Book " counter(books) " of 10.";

}

CSSは時々、ばかばかしく見えます。これがまさにその一つです。
結合するために必要なシンボルは無しで、スペースを空けてください。

備考

6. 中身が不明なテーブルの幅を予測可能にする「table-layout:fixed;」

テーブルがデフォルトでどれくらいの幅で表示されるかを決める時に、セルの中身に多くの注意を払います。そんな時は「table-layout:fixed;」を加えると、テーブルを固定レイアウトにでき、管理しやすくなります。

.grid {
    table-layout: fixed;
}

.grid {

table-layout: fixed;

}

備考

7. フォームのステータス表示には隣接兄弟セレクタが便利

隣接兄弟セレクタは、非常に基本的なCSSです。初心者向けのチュートリアルでよく見かけますが、その機能はほとんど充分に使用されていません。

この隣接兄弟セレクタを活用することで、ステータスを表すボタンを作成したり、JavaScript無しでバリデーションのメッセージを作成することが簡単にできます。

[type="checkbox"] + label {
    font-weight:normal;
}
    [type="checkbox"]:checked + label {
        font-weight:bold;
    }
[required]:valid + span { color: green; }
[required]:invalid + span { color: red; }

[type="checkbox"] + label {

font-weight:normal;

}

[type="checkbox"]:checked + label {

font-weight:bold;

}

[required]:valid + span { color: green; }

[required]:invalid + span { color: red; }

備考

8. 数式を使用できる「nth-child()」

「nth-child()」セレクタは、最後の要素だけボーダーを取り除いたり、テーブルの横列をシマシマにしたり、非常に有用な性能をもっていますが、それは氷山の一角に過ぎません。

例えば、簡単な数式を使用して、1番目の要素から4番目ごとの要素を指定することができます。

.book:nth-child(4n+1) { color: red; }

1	.book:nth-child(4n+1) { color: red; }

また、2番目の要素から3番目ごとの要素を指定というのもできます。

.book:nth-child(3n-1) { color: blue; }

1	.book:nth-child(3n-1) { color: blue; }

備考

9. アニメーションの実行後を設定「animation-fill-mode」

要素をアニメーションさせる時に、終了時にその要素を最初の状態に戻したい時があります。
「animation-fill-mode」を使用することで、アニメーションの実行前や実行後にどのようなスタイルを適用するかを設定できます。

@keyframes slideIn {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

.slideIn {
    animation-name: slideIn;
    animation-duration: .25s;
    animation-fill-mode: forwards;
}