CSSの便利な小技・テクニックのまとめ

CSSのプロのスキルになるようにアドバイスのリストを紹介します。

他のリストのため： Awesome リスト　の　[@sindresorhus](https://github.com/sindresorhus/)　をチェックSしてください。.

目次

• プロチップス
• サポート
• 参考
• コントリビュート

プロチップス

1. CSSのリセットを使用します
2. box-sizingをコンポーネントごとに変更
3. すべてのプロパティをリセットする代わりに unsetを使う
4. :not() を使用 / ボーダーを削除
5. フォントがローカルにインストールされているかどうかを確認します
6. bodyにline-heightを加える
7. フォーム要素に ：focusを設定する
8. 天地の中央に配置
9. リストをカンマ区切りにする
10. ネガティブな「:nth-child」を使用してアイテムを選択
11. SVGのアイコン
12. Owlを使用
13. CSSで実装されたスライダーにはmax-heightを使う
14. テーブルのセルの幅を均等にする
15. Flexboxのマージンハックを取り除く
16. リンクにテキストが無い時はURLを表示
17. デフォルトのリンクをスタイル
18. 内在比率のボックス
19. リンク切れの画像要素をスタイル
20. グローバルのサイズ指定に「rem」、ローカルに「em」を使用
21. 動画の自動再生を隠す
22. フレクシブルタイプの:rootを使用
23. スマホ向け、フォーム要素のフォントサイズの設定
24. ポインターイベントを使用してマウスイベントを制御する
25. 間隔として使用される改行に「display：none」を設定します

CSSのリセットを使用します

CSSのリセットはスタイリング要素のための白紙の状態で異なるブラウザ間でスタイルの一貫性を強化するのに役立ちます。あなたはNormalize、_et al._のようにCSSのリセットライブラリを使用するか、より簡略化リセットアプローチを使用することができます。

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

今の要素は、マージンやパディングを剥奪し、box-sizingは、CSSボックスモデルとレイアウトを管理することができますされます。

デモ

注意：あなたがあなたのCSSのリセットでInherit box-sizing プロパティが含まれていないことを選択する可能性があります下にbox-sizingヒントに従っている場合。

^{目次へ戻る}

box-sizingをコンポーネントごとに変更

box-sizingはhtml要素で指定し、継承して利用すると、コンポーネントで変える時に簡単です。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

これでプラグインかその他のコンポーネントに box-sizing を変更しやすくなります。

デモ

^{目次へ戻る}

すべてのプロパティをリセットする代わりに unsetを使う

要素のプロパティをリセットするときは、個々のプロパティをリセットする必要はありません。

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

要素のプロパティのすべてを all省略形で指定することができます。 値を unsetに設定すると、要素のプロパティが初期値に変更されます：

button {
  all: unset;
}

備考: IE11では allおよびunsetの省略形はサポートされていません。

^{目次へ戻る}

:not()を使用して、リスト要素で実装したナビゲーションの最後のアイテムだけに区切り線を削除します。

ボーダーを書いて。。。

/* add border */
.nav li {
  border-right: 1px solid #666;
}

ラストチャイルドで非表示するより

/* remove border */
.nav li:last-child {
  border-right: none;
}

:not()を使用するとシンプルなコードで指定できます。

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

CSSセレクターは、境界線を人間が表現する方法で定義します。

デモ

^{目次へ戻る}

フォントがローカルにインストールされているかどうかを確認します

フォントをリモートでフェッチする前に、フォントがローカルにインストールされているかどうかを確認できます。これもパフォーマンスのヒントになります。

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank Mono"),
    /* Otherwise, download it! */
    url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

このプロチップとデモを共有してくれたAdam Argyleへの帽子のヒント.

^{目次へ戻る}

body にline-heightを加える

body要素でline-heightを指定することでp, h*などにその値が継承されるため、それぞれにline-heightを指定する必要がなくなります。

body {
  line-height: 1.5;
}

デモ

^{目次へ戻る}

フォーム要素に ：focusを設定する

視認されたキーボードユーザーは、キーボードイベントがページ内のどこに移動するかを決定するためにフォーカスを当てています。 フォーム要素のフォーカスを目立たせ、ブラウザのデフォルトの実装と一貫性を持たせる：

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

デモ

^{目次へ戻る}

天地の中央に配置

なんでも天地の中央に配置できます！！

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

…CSSグリッド:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

なんでも中央に揃いたいですか？ CSS-Tricks のセントリングガイド をチェックしてください。

備考: IE11のFlexboxの バグを気をつけてください

デモ

^{目次へ戻る}

リストをカンマ区切りにする

リストの各アイテムをカンマ区切りにします。

ul > li:not(:last-child)::after {
  content: ",";
}

:not() を使えば最後のエレメントにカンマ追加されないようにします。

備考: アクセシビリティによくないので気をつけてをお使いください。

^{目次へ戻る}

ネガティブな :nth-child を使用してアイテムを選択

nth-childにはネガティブな値も指定できます。

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

また :not()　を使用してこちらをのコードを書いてみてください：

/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
  display: none;
}

