基本の前の基礎知識

August 30, 2015

國仲 義則
Yoshinori Kuninaka

（a.k.a. Matori / @ub_pnr）
株式会社シフトブレイン

目次

1. CSSの基本構文
2. プロパティーの仕様と、その値の構文
3. 型と単位
4. 関数表現

仕様を覗いてみてみよう

仕様はどこにあるの？

• CSS current work & how to participate
• CSS3の日本語訳集 - 血統の森 web実験小屋

日本語訳を見るときには、原文と一緒に見ることをお勧めします。
また、誤訳などを見つけたら翻訳者に連絡を取ってみるとよいでしょう。

CSSの基本構文

宣言

property: value

宣言の区切り

property: value;
property: value;

宣言ブロック

{
  property: value;
  property: value;
}

スタイルルール
（ルールセット / 規則セット）

selector-lists {
  property: value;
  property: value;
}

セレクターについては Selectors Level 3 を参照ください。

@ルール

@ルールは、そのルールによって構文が異なります。
詳しくは個別の仕様を参照してください。

@charset "UTF-8";          

@import url("...");        

@keyframes foo {
  from { property: value; }
  to { property: value; }
}

他にも様々な@ルールがあります。

コメント

コメントは1種類のみです。

/* ここはコメントです。 */

/*
  ここはコメントです。
*/

コメント記号から行末までをコメントとする
1行コメントはありませんので

// ここはコメントです。
# ここはコメントです。    

こういうことはできません。

各種プロパティー仕様の
基本的な読み方

それぞれの仕様に載っているプロパティーの仕様表を見てみよう。

Name: プロパティー名
Value: 正規の値と構文
Initial: 初期値
Applies to: このプロパティーが適用される要素
Inherited: プロパティーが継承されるかどうか
Percentages: パーセンテージがどのように解釈されるか
Media: このプロパティーが適用されるメディアグループ
Computed value: 値がどのように計算されるか
Animatable: アニメーション可能かどうか

値の構文

Value Definition Syntax

よくある話題

どの順番で書けばいいの？

borderショートハンドプロパティー

border: 1px solid red;
border: red 1px solid;
border: solid red 1px;

例：box-shadowプロパティー値の構文

Drop Shadows: the ‘box-shadow’ property

box-shadow: none | <shadow> [ , <shadow> ]*   

<shadow> = inset? && <length>{2,4} && <color>?

キーワード

キーワードは仕様にある文字通りに記述します。/や,も同様です。

box-shadow: none | <shadow> [ , <shadow> ]*   

<shadow> = inset? && <length>{2,4} && <color>?

データ型

<と>で囲まれているものはデータ型を表します。

box-shadow: none | <shadow> [ , <shadow> ]*   

<shadow> = inset? && <length>{2,4} && <color>?

並置

並置されている単語は、その順序を守って記述します。

counter-set: [ <custom-ident> <integer>? ]+ | none

&&（ダブルアンパサンド）

&&は2つ以上の構成要素の区切りで、それらの全てを順不同で記述します。

<shadow> = inset? && <length>{2,4} && <color>?

||（ダブルバー）

||は2つ以上の構成要素の区切りで、それらの1つ以上を順不同で記述します。

border: <line-width> || <line-style> || <color>

|（シングルバー）

|は2つ以上の構成要素の区切りで、それらの1つを記述します。

box-shadow: none | <shadow> [ , <shadow> ]*

[と]

[と]の組み合わせはグルーピングに使用されます。

box-shadow: none | <shadow> [ , <shadow> ]*

優先度: 並置 > && > || > |

  a b   |   c ||   d &&   e f    

優先度順に見てみると……

[ a b ] | [ c || [ d && [ e f ]]]

1. [a b]と[e f]はその表記通りに記述。
2. dと[e f]はどちらも必須で順不同。
3. cと[d && [e f]]はcのみ、[d && [e f]]のみ、
   または両方を順不同で記述。
4. [a b]と[c || [d && [e f]]]はどちらか片方を記述。

