イイダリョウのブログ。【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-32017-10-25【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3CSSWebサイトを形作っている言語「HTML」「CSS」「JS」。この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。書ける前に読む!*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。第3回は「CSSの基本」編。属性セレクタ@ルールCSSサンプル第1回(Webの基礎知識)にも書いたようにCSSは文書の見た目(スタイル)を変える「スタイルシート言語」だ。そのままでは味気ないHTML文書を、普段見慣れているWebサイトの姿に変えているのはこのCSSだ。コメント前回(HTMLの基本)と同様、CSSもまずはコメントから説明する。CSSでもコメントはブラウザの処理では無視される。書き方はHTMLとはちょっと違う。/*コメント*/CSSのコメントは/*で始まり*/で終わる。スラッシュ/が外側、アスタリスク*が内側だ。中には目立つようにこのようなコメントを書いている人がいるかもしれない。*/実際には一番外側のスラッシュ/、アスタリスク*しかブラウザは認識しない。これらはあくまで人間にとって見やすい装飾にすぎない。セレクタ、プロパティ、値CSSの基本書式CSSの基本中の基本である「セレクタ」「プロパティ」「値」を説明する。{ブロック宣言}「セレクタ」とはCSSのスタイルを当てる対象のこと。日本語文で言えば「何の」に当たる部分。セレクタで前回(HTMLの基本)触れたHTMLの「要素」を指定する。}は「ブロック宣言」といい、この中にスタイルを書く。スタイルは「プロパティ」と「値」の組み合わせが基本形。値;}「プロパティ」はスタイルの種類。日本語文の「何を」に当たる。プロパティの後ろにはコロン:をつける。「値」はスタイルの設定値。日本語文の「どうする」に当たる。値の後ろにはセミコロン;を付ける。「セレクタのプロパティを値にする」という意味になる。14px;}上記は「p要素の文字(font)サイズを14px(ピクセル)にする*3」という意味になる。「CSS関数」はプロパティにより詳細な設定ができる。)が付き、中に設定値を入れる。)関数の値で画像のパス(URL)を指定している。「p要素の背景を画像haikei.jpgにする」という意味になる。パスの書き方は前回(HTMLの基礎)の「パス(URL)」と共通する。複数プロパティ一つのセレクタに複数のプロパティを設定することができる。}の前後やセミコロン;で改行を入れると見やすくなる。blue;}「p要素のフォントサイズを14pxにし、フォントの太さをボールドにし、フォントの色を青*4にする」という意味になる。主なセレクタ全称セレクタアスタリスク*を書くとページ全体にスタイルが当たる。14px;}「ページ全体の文字サイズを14pxにする」という意味になる。基本セレクタ要素名を書くとHTMLページ内のその要素すべてにスタイルが当たる。10px;}「ページの全てのp要素に余白(margin)を10px付ける」という意味になる。idセレクタ頭にハッシュ#を付けるとidが指定できる。「ページ内リンク」と共通した書き方だ。red;}「id名に"iida"が付いている要素の文字色を赤にする」という意味になる。classセレクタ頭にドット.を付けるとclassが指定できる。blue;}「class名に"name"が付いているすべての要素の文字色を青にする」という意味になる。複数セレクタと子孫セレクタ複数セレクタ複数のセレクタを一度に指定することができる。カンマ,で繋げていく。10px;}「h1要素とp要素とimg要素の下に余白を10px付ける」という意味になる。子孫セレクタHTMLタグのネスト(入れ子)の階層でセレクタをより厳密に指定することができる。こちらは半角スペースを空ける。100px;}「.profileの中の.faceの中のimgの幅を100px、高さを100pxにする」という意味になる。.prifireから見たら.faceは子、imgは孫。複数の子孫セレクタセレクタが長くなるのでカンマ,ごとに改行すると見やすくなる。itemのimgの幅を100px、高さを100pxにする」という意味になる。優先順位の基本ルール第1回(Webの基礎知識)でも触れたように、CSSセレクタの処理には優先順位がある。基本は「汎用的なセレクタ」から「固有なセレクタ」に特定されるほど優先される。上記「主なセレクタ」の例で言えば「全称(全体)<基本(要素)<class<id」(*<p<.name<#iida)の順に優先される。同じプロパティの値が重複する場合は、より固有なセレクタが上書きされる。20px;}どちらのプロパティもfont-sizeを設定している。セレクタ#iidaの子要素の中で上のp要素より下の.nameの方がより固有な指定なので下の値が優先される。付けすぎ注意な!importantなお、値の後ろに!important(重要!)を加えると、優先順位ルールを超えてスタイルが優先させる。20px;}先ほどの例のp要素の方に!importantを追加したので、こちらが優先される。付けすぎると収拾がつかなくなるので注意!!importantはどうしてもスタイルを優先したいときの最終手段にしておこう。!important;}この例では両方に!importantが付いているため、結局元の設定に戻ってしまっている。ここまでがCSSの基本的な内容になる。一般的なWebサイトの見た目は充分変えることができるからだ。ここから先は応用的な内容になってくるが、CSSのコードでよく見受けられる書式について解説していこう。擬似クラス擬似クラスはセレクタに条件を設定し、合致するセレクタに擬似的なclassを加える効果がある。値;}セレクタの後ろにコロン:を付けて擬似クラスを記述する。liの擬似クラスは:first-child*6。一つ目のli要素にだけ文字色を赤、文字を太字にする。aの擬似クラスは:hover。セレクタに擬似的な要素を追加する効果がある。値;}擬似要素はダブルコロン::を付けて記述する。liだが別の擬似要素が付いている。一つ目の擬似要素は::before。"という文字列をli要素の前に追加して、赤字のスタイルを当てている。二つ目の擬似要素は::after。"という文字列をli要素の後ろに追加して、太字のスタイルを当てている。liの見た目は変わらない。属性セレクタ属性セレクタは要素の属性値でさらに厳密にセレクタを特定できるので優先度が高まる。]の中で属性名と属性値をイコール=で繋げる*8。「属性」とよく似た書式だ。200px;}「alt属性の値が"顔写真"になっているimg属性の幅と高さを200pxにする」@ルールまれに行頭にアットマーク@がついた記述を見ることもあるかもしれない。これは「@ルール」と言って特殊な設定をしたり、CSSファイル内に外部CSSファイルを読み込んだりする。100%;}}charaset:文字コードを設定している。import:は外部CSSファイルを読み込んでいる。secreen:600pxより画面が小さい時にスタイルを適用。レスポンシブ(スマホ向け)設定CSSサンプル最後に、前回(HTMLの基礎)の「HTMLサンプル」に以下のCSSを追加してみる。0;}プロパティの詳しい解説は省くが、セレクタを上から順に解説する。body:ページ全体にフォント、文字色、文字サイズを設定。