超基礎からのホームページ作成 その４
今日はCSSについて。ところで、HTMLはある程度知っておいたほうがホームページの修正が楽になりますが、CSSはデザイン的な面を担う設計図なので、面倒だからこれは覚えないでおこう、という判断でも問題なしです。その判断なら、今日の記事はすっとばしてください。CSSはHTMLあってのものなので、先に部品であるHTMLを覚えてから、次にCSS、という流れでもいいと思います。
なんで最初にゴチャゴチャと前置きをしているかといいますと、つまり、CSSに関して現時点（４記事目）でわかりやすい説明をするのは、ちょっと難しいかなと思っているからです。今回は本当に基本的な部分のみに絞って、実践的なことはもう少し後に、機会があれば書いてみるつもりです。
設計図なCSSって、どんなものさ
前回の記事で、CSSは設計図と無理やりに例えました。ではどんな働きをするのかというと、主にホームページの見栄えやデザインを定義する設計図になります。
CSSの構造
CSSも、これまたHTMLと同様、カッコによって閉じられた部分がメインになります。HTMLと違うのは、カッコの外側にそのCSSが効果をもたらす範囲が記載されるという構造でしょうか。例えば、次のような構造になります。
ムニュッとしたカッコ（波括弧、って呼ぶんですかね）の前に、「a」という１文字があり、波括弧の中に「color:#007EBA;」という文字があります。基本的には、前回のHTMLと同様、カッコの中に意味があります。カッコの種類がHTMLで使われる不等号のカッコとは異なるので、その点は注意してください。
カッコの中の構造は、原則次のようになっている
さて、この設計図であるCSSのカッコの中ですが、原則として次のような構造になっています。
命令のcolorというのは、文字通り「この色で（文字を）表示しろ」という意味を持っていますから、全体としては「文字を#007EBAという色で表示させろ」という命令ということになります。「そのカラーの、シャープと数字とローマ字の羅列はなんじゃ」と思われる方もいらっしゃるかもしれませんが、ここではひとまず飛ばします。
命令の後には「:」（コロン）、その内容の後には「；」（セミコロン）という決まりになっていますので、これをつけ忘れたりしないように注意してください。コロンやセミコロンが付いていないだけで、そのCSSの内容は大抵無視されてしまいます。
カッコの外側はカッコの中身が及ぼす部分・範囲の指定
では最初のaは何かというと、カッコの中の命令を、どの範囲に及ぼすかということを表わす部分になります。
先頭のaというのは、HTMLの部品で紹介したa hrefのaと同じです。ということは、つまりリンクの部分を表わしているということになります（全部のCSSが、このようにHTMLの表現と共通になっているわけではありません）。「HTMLで作られたホームページの中で、リンクの部分は#007EBAという色で表示させてね」そういう意味をもった設計図です。設計図というより、こういう細かな部分のCSSは、図の中で書いたように「規格」といったほうがしっくりくるかもしれませんね。
デザインはCSSが担うワケ
ところで、どうしてホームページの作りがHTMLとCSSというふたつの要素に分かれているのかというと、これは大雑把に言ってしまえば、文章をどう表現させるかという点から発展したHTMLに、無理やりデザインまで担わせるとワケが分からなくなるから、です。
何年も前、ホームページを作るといえば、HTMLだけで完成させる方法が主流でした。でもHTMLというのは、前述のように文章をどのように見せるかという点から発達したものなので、ホームページのデザインをどうするかということは苦手でした。
それでも、ホームページをより綺麗に、整頓して表示させたいという思いは多くの方が抱いていましたから、無理やりHTMLを使ってそれを達成していたわけです。そうすると、本来はそんな使い方に利用することは想定していなかった、というような、ものすごく複雑で技巧的な部品と部品の組み立てを行なう場面が増えてきます。
その結果、そのHTMLを作った人以外が見たとき、それが何を表わしているのかほとんど判断できなくなったり、またブラウザによってはその構造の意味を判断できず、表示がバラバラに崩れてしまったりと、弊害が多くなってしまいました。
まあそんなこんなで、HTMLは文章の構造などについてに絞ろうよ、デザインやレイアウトはCSSという設計図・規格表を作って、そっちに書こうよ、と分けることになったと。そんな具合です。今日はこのへんで。
