CSSプロフェッショナルのためのTIPS

23
いいね
0
コメント

rana_kualu

2017年06月16日に投稿

CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編戸田奈津子訳した。
あれ、あんまり変わってない気がしてきたぞ。

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

CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。

CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。

テクニック

CSSリセット

異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。
NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。

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

marginとpaddingの余白を削除し、box-sizingはボックスモデルで書けるように設定した。

デモ

注意：box-sizingの継承に従っている場合は、CSSリセットにbox-sizingを含めない方がよいだろう。

box-sizingの継承

box-sizingはhtmlタグで指定しよう。

    html {
      box-sizing: border-box;
    }

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

box-sizingに異なる動作をさせたいプラグインやコンポーネントが、box-sizingの動作を容易に変更できるようになる。

ナビゲーションの区切りに`:not()`を使う

borderを指定してからlast-childで最後のborderだけを非表示にする。

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

もちろん .nav li + li や .nav li:first-child ～ li 等を使ってもいい。
しかし、:not() のほうが意図が明確で、意味のわかりやすいCSSセレクタになるぞ。

`body`に`line-height`をセット

pやh*等の各要素にそれぞれline-heightを割り当てる必要はなくて、単にbodyに追加するだけでいいぞ。

    body {
      line-height: 1.5;
    }

このように、テキスト要素はbodyタグから継承されるぞ。

インライン要素の上下中央寄せ

縦方向の中央寄せが簡単に作れるぞ。そう、Flexboxならね。

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

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

他にも上下、左右、その他に揃えたいのであれば、CSS-Tricks のa nice write-upに色々と例が載ってるぞ。

注意:IE11のFlexboxにはバグがあるので気をつけて。

リストをカンマ区切り表示

liのアイテムは簡単にカンマ区切り表示できるよ。

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

:not()を使えば最後に不要な,を表示させないようにできるぞ。

注意：アクセシビリティ的にはよくないので気をつけて使おう。

`:nth-child`に負数を指定

:nth-childにはマイナスも指定できる。

    li {
      display: none;
    }

    /* 最初から3番目まで表示する */
    li:nth-child(-n+3) {
      display: block;
    }

またnot()と組み合わせたりもできる。

    /* 最初から3番目以外を非表示にする */
    li:not(:nth-child(-n+3)) {
      display: none;
    }

とっても簡単だね。

SVGのアイコン

アイコンにSVGを使わない理由はもはやない。

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

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

注意：buttonをSVGだけで作っている場合は、SVGのロードに失敗したときにもアクセシビリティを保つために、以下のCSSを書いておくとよい。

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

`Lobotomized Owls`セレクタ

変な名前だが、ユニバーサルセレクタ*としぶりんセレクタ+を使用するとパワフルなCSSセレクタになるぞ。

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

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

Owlについて詳しく知りたいなら、Heydon Pickeringの記事を読むといい。

`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などを駆使してどうこうしたりしなくても、単にspace-betweenを使うだけでいい。

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

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

両端を端に寄せて残りが均等に配置される。

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

aタグに内容が何もないときにはhref属性値を表示したい。
簡単にできるよ、そうCSSならね。

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

便利だね。

リンクのstyleデフォルト値

デフォルトのstyleを設定できる。

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

CMSなどで後から追加される、classを持たないaタグにスタイルを指定できるし、他のスタイルに影響もしないよ。

縦幅を一括調整

ユニバーサルセレクタ*で縦の間隔を一括調整できるぞ。

    .intro > * {
      margin-bottom: 1.25rem;
    }

縦のリズムこそが、コンテンツを読みやすくするポイントだ。

縦横比固定のボックス

縦横比固定のボックスを作るには、divの上か下にpaddingすればいい。

    .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になります。

リンク切れ画像にCSS指定

リンク切れ画像は見た目がよくないのでスタイルを定義しましょう。

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

メッセージとURLをユーザに見せるようにもできます。

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

もっと詳しくはIre AderinokunのStyling Broken Imagesを読むとよいでしょう。

`rem`と`em`の使い分け

まず最初に基本となるhtml{font-size: 16px;}を指定し、次にテキスト要素のfont-sizeは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を使っている。

Flexboxで`:root`を使う

レスポンシブデザインのフォントサイズを、viewportに従って変更することができる。
viewportの大きさからフォントサイズを算出し、:rootに定義するとよい。

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

各タグや要素のフォントサイズは、:rootの値から相対的に決める。

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

スマホ向けフォームの`font-size`指定

スマホでselectタグのドロップダウンリストを表示したとき、ブラウザが勝手に拡大表示するのを防ぐには、font-sizeを指定する。

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

サポート

最新バージョンのChrome、Firefox、Safari、Opera、Edge、およびIE11で動作するはず。

翻訳

Español
Français
Italiano
日本語
 Português do Brasil
Русский
简体中文

感想

便利そうなものも使い道のなさそうなものもいろいろ。
でも最近はもう一からCSS書くとかあんまりしないよね。

Lobotomized Owlsセレクタは並列要素の"最初以外"を選択する便利な書き方なんだけど、日本語での紹介記事があまりにも存在しないのはどういうわけだろう。
例えばナビゲーション区切りの:notは以下のようにも書ける。


    // 元のやつ
    nav li:not(:last-child) {
      border-right: 1px solid #666;
    }

    // ↑とだいたい同じ
    nav * + * {
      border-left: 1px solid #666;
    }

全称セレクタは遅い？
今時気にするようなレベルのものでもないだろう。

[CSS Protips](https://github.com/AllThingsSmitty/css-protips)というTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で[何言ってるのか全くわからない](https://github.com/AllThingsSmitty/css-protips/tree/2aaf8a8d47d47d131db2918ce686041cfbc4868e/translations/ja-JP)ので全編戸田奈津子訳した。
あれ、あんまり変わってない気がしてきたぞ。

# CSSの便利な小技・テクニックのまとめ [Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)

CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。

> CSS以外の[Awesomeリスト](https://github.com/sindresorhus/awesome/)を探したいときは[@sindresorhus](https://github.com/sindresorhus/)をフォローしよう。

## 目次

[テクニック](#テクニック)
[サポート](#サポート)
[翻訳](#翻訳)
[手伝いたい](https://github.com/AllThingsSmitty/css-protips/blob/master/CONTRIBUTING.md)

##  テクニック

### CSSリセット

異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。
[Normalize](http://necolas.github.io/normalize.css/)のようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。

```css
	* {
	  box-sizing: border-box;
	  margin: 0;
	  padding: 0;
	}
