スキップしてメイン コンテンツに移動

些細な日常

CSSはどう使えば良いのか｜タグ自体とidとclassの指定先とstyleタグとインラインstyleの記述法

サイト作成でコンテンツのマークアップを行ったHTMLにデザインを付けるのがCSS（Cascading Style Sheets／カスケーディングスタイルシート）だ。記述がHTMLのようにタグで囲むだけではないからちょっと難しい。

僕は基礎を覚えるのに十年くらいかかった。デザインはテンプレートに任せておいて構わないと見向きもしなかったせいだけど、しかしCSSはレベル3から色んな表現が可能だと気付いてから新しく学び出した。サイト作成が創作活動としてさらに面白くなる。

今再び初心へ帰りながらCSSは実際にどう使えば良いのかを入門として簡単に纏めておきたい。

デザインの設置について

CSSはHTMLのマークアップにデザインを付けるからどこで何を変えるかを指定しなくてはならない。

CSSの三つの指定先

  • タグ自体：<div>など
  • idのタグ：<div id="post">など
  • classのタグ：<div class="check">など

タグ自体にCSSをかけるとページで使われる該当の要素のデザインが全て変わる。

idのタグとclassのタグはHTMLの規定ではなくて作成者が任意で割り当てる。何れもCSSの効果は同じだけれどもページで使える回数が違う。すなわち割り当ての種類についてidは一つのページで一回しか使えなくてclassは一つのページで何回でも使えるんだ。HTMLのマークアップからいうとidのタグは種類毎に一回ずつ、classのタグはどんな種類でも幾らでも割り当てるように働くので、前者は他とは混ざらずに、後者は広範囲に使えるのが特徴になっている。

idとclassの任意の割り当ての文字はそれぞれとそしてHTMLのバージョンでも個々に異なっている（id名/class名に使用できる文字の種類）けれども共通点から何れの場合でも半角の英字で始めて英数字や半角のハイフンや(-)や半角のアンダーバー(_)を使うかぎりは問題はないと思う。

ただしidだけは半角の英字の大文字と小文字（Aとaなど）が別々に判定されるから注意しておきたい。サイト作成でHTMLとCSSの両方に記載するわけなので、id名に割り当てられた文字列が完全に一致しない場合にデザインが反映しなくなってしまう。

CSSの二つの記述法

  • styleタグのCSS：styleタグで記述
  • インラインstyleのCSS：style要素で記述