修飾子

• *は、先行する型、単語、グループが0回以上出現することを示します。
• +は、先行する型、単語、グループが1回以上出現することを示します。
• ?は、先行する型、単語、グループが任意であることを示します。
• 波括弧で囲まれた数字{A}は、先行する型、単語、グループがA回出現することを示します。
• 波括弧で囲まれたコンマ区切りの数字のペア{A,B}は、先行する型、単語、グループが最低A回、最大B回出現することを示します。
• #はコンマによって区切られる、先行する型、単語、グループが1回以上出現することを示します。
• グループ後の!は、そのグループが必須且つ、1つ以上の値を生成しなければならないことを示します。

つまりbox-shadowプロパティーの値は……

box-shadow: none | <shadow> [ , <shadow> ]*

• noneキーワード、またはコンマ区切りによって繰り返し可能な<shadow>型、これらのどれかを指定できます。

<shadow> = inset? && <length>{2,4} && <color>?

であるので……

• insetキーワード、2回以上4回以内繰り返される<length>型、<color>型の組み合わせとなります。
• insetキーワード、<color>型は任意ですが、2回以上4回以内繰り返される<length>型と共に記述する必要があります。
• これらは順不同です。

また、繰り返される<length>型がそれぞれ何を示すのかは直後に記載されています。

注意

なお、現在の<shadow>型の構文で表示がうまくいかない場合があります。
insetが<length>{2,4}と<color>の間に入った場合です。

box-shadow: 1em 1em inset red;
box-shadow: red inset 1em 1em;

古い<shadow>型の構文は次のようなものでしたので、
現在の仕様とも互換性のあるこちらに合わせておくと安全です。

<shadow> = inset? && [<length>{2,4} && <color>?]

borderショートハンドプロパティー

<line-width> || <line-style> || <color>

それぞれ順不同であるので、

border: 1px solid red;
border: red 1px solid;
border: solid red 1px;

仕様上はどの順番で書いても構いません。

型と単位

各プロパティーに指定できる値の、様々な型について。

テキストデータ型

定義済みキーワード

プロパティーごとに決められたキーワード。

margin-top: auto;
font-size: medium;
text-transform: uppercase;

先ほどのbox-shadowでいうとnoneとinsetがそれにあたります。

CSS-wide キーワード

全てのプロパティーに適用できるキーワード。
現在のところ、以下の3つがあります。

• initial: プロパティーの初期値を示します。
• inherit: 親からそのプロパティーの算出値を継承します。
• unset: そのプロパティーが継承されるかどうかに応じて、initialまたはinheritになります。

<custom-ident>型

定義済みキーワードとして解釈されない、作者によるCSS識別子。
使用できる文字などの詳細は仕様をご確認ください。

counter-increment: my-counter;
animation-name: rotation360;
will-change: transform;

妥当ではない例

.foo { animation-name: none; }

@keyframes none {
  to { opacity: 0; }
}

animation-nameの値は

<single-animation-name>#
<single-animation-name> = none | <custom-ident>

であるのでnoneは定義済みキーワードとなります。
よってこの指定は妥当ではありません。

解決例としては以下の様なものがあります。

.foo { animation-name: fade-out; }

@keyframes fade-out {
  to { opacity: 0; }
}

<string>型

<string>は、二重引用符または一重引用符によって囲まれた文字列です。

.foo::before {
  content: "before!";
}

.bar::after {
  content: 'after!';
}

<url>型

リソースの所在を指定します。

<url> = url( <string> <url-modifier>* )

例

background-image: url("./kawaii-icon.png");

background-image: url("icons.svg#kawaii"); 

@importの場合は関数式ではなく<string>のみでの指定も可能です。

@import "./reset.css"

互換性を保つため、引用符なしでの指定も可能となっています。

background-image: url(./kawaii-icon.png);

ただし、これらの代替記法で<url-modifier>は使用できません。

数値データ型

<integer>型

整数。
1つ以上の10進数0〜9の数字の並びで、
数字の前に+-を付与することができます。
範囲は制限されることがあります。