```

`margin`と`padding`の余白を削除し、`box-sizing`はボックスモデルで書けるように設定した。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/kkrkLL)

注意：[box-sizingの継承](#box-sizingの継承)に従っている場合は、CSSリセットに`box-sizing`を含めない方がよいだろう。

### box-sizingの継承

`box-sizing`はhtmlタグで指定しよう。

```css
	html {
	  box-sizing: border-box;
	}

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

`box-sizing`に異なる動作をさせたいプラグインやコンポーネントが、`box-sizing`の動作を容易に変更できるようになる。

### ナビゲーションの区切りに`:not()`を使う

`border`を指定してから`last-child`で最後の`border`だけを非表示にする。

```css
	/* add border */
	.nav li {
	  border-right: 1px solid #666;
	}
	
	/* remove border */
	.nav li:last-child {
	  border-right: none;
	}
```

と、このように書くより`:not()`を使ったほうがシンプルに書ける。

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

もちろん `.nav li + li` や `.nav li:first-child ～ li` 等を使ってもいい。
しかし、`:not()` のほうが意図が明確で、意味のわかりやすいCSSセレクタになるぞ。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/LkymvO)

### `body`に`line-height`をセット

`p`や`h*`等の各要素にそれぞれ`line-height`を割り当てる必要はなくて、単に`body`に追加するだけでいいぞ。

```css
	body {
	  line-height: 1.5;
	}
```

このように、テキスト要素は`body`タグから継承されるぞ。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/VjbdYd)

### インライン要素の上下中央寄せ

縦方向の中央寄せが簡単に作れるぞ。そう、Flexboxならね。

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

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

他にも上下、左右、その他に揃えたいのであれば、CSS-Tricks の[a nice write-up](https://css-tricks.com/centering-css-complete-guide/)に色々と例が載ってるぞ。

注意:IE11のFlexboxには [バグがあるので気をつけて](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items)。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/GqmGqZ)

### リストをカンマ区切り表示

liのアイテムは簡単にカンマ区切り表示できるよ。

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

`:not()`を使えば最後に不要な,を表示させないようにできるぞ。

注意：アクセシビリティ的にはよくないので気をつけて使おう。

### `:nth-child`に負数を指定

`:nth-child`にはマイナスも指定できる。

```css
	li {
	  display: none;
	}

/* 最初から3番目まで表示する */
	li:nth-child(-n+3) {
	  display: block;
	}
```

また`not()`と組み合わせたりもできる。

```css
	/* 最初から3番目以外を非表示にする */
	li:not(:nth-child(-n+3)) {
	  display: none;
	}
```

とっても簡単だね。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/WxjKZp)

<div id="use-svg-for-icons"></div>
### SVGのアイコン

アイコンにSVGを使わない理由はもはやない。

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

