CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips
sponsors
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。
CSS Protipsは前回紹介した時（紹介記事）から倍近く量が増えているので、改めて全項目を紹介します。
CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。
スタイルシートの対応ブラウザは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を表示
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の値「http://coliss.com/」が表示されます。
|
1 |
<a href="http://coliss.com/"></a> |
sponsors
Post on:2015年11月4日