styleタグのCSSはHTMLのhead内に<style></style>で囲ってdiv {color:#ff0000;}のように記述するけど、ただしstyleタグはHTMLのバージョンが5未満では<style type="text/CSS"></style>のマークアップになる。

body内にstyleタグを記載するのはHTML5.2から正式に採用された。HTML4以前は基本的に構文違反だけれどもブラウザが対応してサイトに反映するらしくて全く使えないわけではないんだ。

インラインstyleはbody内のタグ自体にstyle要素を追加して<div style="color:#ff0000;">のように記述する。

ブラウザのレンダリングを踏まえるとCSSを読み込まないかぎり、サイトを表示できないからstyleタグのCSSをHTMLの冒頭のhead内に置くのが最速で、一般的に多く行われていると思う。

CSSは外部ファイルとしてサイトに取り込むことも可能で、CSSの拡張子（.CSS）を持ったCSSファイルをstyleタグのCSSで記述してサーバーにアップロードしておいてさらにページのHTMLのhead内にリンクタグを使って<link href="style.css" rel="stylesheet">のように記述すると反映する。

繰り返すとHTML5未満のバージョンでは「type="text/css"」も追加しなくてはならない。

CSSの内容の記述について

  • 指定先（セレクター）
  • 要素（プロパティー）
  • 値（バリュー）

styleタグでデザインする例

CSS

div {color:#ff0000;}
#post {border:2px blue dotted;text-shadow:1px 1px 2px #696969, -0.5px -0.5px, 1px #f5f5f5;}
.check {background:rgba(255,255,0,0.2);font-size:x-large;}

HTML

<div>div要素は文字色が赤になる</div>

<div id="post">postのidは青の点線の枠が付いて影文字になる</div>

<div class="check">checkのclassは透過の黄の背景で文字が大きくなる</div>
div要素は文字色が赤になる
postのidは青の点線の枠が付いて影文字になる
checkのclassは透過の黄の背景で文字が大きくなる

styleタグのCSSは最初に指定先を示す。タグ自体ならばタグ名、idならば半角のシャープ（#）を付けたid名、classならば半角のピリオド（.）を付けたclass名だ。次いで要素と値を半角のコロン（:）で区切る。

デザインは要素と値で決まる。要素はいつも一つだけれども値は種類によって複数の場合もあって個々の規定から半角のスペース（ ）や半角のコンマ（,）や半角の丸括弧（()）で分けたりする。値自体が複数の場合は半角のセミコロン（;）で区切って何種類も続けられる。最後の一つは付けても付けなくても構わない。

指定先とデザインの半角スペースはあってもなくても構わないし、styleタグの中身も同じで、ソースコードは隙間を取らず、逆に改行したとしても反映する。

ブラウザの読み込みはデータが少ないほどに速いから全てくっ付けるとサイトは軽くなる。しかしソースコードに隙間や改行があると見易くてサイト作成の作業は捗るかも知れない。

インラインstyleでデザインする例

HTMLとCSS

<div style="color:#ff0000;">div要素は文字色が赤になる</div>

<div id="post" style="border:2px blue dotted;text-shadow:1px 1px 2px #696969, -0.5px -0.5px 1px #f5f5f5;">postのidは青の点線の枠が付いて影文字になる</div>

<div class="check" style="background:rgba(255,255,0,0.2);font-size:x-large;">checkのclassは透過の黄の背景で文字が大きくなる</div>
div要素は文字色が赤になる
postのidは青の点線の枠が付いて影文字になる
checkのclassは透過の黄の背景で文字が大きくなる

HTMLのマークアップにstyle要素を組み込む。指定先のタグに半角のスペースで区切って「style」を置く。半角のイコール(=)に続いて半角の二重引用符（""）で囲ったら内容はstyleタグのCSSと同様の仕方で、要素と値を記載するのが大前提だ。

CSSの要素によっては他にも条件文を記載しなくては行けないので、使えない場合が出て来る。例えば画面幅の振り分けの@mediaやアニメーションの@keyframesのようなデザインは要素と値だけではサイトに反映しない。つまりインラインstyleはstyleタグと全く同じ性能を持つわけではないんだ。

styleタグならではのデザイン

CSS

div {text-align:center;animation:test 2s alternate infinite;} @keyframes test {0% {transform:rotatex(0);} 100% {transform:rotatex(360deg);}

HTML

<div>インラインstyleだけではanimationは使えない</div>
インラインstyleだけではanimationは使えない

styleタグとインラインstyleは一般的に前者が多く使われていると思うけれども後者は気付いて直ぐにHTMLのマークアップと合わせてCSSを編集できるのが利点だ。しかしデザインを一括して編集したり、サイトで外部ファイルから他のページに等しく適用したり、概して便利なのはstyleタグで、ブラウザの読み込みもheade内に置かれるだけではなくてCSSがバラ付かずに揃っているのが速やかだからインラインstyleよりも中心的な方法といって良い。

styleタグの複数の指定先

記述についてはインラインstyleはHTMLのマークアップに組み込むからデザインを全て個別に指定するけれどもstyleタグはタグ自体やidやclassを幾つか絞り込んで細かく、または幾つか組み合わせて共通に指定する場合がある。

複数の指定先を細かく絞り込む

CSS

div#post.check span {background:linear-gradient(transparent 60%, #90ee90 60%);}

HTML

<div id="post" class="check">div要素のpostのidのcheckのclassの<span>span要素</span>に薄緑の下線が入る。</div>
div要素のpostのidのcheckのclassのspan要素に薄緑の下線が入る

タグ名にidとclassはくっ付けて構わないけど、ただし後から追加したタグ名はくっ付けずに半角のスペースで区切る。

複数の指定先を広く組み合わせる

CSS

div, span {background:linear-gradient(to right, #ffa500, #c0c0c0 100%);}

HTML

<div>div要素と<span>span要素</span>に橙と銀のグラデーション</div>
div要素とspan要素に橙と銀のグラデーション

CSSの複数の指定先に共通のデザインを付けるには半角のコンマで区切って記載する。

サイト作成でデザインを付ける、またはホームページやブログのテンプレートをカスタマイズするためにCSSはどう使えば良いかは三つの指定先と二つの記述法が基礎なので、覚えてしまうと後はCSS 入門やCSS3リファレンスなどから要素と値を学べば色んな表現を取れるように上達するだろう。

コメント