SVGは[IE9](http://caniuse.com/#search=svg)以降すべてのブラウザでサポートされている。

注意：buttonをSVGだけで作っている場合は、SVGのロードに失敗したときにもアクセシビリティを保つために、以下のCSSを書いておくとよい。

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

### `Lobotomized Owls`セレクタ

変な名前だが、ユニバーサルセレクタ`*`としぶりんセレクタ`+`を使用するとパワフルなCSSセレクタになるぞ。

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

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

Owlについて詳しく知りたいなら、[Heydon Pickeringの記事](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls)を読むといい。

#### [デモ](https://codepen.io/AllThingsSmitty/pen/grRvWq)

### `max-height`でCSSオンリーのスライダー

`max-height`と`overflow:hidden`だけで簡単にスライダーが作れるぞ。

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

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

`max-height`を超えた中身はマウスオーバーで表示されて、それでも入りきらない場合はスクロールする。

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

`table-layout: fixed;`を使うとテーブルの各セル幅が均等になるぞ。

```css
.calendar {
  table-layout: fixed;
}
```

超簡単。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/jALALm)

### Flexboxのマージンを削除

`flexbox`のマージンを調整したい場合、`nth-`、`first-`、`last-child`などを駆使してどうこうしたりしなくても、単に`space-between`を使うだけでいい。

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

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

両端を端に寄せて残りが均等に配置される。

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

`a`タグに内容が何もないときには`href`属性値を表示したい。
簡単にできるよ、そうCSSならね。

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

便利だね。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/zBzXRx)

### リンクのstyleデフォルト値

デフォルトのstyleを設定できる。

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

CMSなどで後から追加される、classを持たない`a`タグにスタイルを指定できるし、他のスタイルに影響もしないよ。

### 縦幅を一括調整

ユニバーサルセレクタ`*`で縦の間隔を一括調整できるぞ。

```css
	.intro > * {
	  margin-bottom: 1.25rem;
	}
```

縦のリズムこそが、コンテンツを読みやすくするポイントだ。

### 縦横比固定のボックス

縦横比固定のボックスを作るには、`div`の上か下に`padding`すればいい。

```css
	.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になります。

#### [デモ](http://codepen.io/AllThingsSmitty/pen/jALZvE)

### リンク切れ画像にCSS指定

リンク切れ画像は見た目がよくないのでスタイルを定義しましょう。

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

メッセージとURLをユーザに見せるようにもできます。

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

もっと詳しくは[Ire Aderinokun](https://github.com/ireade/)の[Styling Broken Images](http://bitsofco.de/styling-broken-images/)を読むとよいでしょう。

### `rem`と`em`の使い分け

まず最初に基本となる`html{font-size: 16px;}`を指定し、次にテキスト要素の`font-size`は`em`で指定します。

```css
	h2 {
	  font-size: 2em;
	}

p {
	  font-size: 1em;
	}
```

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

```css
	article {
	  font-size: 1.25rem;
	}

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

各モジュールはコンパートメント化され、スタイル設定は簡単になり、保守性と柔軟性が向上しました。

### 自動再生動画を隠す

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

ここでもふたたび上記の`:not`を使っている。

### Flexboxで`:root`を使う

レスポンシブデザインのフォントサイズを、viewportに従って変更することができる。
viewportの大きさからフォントサイズを算出し、`:root`に定義するとよい。

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

各タグや要素のフォントサイズは、`:root`の値から相対的に決める。

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

#### [デモ](http://codepen.io/AllThingsSmitty/pen/XKgOkR)

### スマホ向けフォームの`font-size`指定

スマホで`select`タグのドロップダウンリストを表示したとき、ブラウザが勝手に拡大表示するのを防ぐには、`font-size`を指定する。

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

## サポート

最新バージョンのChrome、Firefox、Safari、Opera、Edge、およびIE11で動作するはず。

## 翻訳

[Español](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/es-ES)
[Français](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/fr-FR)
[Italiano](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/it-IT)
[日本語](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ja-JP)
[Português do Brasil](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/pt-BR)
[Русский](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/ru-RU)
[简体中文](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN)

## 感想

便利そうなものも使い道のなさそうなものもいろいろ。
でも最近はもう一からCSS書くとかあんまりしないよね。

Lobotomized Owlsセレクタは並列要素の"最初以外"を選択する便利な書き方なんだけど、日本語での紹介記事があまりにも存在しないのはどういうわけだろう。
例えばナビゲーション区切りの[`:not`](http://codepen.io/AllThingsSmitty/pen/LkymvO)は以下のようにも[書ける](https://codepen.io/anon/pen/qjqYwW)。

```css
	
	// 元のやつ
	nav li:not(:last-child) {
	  border-right: 1px solid #666;
	}
	
	// ↑とだいたい同じ
	nav * + * {
	  border-left: 1px solid #666;
	}
```

全称セレクタは遅い？
今時気にするようなレベルのものでもないだろう。