知っておくと便利！CSSの小技・テクニックのまとめ -CSS Protips
Post on:2016年7月19日
sponsors
:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイトやブログに役立つ便利なCSSのテクニックを紹介します。
前回紹介した時は12個でしたが、アップデートされ、20個まで増えています。
CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。
スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。
- 1. リスト要素の最後だけ区切り線を削除
- 2. body要素に「line-height」を加える
- 3. 天地の中央に配置
- 4. リストをカンマ区切りにする
- 5. ネガティブな「:nth-child」を使用してアイテムを選択
- 6. SVGファイルの指定
- 7. テキストをすべてのデバイスで最適化
- 8. CSSで実装されたスライダーにはmax-heightを使う
- 9. box-sizingをコンポーネントごとに変更
- 10. テーブルのセルの幅を均等にする
- 11. Flexboxのマージンハックを取り除く
- 12. リンクにテキストが無い時はURLを表示
- 13. 「:not」を使ってデフォルトのリンクをスタイル
- 14. 一貫した縦のリズムを定義
- 15. 内在比率のボックス
- 16. リンク切れの画像要素をスタイル
- 17. グローバルのサイズ指定に「rem」、ローカルに「em」を使用
- 18. 動画の自動再生を隠す
- 19. レスポンシブ対応のフォントサイズを簡単に設定
- 20. スマホ向け、フォーム要素のフォントサイズの設定
1. リスト要素の最後だけ区切り線を削除
「:not()」を使用して、リスト要素で実装したナビゲーションの最後のアイテムだけに区切り線を削除します。
まずは、今までの書き方。
|
1 2 3 4 5 6 7 8 9 |
/* まずは各アイテムの右にボーダーを... */ .nav li { border-right: 1px solid #666; } /* ...続いて、最後だけ削除... */ .nav li:last-child { border-right: 0; } |
「:not()」を使用するとシンプルなコードで指定できます。
|
1 2 3 4 |
/* ...最後のアイテム以外全てにボーダーを適用 */ .nav li:not(:last-child) { border-right: 1px solid #666; } |
:not()など、疑似クラスの更にくわしい使い方は下記ページを参考に。
2. body要素に「line-height」を加える
body要素でline-heightを指定することでp, hnなどにその値が継承されるため、それぞれにline-heightを指定する必要がなくなります。
|
1 2 3 |
body { line-height: 1; } |
3. 天地の中央に配置
ページの天地の中央に要素を配置するシンプルなコードです。
※IE11ではflexboxのバグ（バグ情報）があります（※Edgeは対応済み）。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } |
高さ不明の要素に対して天地中央に配置する場合は下記ページを参考に。
4. リストをカンマ区切りにする
リストの各アイテムをカンマ区切りにします。
|
1 2 3 |
ul > li:not(:last-child)::after { content: ","; } |
5. ネガティブな「:nth-child」を使用してアイテムを選択
nth-childにはネガティブな値も指定できます。
|
1 2 3 4 5 6 7 8 |
li { display: none; } /* 最初から3つ目までのアイテムを表示 */ li:nth-child(-n+3) { display: block; } |
6. SVGファイルの指定
アイコンを使用する時に、SVGを使わない理由はありません。SVGはIE9以降のすべてのブラウザでサポートされています。
|
1 2 3 |
.logo { background: url("logo.svg"); } |
SVGスプライトなど、更にくわしい設置方法は下記ページを参考に。
7. テキストをすべてのデバイスで最適化
下記の指定をすると、ディスプレイのテキストをすべてのデバイスで最適に表示します。
|
1 2 3 4 5 |
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } |
text-renderingは、IE/Edgeではサポートされていません。
8. CSSで実装されたスライダーにはmax-heightを使う
CSSで実装されたスライダーは、max-heightをoverflow: hidden;と一緒に使ってください。
|
1 2 3 4 5 6 7 8 9 |
.slider ul { max-height: 0; overlow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; /* animate to max-height */ } |
9. box-sizingをコンポーネントごとに変更
box-sizingはhtml要素で指定し、継承して利用すると、コンポーネントで変える時に簡単です。
|
1 2 3 4 5 6 7 |
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } |
10. テーブルのセルの幅を均等にする
テーブルの各セルの幅を均等にするには、table-layout: fixed;を使うと簡単にできます。
|
1 2 3 |
.calendar { table-layout: fixed; } |
11. Flexboxのマージンハックを取り除く
flexboxでカラムの溝をつくる時、nth-, first-, last-childなどのハックで最後の溝を取り除くことができますが、それはflexboxのspace-betweenプロパティを使うだけで解決します。
|
1 2 3 4 5 6 7 8 |
.list-of-people { display: flex; justify-content: space-between; } .list-of-people .person { flex-basis: 23%; } |
Flexboxの実装については、下記ページを参考に。
12. リンクにテキストが無い時はURLを表示
リンクのhref属性にはURLがあり、リンクのテキストがない場合に、下記のCSSを使用すると、リンク先のURLを表示します。
|
1 2 3 |
a[href^="http"]:empty::before { content: attr(href); } |
リンクにテキストが無い時はこんな感じで、hrefの値「//coliss.com/」が表示されます。
|
1 |
<a href="//coliss.com/"></a> |
13. 「:not」を使ってデフォルトのリンクをスタイル
WordPressなどのCMSで挿入される通常class属性を持たないリンクに「:not」を使ってスタイルを定義します。
|
1 2 3 4 |
a[href]:not([class]) { color: #008000; text-decoration: underline; } |
14. 一貫した縦のリズムを定義
コンテンツを読みやすくするポイントは、縦のリズムです。指定した要素内の全てに一貫した縦のリズムを定義します。
|
1 2 3 |
.intro > * { margin-bottom: 1.25rem; } |
15. 内在比率のボックス
ボックスを内在比率で作成するには、ボックスの上部か下部にdivの詰め物を適用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } |
paddingに20%を使っているのは、そのボックスの高さを幅の20%と等しくします。ビューポートの幅に関わらず、子のdiv要素のアスペクト比は「100%:20%(5:1)」を保持します。
16. リンク切れの画像要素をスタイル
よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義します。もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。
|
1 2 3 4 5 6 7 8 9 10 |
img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; } |
疑似要素を使い、ユーザーの役に立つ情報を加えることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 |
img:before { content: "We're sorry, the image below is broken :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; } |
リンク切れの画像要素をスタイルについては、下記ページを参考に。
17. グローバルのサイズ指定に「rem」、ローカルに「em」を使用
ベースのフォントサイズを「html{font-size: 16px;}」にルート指定し、テキスト要素を「em」で指定します。
|
1 2 3 4 5 6 7 |
h2 { font-size: 2em; } p { font-size: 1em; } |
モジュールのフォントサイズは「rem」で指定します。
|
1 2 3 4 5 6 7 |
article { font-size: 1.25rem; } aside .module { font-size: .9rem; } |
モジュールごとに分けるとスタイルするのが簡単で、メンテナンス性もアップします。
18. 動画の自動再生を隠す
これはカスタマイズされたユーザースタイルシートのための素晴らしいテクニックです。ページがロードされた時、動画が自動再生されて音がでてしまうユーザーの負担を軽減します。もし無音にできないなら、動画を使わないでください。
|
1 2 3 |
video[autoplay]:not([muted]) { display: none; } |
19. レスポンシブ対応のフォントサイズを簡単に設定
レスポンシブ対応時に、フォントのサイズをビューポートごとに適応することができます。「:root」を使い、ビューポートの高さと幅に基づいてフォントのサイズを定義することができます。
|
1 2 3 |
:root { font-size: calc(1vw + 1vh + .5vmin); } |
「:root」で定義した値に基づいて、それぞれのタグや要素にemを使って利用します。
|
1 2 3 |
body { font: 1em/1.6 sans-serif; } |
20. スマホ向け、フォーム要素のフォントサイズの設定
スマホでセレクト要素のドロップダウンをタップした時に、iOS Safariでフォーム要素にズームインするのを回避するために、フォントサイズを加えます。
|
1 2 3 4 5 6 |
input[type="text"], input[type="number"], select, textarea { font-size: 16px; } |
sponsors
