CSSが苦手なWebデザイナーが知っておきたい、デザインに関係するCSSのテクニックのまとめ

Webデザイナーはデザインの知識やテクニックだけでなく、どのような実装テクニックがあり、何が実現可能なのか知っておくことで、さらに素晴らしいデザインを作りだすのに役立たせることができます。

Webデザイナーにとって、CSSは難しく感じるかもしれません。しかし全部を覚える必要はありません。デザインに関わるいくつかの有用なCSSのテクニックを紹介します。

20 essential CSS tricks every designer should know
イラスト: Girls Design Materials

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 1. 絶対位置への配置
• 2. 全称セレクタ（*）
• 3. すべてのスタイルを上書き
• 4. 左右の中央に配置
• 5. 天地の中央に配置（テキストのナビに）
• 6. ホバーエフェクト
• 7. リンクのステータス
• 8. あらゆるサイズの画像をフィットさせる
• 9. 要素の指定
• 10． 子要素の指定
• 11. 複数のclass、セレクタをスタイル
• 12. box-sizing:border-box;
• 13. :before疑似要素
• 14. :after疑似要素
• 15. contentプロパティ
• 16. CSSリセット
• 17. ドロップキャップ
• 18. 文字をすべて小文字、すべて大文字、最初だけ大文字に
• 19. ブラウザいっぱいにコンテンツを表示
• 20. 電話番号のリンクのスタイル

1. 絶対位置への配置

要素をページ上の特定の位置でコントロールさせたい場合は、まずは絶対位置に配置することを検討します。絶対位置で配置をおこなうと、その要素を正確に配置することが可能です。要素をどこに配置するかは、上・右・下・左をピクセル値で指定します。

このスタイルシートでは、ブラウザの上端から20px、右端から20pxの位置に要素を配置します。
また、親要素にstatic以外の値を指定している場合は、親要素が基準になり、例えばdiv要素の内側に絶対位置で配置することもできます。

2. 全称セレクタ（*）

全称セレクタは特定のセレクタのすべての要素を選択することができます。
「*」だけを使い、すべての要素を選択することもできますが、例えば「* p」と指定すると、p要素すべてを選択できます。これをうまく使うことで、特定の親要素内の子要素が何であるかに関わらず「.content * p」のように目標を定めることも可能です。

3. すべてのスタイルを上書き

これは慎重に使用してください。なぜならスタイルのすべてを上書きするからです。どうしても特定の要素に優先的にスタイルを与えたい場合のみ「!important」を使用します。
例えば特定のセクションのh2要素が通常はブルーで、その代わりにレッドにするというように限られた要素に適用するようにしましょう。

4. 左右の中央に配置

センタリングのテクニックは、何を配置するかによってスタイルシートは異なります。

テキスト

テキストの場合は「text-align:center;」を使い、左右の中央に配置できます。

コンテンツ

div要素など（他のあらゆる要素も）は、「display: block;」でブロックにして、「margin: auto;」を使うことで、左右の中央に配置できます。

幅を「100%未満の値」にしたのは、その要素が100%の幅なら中央に配置する必要がないためです。60%や550pxのように幅を指定してください。

5. 天地の中央に配置（テキストのナビに）

これはテキストのナビゲーションでよく使うテクニックです。
ポイントは、メニューの高さと同じ値を行の高さに指定することです。

6. ホバーエフェクト

ホバーエフェクトはテキストリンクをはじめ、ボタン、アイコン、ブロック要素など、サイト内で多く利用されます。要素をホバーした際に、カラーを変化させるのは非常に簡単です。

このスタイルシートで、h2要素の見出しのテキストのカラーが、ブラックからレッドに変化します。サイズやウェイトを変化させる必要がない場合は、ホバー時のスタイルに指定しなくて大丈夫です。変化させるスタイルだけを指定します。

アニメーションを加える

ホバーした際に、急激にカラーを変更するのではなく、アニメーションで少しずつ変化させることもできます。

これは0.3秒を使ってカラーをレッドに変化させます。カラーは少しずつ変化させた方が目に楽しいです。

7. リンクのステータス

これらのスタイルは多くのデザイナーが見落としがちで、ビジターにユーザビリティの面で問題を起こします。:link疑似クラスはまだクリックされていないリンクで、:visited疑似クラスはすでにクリックされたリンクのコントロールです。
これらのスタイルを定義することで、ビジターはサイト内のどこが未訪問で、どこが訪問済みか理解できます。

8. あらゆるサイズの画像をフィットさせる

ある幅にあうように画像の大きさを調整することがあります。その時、個別にサイズを指定するのではなく、簡単な指定方法で画像を最適なサイズで配置することができます。

このスタイルは画像の最大幅に基づいて100%で表示され、高さは自動的に計算されることを意味します。

9. 要素の指定