z-index: 0;
order: -1;
counter-increment: my-counter 1;

<number>型

実数。
<integer>または0個以上の数字の後に.と1つ以上の10進数字、
そして任意でeまたはEおよび整数から構成される指数のこと。
範囲は制限されることがあります。

line-height: 1.6; /* 0以上 */
opacity: 0.2; /* 0.0 ~ 1.0 */

<percentage>型

パーセンテージ。
<number>とパーセント記号（%）で構成されます。
パーセンテージは常に別の値に対して相対的となります。

パーセンテージが使用できるプロパティーは、
それが何を基準にするのか定義します。

font-size: 200%; /* 親のフォントサイズ */
padding-top: 50%; /* 包含ブロックの幅 */

ディメンション

<number>の直後に単位がつくもの。
<percentage>は含まれません。

<length>型

長さ。
長さが0のときは<length>型は単位を省略でき、
構文としては<number>と同じになります。
また、長さの範囲は制限されることがあります。

相対的な単位

フォントに対して相対的な長さの単位

• em: この単位が使用される要素のfont-sizeプロパティーの算出値。
• ex: 利用可能な最初のフォントのxの高さ（x-height）。
• ch: 描画に利用されているフォントの0（U+0030）のグリフの送り幅。
• rem: ルート要素のfont-sizeの算出値。

フォントに対して相対的な長さについて

• 単位remを除いてフォントに相対的な長さは使用される要素のフォント計量法を参照します。
• ただしfont-sizeプロパティーに出現する場合は親要素のフォント計量法を参照します。
• 親がない要素の場合はfontプロパティーの初期値に対応するフォント計量法を参照します。

margin: 1rem; /* ルートのフォントサイズ */
padding: 0.5ch; /* この要素のフォントサイズ */
font-size: 1.2em; /* 親のフォントサイズ */

remについて

• HTMLにおいてルート要素はhtml要素です。
• ルート要素に用いられる場合は各プロパティーの初期値を参照します。
• font-sizeの初期値はmediumです。
• どこで使っても常にルート要素のフォントサイズを基準にするため、
  算出値を計算（予測）しやすい便利な単位です。

ビューポートに対する割合の長さの単位

• vw: 初期包含ブロックの幅の1%。
• vh: 初期包含ブロックの高さの1%。
• vmin: vwとvhの小さい方に等しくなります。
  古い仕様ではvmという単位でした。Internet Explorer 9 がvmを使っています。
• vmax: vwとvhの大きい方に等しくなります。
  後から追加された単位のため、実装が遅れているブラウザーもあります。

ビューポートに対する割合の長さ

• ビューポートに対する割合の長さとは、初期包含ブロックに対して相対的な長さのことです。
• 初期包含ブロックとは、連続するメディア（ウェブページなど）では表示領域、ページメディアではページ領域になります。
• ルート要素のoverflowの値がautoの場合、スクロールバーは存在しないものと見なされます。
• たとえば、縦スクロールバーがあるときの
  html {width: 100vw; }と
  html {width: 100%; }は違う長さになります。

絶対単位

物理単位

• cm: センチメートル。1cm = (96/2.54)px
• mm: ミリメートル。1mm = (1/10)cm
• q: クォーターミリメートル。1q = (1/40)cm
• in: インチ。1in = 2.54cm = 96px
• pc: パイカ。1pc = 1/6in
• pt: ポイント。1pt = 1/72in

視野角単位

単位はpxのみ。

• 簡単にいうと画面解像度依存の単位。
• 低解像度の環境、たとえば一般的なパソコンの場合、
  1pxは画面の1ドット。
• たとえばiPhone 6では1px平方区画は2x2=4ドットにあたります。
  同様に、高解像度環境であるプリンターでは4x4=16ドットなどになります。
• 解像度が高くなるごとに1px平方を覆うのに必要な画面ドット数は増加します。

絶対単位について

