よく使用する基本のHTMLタグ
Web制作でよく使用する基本のHTMLタグとは何があるのでしょうか？HTMLの構成に従って紹介したいと思います。
絶対に記述する必要があるタグ
「ここからここまでがHTMLです」という記述がHTMLでサイトを構築するには必要です。これがなければHTMLとして認識されませんので、注意して下さい。
| ・<html>〜</html> |
|---|
| HTMLは、例えれば作文のようなもの。そして、その文章を書くには原稿用紙が必要です。このタグはまさにその原稿用紙そのものを用意する行為のようなもの。ここからここまでにHTMLという文字をかきますよ、という宣言のためのタグです。 |
| ・<head>〜</head> |
|---|
| 文字通り、HTMLの頭の部分。「このタグはこのようなことを書いています。」という、表題を示す部分と言えます。 |
| ・<body>〜</body> |
|---|
| HTMLのからだの部分、本体。サイトを閲覧するときに、私達は文章やデザイン、画像などを見ることができますが、それらはすべてこのタグの間に記述されているタグを読んでのこと。ここにさまざまなタグを埋め込みサイトをデザイン・制作していきます。 |
| ・<link rel=”stylesheet” type=”text/css” href=”ファイル” /> |
|---|
| 外部のCSSをこのHTMLで読み込みますというタグ。ファイルと記述した所に.cssのファイルを書きます。CSSについては後ほど説明します。 |
また、上記の他にも、イメージを反映させる<img>タグ、文章を改行する<br />などもあります。
CSSについての記述
CSSは、先ほどのHTMLに色やレイアウトを指示する文章のこと。このCSSもHTMLと同様の方法で作成できます。
| ・P{color:色} |
|---|
| 段落の文字の色を変えたい場合は、この記述です。 |
| ・{background-color:色;} |
|---|
| 背景色を指定します。 |
| ・a{color:色;} |
|---|
| 未読のリンクの色を指定。 |
| ・a:visited{color:色;} |
|---|
| 既読のリンクの色を指定。 |
| ・a:hover{color:色;} |
|---|
| オンマウスの色を指定。 |
| ・a:active{color:色;} |
|---|
| アクティブ時の色を指定。 |
などの記述をすることで、HTML内のデザインを変更・指定することができます。
また、CSSは、例えばサイト全体を中央に配置すること（センタリング）やフォントサイズの統一、さらに、複数ページで構成されたサイトであれば、背景色や文字色やリンクの色を、CSSで指定してやれば、一気にすべてのページに反映されると言った便利なこともできるのです。