簡単でしょう〜！

デモ

^{目次へ戻る}

SVGのアイコン

アイコンとしてSVGを使えない理由がないです！

.logo {
  background: url("logo.svg");
}

SVGは IE9以降のすべてのブラウザでサポートされています。

備考: ボタンがSVGだけで作られている場合、SVGがローディングされなかったらアクセシビリティのためこちらのコードを書いて見てください:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

^{目次へ戻る}

Owlを使用

変な名前ですが(*) と (+) を使用するとパワフルCSSセレクターになります！

* + * {
  margin-top: 1.5em;
}

全てのページの要素にある要素がmargin-top: 1.5emをもらいます。

Owlについて詳しくはこちら：List Apart のヘイドンピケリングの記事

デモ

^{目次へ戻る}

CSSで実装されたスライダーにはmax-heightを使う

CSSで実装されたスライダーは、max-heightをoverflow: hidden;と一緒に使ってください。

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

ホバーの時max-heightの要素を拡張オバーフローの結果でスライダーが表示されます。

^{目次へ戻る}

テーブルのセルの幅を均等にする

テーブルの各セルの幅を均等にするには、table-layout: fixed;を使うと簡単にできます。

.calendar {
  table-layout: fixed;
}

簡単にテーブルレイアウトを作れます。

デモ

^{目次へ戻る}

Flexboxのマージンハックを取り除く

flexboxでカラムの溝をつくる時、nth-, first-, last-childなどのハックで最後の溝を取り除くことができますが、それはflexboxのspace-betweenプロパティを使うだけで解決します。

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

columnのスペースが揃えている。

^{目次へ戻る}

リンクにテキストが無い時はURLを表示

リンクのhref属性にはURLがあり、リンクのテキストがない場合に、下記のCSSを使用すると、リンク先のURLを表示します。

a[href^="http"]:empty::before {
  content: attr(href);
}

便利ですよー！

デモ

^{目次へ戻る}

:notを使ってデフォルトのリンクをスタイル

デフォルトのリンクのスタイルを追加：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

CMSで挿入される通常class属性を持たないリンクに:notを使ってスタイルを定義します。

^{目次へ戻る}

内在比率のボックス

ボックスを内在比率で作成するには、ボックスの上部か下部にdivの詰め物を適用します。

.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)」を保持します。

デモ

^{目次へ戻る}

リンク切れの画像要素をスタイル

よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義します。もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。

img {  
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

疑似要素を使い、ユーザーの役に立つ情報を加えることもできます。

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;
}

このようなスタイリングに興味があればこちらに参考してください：イレ　アデリノクン’ リンク切れの画像についての記事.

^{目次へ戻る}

グローバルのサイズ指定にrem、ローカルにemを使用

ベースのフォントサイズをhtml{font-size: 16px;}にルート指定し、テキスト要素をemで指定します。

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

モジュールのフォントサイズはremで指定します。

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

モジュールごとに分けるとスタイルするのが簡単で、メンテナンス性もアップします。

^{目次へ戻る}

動画の自動再生を隠す

これはカスタマイズされたユーザースタイルシートのための素晴らしいテクニックです。ページがロードされた時、動画が自動再生されて音がでてしまうユーザーの負担を軽減します。もし無音にできないなら、動画を使わないでください。

video[autoplay]:not([muted]) {
  display: none;
}

こちらも :not()を使用できます！

^{目次へ戻る}

フレクシブルタイプの:rootを使用

レスポンシブ対応時に、フォントのサイズをビューポートごとに適応することができます。:rootを使い、ビューポートの高さと幅に基づいてフォントのサイズを定義することができます。

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

デモ

:rootで定義した値に基づいて、それぞれのタグや要素にemを使って利用します。

body {
  font: 1rem/1.6 sans-serif;
}

^{目次へ戻る}

スマホ向け、フォーム要素のフォントサイズの設定

スマホでセレクト要素のドロップダウンをタップした時に、iOS Safariでフォーム要素にズームインするのを回避するために、フォントサイズを加えます。

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

:dancer:

^{目次へ戻る}

ポインターイベントを使用してマウスイベントを制御する

Pointer eventsでは、マウスがタッチしている要素とどのように対話するかを指定することができます。 ボタン上のデフォルトポインタイベントを無効にするには、次のようにします。

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

それは簡単です。

^{目次へ戻る}

間隔として使用される改行に display：none を設定します

ハリー・ロバーツが指摘したように、これはCMSユーザーがスペースのために余分な改行を使用するのを防ぐのに役立ちます：

br + br {
  display: none;
}

^{目次へ戻る}

サポート

現在のChrome, Firefox, Safari, Opera と EdgeのバージョンとIE11.