CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
Post on:2016年3月7日
sponsors
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。
当記事は、2015/11/4に公開した記事に追加分を加えたものです。
- 更新: 2016/3/7
- 13, 14, 15を追加。
- 更新: 2016/4/13
- 16, 17を追加。
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」を使用
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; } |
モジュールごとに分けるとスタイルするのが簡単で、メンテナンス性もアップします。
sponsors