通常、上記のように画像を指定する時はセレクタを組み合わせます。ブログなどの画像であれば、「.blog img」のように指定します。ヘッダ内のロゴ、サイドバー内のアイコンなど、セレクタを組み合わせることでその要素を的確に指定できます。

10． 子要素の指定

私が最初にCSSを使い始めたとき、これを知っていればよかったのにと思います。これは多くの時間を節約します。
子要素を選択するために「>」を使用します。

これは「#footer」の子要素にあるすべてのa要素を選択でき、スタイルできます。フッタに配置されている普通のテキストなど、他の要素は選択しません。テキストベースのナビゲーションにもよく使うテクニックです。

子要素を特定して指定

これはリストのスタイルで、間違いなく有用です。リストの特定のアイテムを指定して、スタイルを適用できます。

このスタイルは、リストで2番目のアイテムをターゲットにし、テキストのスタイルを指定しています。

数式を利用することもでき、「2」を「2n」にすることですべての2番目、つまり偶数番目をターゲットにすることもできます。
テーブルのセルをシマシマのカラーにする時に、よく使うテクニックです。

11. 複数のclass、セレクタをスタイル

例えば、すべての画像とコンテンツとサイドバーに同じボーダーを適用したいとします。これは3回、同じCSSを書く必要はありません。各アイテムをコンマ「,」で区切って記述できます。

12. box-sizing:border-box;

これは多くのWebデザイナーの間でお気に入りです。なぜならパディングやレイアウトの問題を解決するからです。基本的に、ボックスに特定のサイズを指定して、パディングを加えると、そのパディングはボックスのサイズをその分増やします。
しかし、「box-sizing:border-box;」を使用すると、それがなくなり、パディングを加えてもボックスのサイズは指定した値を保ちます。

左: ボックスのサイズにpaddingが加わる、右: ボックスのサイズは指定した幅

13. :before疑似要素

このCSSは、特定の要素の前に内容を追加できるセレクタです。
例えば、h2要素の前に特定のテキスト（Read:）を追加したい時には、下記のように記述します。

このテクニックは、アイコンフォントにも極めて有用です。特定の要素の前にアイコンを表示させることができます。

14. :after疑似要素

:before疑似要素のように、特定の要素の後に内容を追加することができるセレクタです。
ブログでよく見かける抜粋の後に表示される「Read more」によく使われています。

15. contentプロパティ

contentプロパティは、コントロールできるようにしたい要素を挿入する必要がある場合に便利なCSSプロパティです。最もよく使用されるのは、特定の場所にアイコンフォントからアイコンを配置することです。
上記のように、テキストを配置することもできます。

16. CSSリセット

Chrome, IE, Firefoxなど、異なるブラウザごとにデフォルトのCSSを持っており、それらをリセットするために不可欠なのがCSSリセットです。CSSリセットはCSSの出発点で、それらの異なるスタイルに一貫性を与え、実装のベースになる標準的なスタイルを定義します。
ブラウザごとに異なるデフォルトのボーダー、マージン、パディング、行間などに一貫性を与えます。

参考

• CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート
• 2015年、Web制作者が押さえておきたいCSSの各種リセットのまとめ

17. ドロップキャップ

ドロップキャップは、英語圏のコンテンツを始める時の素晴らしい方法です。最初の文字を大きくすることで、ビジターの注意を得ます。CSSではこのドロップキャップを作る簡単な方法があり、:first-letter疑似要素を使用します。

「font-size:300%;」で文字の大きさを3倍にし、スペースを3px設け、カラーをレッドにしました。

18. 文字をすべて小文字、すべて大文字、最初だけ大文字に

文字をすべて大文字で表示したい時に、すべての文字を大文字で入力するのはばかばかしいです。なぜならデザインが変わった時に、文字も入力し直す必要があるからです。
すべて大文字に、すべて小文字に、最初だけ大文字にしたい時は、CSSでそのフォーマットを指定できます。

• h2 { text-transform: uppercase; } :すべて大文字に
• h2 { text-transform: lowercase; } :すべて小文字に
• h2 { text-transform: capitalize; } :最初だけ大文字に

19. ブラウザいっぱいにコンテンツを表示

ブラウザいっぱいにコンテンツを表示したいことがあります。そんな時には単位に「vh」を使い、高さをコントロールすることができます。

今までは単位に「%」を使い、高さを「100%」と指定していたかもしれません。しかし「%」で定義された要素のサイズは親要素に基づくため、親要素が高さに何らかの影響を受けている必要があります。これを実現するには、html要素を親要素として要素を配置するか、なんらかのハックをしなければできないでしょう。
しかし、「vh」を使用すると簡単にできます。

• ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

20. 電話番号のリンクのスタイル

ビジターがスマホでリンクをタップしたときに、電話番号を呼び出すリンクがある場合は、よく使うリンクセレクタではスタイルできません。その代わりに下記のCSSを使用します。

20 essential CSS tricks every designer should know