CSSを使ってみよう

HTMLの基礎を覚えたら次に覚えるのは、必ずといって良いほどCSSです。

カスケーディング・スタイル・シート

CSS(カスケーティングスタイルシート Cascading Style Sheets)は、Webサイトの装飾を設定する言語です。 殆どのWebサイトがHTMLで作成されているのと同じようにほとんどのWebサイトがCSSによって装飾されています。

HTMLの基礎を知ったばかりで、いきなり他の言語が出てきて混乱しているかもしれませんが、心配いりません。
CSSもHTML同様に簡単なのです。

CSSの役割をケーキで例えるなら、HTMLが生地の部分で、その生地にどういう具材やコーティングをするのかを考えるのがCSSの役割といったところでしょうか。
言い換えれば、ほとんどの場合でHTMLとCSSはセットで使われる言語だと言うことです。
フォントの種類や、色、文字を書くスペースの幅や背景色、メニューなどのナビゲーションなどの形や場所、それらを自由自在に操るのがCSSです。

CSSの基本

それでは前回のソースを元にCSSを書き込んで見ましょう。

前回と、違う箇所は<head>内の<style>〜</style>の中身です。
簡単なCSSですが、何をやっているのか説明します。

body{ width:80%; padding:2rem; }
この行はbodyに対して幅と余白を設定しています。
幅がwidthで、余白がpaddingですね。
つまり、CSSの基本は

装飾したい要素 { 装飾したい種類 : その値 ; }

という記述ルールで構成されていることがわかります。
Webやプログラミングの世界では、この要素の事をセレクタと言い、分類をプロパティと言い、値はそのまま値と言います。

セレクタ { プロパティ : 値 ; } ←つまりこういう事

h1{ font-size:160%; border-bottom:solid 1px #ff0; }
これは、h1タグに装飾しています。 h1は見出しのタグです。
font-sizeは文字のサイズ、border-bottomは要素の下に線を設定するプロパティです。
値はそれぞれ、文字サイズが160%、下線は、1pxの黄色い実線を設定しています。

p{ color:#f0f; }
この行は、pタグに対して文字色(マゼンタ)のみ設定しています。

以上ですが、CSSの基本を説明しました。
保存したファイルを前回同様にブラウザで見てみましょう。
いかかでしょうか、あなたはHTMLをCSSで装飾することを覚えたはずです。
そしてそれが決して難しい事ではない事も理解したはずです。