16. CSS syntax — Learn web development | MDN

Tatsuya Asami

7 min readJul 17, 2018

【所要時間】

1時間22分(2018年7月17日)

【概要】

・CSSの基本文法を学ぶ

【要約・学んだこと】

・CSSはdeclarative languageで、構文を簡単に理解できるようにしている。また、いいエラーリカバリーしステもを持っている。

・A touch of vocabulary

CSSは2つのビルディングブロックで構成されている。
・Properties: フォント、幅、背景など変えたいスタイルを示す読める識別子。
・Values: 指定されたそれぞれのpropertyは値が与えられる。この値はどうやってスタイルを変えたいか（フォント、幅、背景などで変えたいスタイルをどうやって変えたいか）を示す。

propertyとペアになるvalueを CSS declaration と呼ぶ。CSS declarationsはCSS Declaration Blocks内にあり、selectorとペアになり、CSS Rulesets (or CSS Rules)w作る。

・CSS declarations
CSS propertiesを特定のvaluesにセットするのが、CSS言語のコア機能である。
propertyとValueはコロン : で区切る。
約300近くのpropertyと、無限のvaluesが存在する。

もし不明なpropertyや、propertyに無効なvalueの場合、ブラウザのCSSエンジンに完全に無視される。

CSSやその他標準的なウェブでは、USスペルを使う。e.g.) color はOK, colour はだめ。

・CSS declaration blocks
Declarationはbolockの中に入る。

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

{ }: この中全体をblock
color, background-color, borderといった、 : の前がdeclaration
; でそれぞれのdeclarationを区切る。
最後のdeclarationの後ろには ; は不要だが、つけた方がいい。

・CSS selectors and rules
selectorによって、declaration blocksはelementsに適用される。selectorとdeclarations blockを合わせて、rulesetまたはruleという・

selectorについて詳しくはCascade and inheritance参照。

chainまたはgroupの中で１つのselectorが無効でも、他のselectorは有効である。

・CSS statements
CSS Rulesはstyle sheetの中心である。CSS RulesはCSS statementの中の１つのタイプだ。他のタイプには

・At-rules: At-rulesはメタデータ、条件付き情報、他の記述的な情報を伝えるために使われる。@ で始まり、 ; で終わる。at-ruleのタイプはこちら参照。

@import 'custom.css';

・Nested statements: Nested statementsはat-ruleの特定のサブセットのこと。特定の条件が一致したときに、ドキュメントに適用されるCSSルールのネストされたブロック構文である。
@media はデバイスがブラウザを実行するデバイスが表現される条件とマッチした場合にのみ適用される。

Specific syntax example

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

このnested statementは、ページ幅が800pxを超えた場合のみ適用される。

・Beyond syntax: make CSS readable

・White space
whit spaceとはスペース、タブ、新しい行のことを意味する。HTMLと同様、white spaceは読みやすくするためのものなので、CSS内にたくさん書いても無視される。

CSSのいい書き方例（読みやすい。スペースは無視される。）

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}div p + p {
  padding-top: 0;
}

CSSの悪い書き方例（読みにくい）

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }div p + p {padding-top: 0;}

CSSのWhite spaceについては気をつけなければならない。

Valid

margin: 0 auto;
padding-left: 10px;

Invalid

margin: 0auto;
padding- left: 10px;

・Comments
HTMLと同様に、忘れた頃にコードがどのように動くのか理解できるようにするために、他人がわかるように、CSSにコメントを残すのが望ましい。

CSSのコメントは /* で始まり */ で終わる。

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

・Shorthand
フォント、背景、マージンなどはshorthand propertiesと呼ばれる。複数のproperty valuesを1行に書け、時間の節約ときちんとしたコードになる。

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

を短く書くと

padding: 10px 15px 15px 5px;

になる。

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

は

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

になる。

【わからなかったこと】

selectorの理解が不十分な気もするが、次のレッスンで扱ってるので先にすすむ。

【感想】

いつも体感時間より実際の時間が早く進んでいる。今回1時間弱で終わったように感じたけど1時間半くらいかかった。

16. CSS syntax — Learn web development | MDN

・A touch of vocabulary

・Beyond syntax: make CSS readable

Written by Tatsuya Asami

Responses (1)