• スクリーン向けに作る場合は基本的にpxで書いておけば問題ないです。
• 物理単位を使用している場合、実際のスクリーンに描画される長さは物理的な長さと同一とは限りません。
• 絶対単位の仕様は結構複雑なので、詳細は仕様をご確認ください。

<angle>型

角度を表します。

• deg: 度数法。お馴染みのやつです。円の全周は360deg。
• grad: グラジアン。1直角を100とする単位で、円の全周は400grad。
• rad: 弧度法。円の全周は2πrad。
• turn: 回転数。円の全周は1turn。

数値が0でも単位の省略はできません。

<time>型

時間を表します。

• s: 秒。
• ms: ミリ秒。1000msは1sと等しくなります。

数値が0でも単位の省略はできません。

<frequency>型

周波数を表します。

今のところ使い道がありません。
（現在、この型をサポートしているブラウザーは存在しません）

• Hz: ヘルツ。1秒あたりの周波数です。
• kHz: キロヘルツ。1kHzは1000Hzと等しくなります。

CSS2における聴覚メディアグループのpitchプロパティーで使用できたので、Opera Prestoにはサポートしているバージョンがありました。（現在のOperaはPrestoではなくBlinkです）

<resolution>型

解像度を表し、メディアクエリーなどに用いられます。

• dpi: インチあたりのドット数。
• dpcm: センチメートルあたりのドット数。
• dppx: px単位あたりのドット数。

他のモジュールで定義されている型

ここまでCSS Values and Units Module Level 3（ED）を元に見てきましたが、他のモジュールで定義されている型もあります。

<color>型

CSS Color Module Level 3で定義されています。

• カラーキーワード。
• transparentキーワード。
• currentColorキーワード。
• 16進数RGBフォーマット。
• rgb()とrgba()関数。
• hsl()とhsla()関数
• システムカラーキーワードも定義されていますが、
  廃止予定となっています。

CSS Color Module Level 4ではもうちょっと増えそうです。

その他の型

• <image>
• <position>
• <ratio>
• <blend-mode>
• <counter>
• <gradient>
• <shape>
• <timing-function>

……などがあります（他にもあります）。

関数表現

calc()

• 数式を値として利用できる関数で、数式は四則演算が可能です。
• <length>, <frequency>, <angle>, <time>, <number>, <integer>が利用できる箇所で使用できます。
• 加算+と減算-の記号の前後には空白が必要です。

.foo {
  width: calc(100% - 20px);
  font-size: calc(16px + 0.1vw);
  margin-left: calc((50% + 10vh) / 2 );
}

attr()

要素の属性値を参照します。

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

という構文ですが、現在のブラウザーではattr(<attr-name>)という基本形のみ、使用箇所はcontentプロパティーという形式がサポートされています。

仕様の上では要素の属性値に指定された長さや色といった様々なCSSの型を指定した上で属性値を参照し、プロパティーの値として使用できることになっています（あとから削除されるかもしれませんが）。

現在の仕様がフルサポートされた場合は、
こういうことができることになっています。

<div data-z="7">...</div>
---
div { z-index: attr(data-z integer); }

今のところ、実際は次のような感じでしか使えません。

<div data-t="FOO!">...</div>
---
div::before { content: attr(data-t); }

toggle()

実装しているブラウザーが今のところ存在しません。

ul {
  list-style-type: toggle(disc, circle, square, box);
}

これは次のようになることになっています。

ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ul ul ul ul { list-style-type: box; }
ul ul ul ul ul { list-style-type: disc; }
ul ul ul ul ul ul { list-style-type: circle; }
...

その他

別のモジュールで定義された、型特有の関数があります。

まとめ

いろいろと紹介しましたが、一度に覚えなくても様々なプロパティーの仕様を見ていれば次第に覚えていけると思います。
これらを知らなくてもCSSは書けますが、仕様を見るときを含め、実際にぶつかっている問題解決の手助けになることもあります。

今回は大雑把に紹介しましたが、より詳しくは実際に仕様をご覧ください。
眺めるだけでも結構楽しいですよ。

ありがとうございました