60おじぃの タグ打ち ホームページ作成講座 / HTMLとスタイルシートで きれいにレイアウト

HTMLとは？

HTMLとは、見出しや段落をコンピュータに読みこませ、ホームページとして表示させるための言語です。

HTMLの用語について -------- ＜見出し＞

HTMLの用語は英単語や、略語ですから、---＜段落＞
意味を知れば理解しやすくなります。

上の例では、1行目が見出し。2〜3行目が段落です。
見出しや段落をコンピュータが判断できるように、記号をつけます。
見出しを<h2> 段落を<p> にします。hはヘディング、pはパラグラフです。
始めと終わりがわかるように記入すると、以下のようになります。

<h2>HTMLの用語について</h2>

<p>HTMLの用語は英単語や、略語ですから、
意味を知れば理解しやすくなります。</p>

これで、りっぱにHTML文書ができました。もちろん、上の例は簡単な構造ですが、このようにタグという記号でしるしを付けると、コンピュータが文書を読み取ることができるようになります。（しるし付けすることをマークアップといいます。HTMLとは、マークアップする言語というような意味です。）

スタイルシート（CSS）とは何？

CSSはカスケーディング・スタイルシートの略で、HTML文書をレイアウトする指定ができます。普通、シーエスエスまたはスタイルシートと呼んでいます。カスケードとは装飾するというような意味でしょう。

スタイルシート（CSS）はHTML文書をレイアウトする

スタイルシート（CSS）はどのように記述するのでしょうか。例をあげて説明します。

<h2>HTMLの用語について</h2>
<p>HTMLの用語は英単語や、略語ですから、
意味を知れば理解しやすくなります。</p>

上の例文に、スタイルシートで、見出しの下に青い線を入れる指定をしてみます。

h2 { border-bottom: solid 1px blue; }

h2の見出しの下に青い線を入れる指定です。
borderボーダーは境界線のことですが、ボーダーを指定すると線を入れることができます。

上の例はborder-bottom ボーダーボトム＝下の線、solid ソリッド＝実線、太さは1px＝1ピクセル、色はblue＝青という指定です。

上の例をブラウザで表示させました。見出しの下に青い線が入っています。
このように、HTML文書をスタイルシートで指定すると、こまかい点までレイアウトすることができます。