何から始める?ホームページ制作の基本の「き」

文書構造を定義するHTML

HTMLとはHyperText Markup Languageの略で、ホームページの根幹を成すマークアップ言語です。ホームページ上で右クリックをしてソースを表示を選択すると、文字のほかに<div>のようなものが表示されていると思います。これはタグと呼ばれるもので、これらのタグを使ってホームページの文書構造を定義していきます。全てではありませんがタグには開始タグと終了タグがあります。たとえば、段落を表わす<p></p>のタグでは、<p>が開始タグで</p>が終了タグです。そして、<p>段落です</p>のようにタグの間に中身を入れていきます。タグには属性と呼ばれる付加情報を加えることもできます。<p id="text">段落です</p>の「id」が属性で、「"text"」がその値です。ちなみにこのid属性は、あるタグを一意に特定するためのものです。まずはこのタグと属性を覚えることが基本です。

見た目を装飾するCSS

CSSとはCascading Style Sheetsの略で、HTMLで定義した文書を装飾するための言語です。p {color: red}というふうな書き方になります。それぞれセレクタ(p)、プロパティ(color)、プロパティ値(red)と呼ばれます。この場合だと、pタグの文字の色を赤にするという意味になります。CSSには疑似クラスというものもあって、p:hover {color: red}の:hoverがそれにあたります。これはpタグがhoverされたときにだけ、つまりマウスがpタグの上に乗ったときにだけ文字を赤色に変化させるという意味です。ほかにもanimationプロパティなどを使えば、時間と共に色を徐々に変化させることもできます。そしてプロパティとその値の組み合わせを覚えれば、さまざまな装飾が可能になります。