HTML（ Hyper Text Markup Language ）は、WWWページを記述するために作られた言語で、文章（地の文）、箇条書き、画像の貼り付け、表やリンクなどWebページで見かける文書の構造を記述します。文書の体裁（見栄）はスタイルシートで整えます。
HTMLは「見え方ではなく意味を指定する」という考え方で構成されています。例えば、見出しは通常大きい文字で表示されますが、HTMLでは、「ここからここまでが大きい文字で表示」ではなく、「ここからここまでが見出し」という形で指定します。なお、実際の見え方は見る環境によって異なります。
HTML5で作成した cssを用いたコーディング例 もどうぞ
目 次
1 HTMLの基本構造
2 HTMLの基本的な文書の書き方
3 スタイルシートでHTML文書の見栄を整える
4 スタイルシートでできること
HTMLは、次のように記述します
<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
・・・ ヘッダー部分 ・・・
</head>
<body>
・・・ 本 体 部 分 ・・・
・・・・・・・・
</body>
</html>
最初の行は DOCTYPE宣言と呼ばれ、これに続く HTMLの記述が 4.01という規格に従っていることを示します。
２行目からが HTMLによる記述で、 < と > で囲まれたタグで書式を指定します。
タグは開始タグ（例：<html>）と終了タグ（例：</html>）があり、一対の開始タグと終了タグにはさまれた範囲を要素（例：HTML要素）と呼びます。
要素の中に別の要素を含むこともできます。上の例では、html要素の中に、head要素と body要素が含まれています。
htmlタグ内の lang="ja" は 使用する言語が日本語であること示します
head要素の内側を ヘッダー と呼び、Webページがどのようなページであるかを表す情報を記述します。（ブラウザの窓には表示されません）
body要素の内側を 本体 といい、ここにページの内容（ブラウザの窓に現れるもの）を記述します。
HTML を使って最低限の文書を書く方法を説明します。見栄えを整えることはスタイルシートの項で説明します。
ブラウザのタイトルバーに表示される文字列のことです。
head 要素内に title タグを使って記述します．たとえば
<title>HTML ガイド</title>
と書いておくと，ブラウザのタイトルバーに「HTML ガイド」と表示されます．
段落は p 要素を使います。
p 要素は「地の文」ですから、その中には見出しや引用など、文章のまとまった構造を表す要素(ブロックレベル要素)を書いてはいけません
HTMLでは以下に示す3種類のリストが用意されています。
<ul>
<li>・・・項目１・・・</li>
<li>・・・項目２・・・</li>
・・・・・
<ul>
<ol>
<li>・・・項目１・・・</li>
<li>・・・項目２・・・</li>
・・・・・
<ol>
<dl>
<dt> 用語１ </dt><dd>・・・説明１・・・</dd>
<dt> 用語２ </dt><dd>・・・説明２・・・</dd>
・・・・・
<dl>
表（table）要素で全体をあらわします。tr（table row）要素で表の１行を、td（table data） または th（table header）要素 で升目の一つをあらわします。
<table>
<tr><td> 1行,1升目 </td><td> 1行,2升目 </td>・・・</tr>
<tr><td> 2行,1升目 </td><td> 2行,2升目 </td>・・・</tr>
・・・・・
</table>
imgタグを用いて、他の場所にある画像をこの場所に表示させます。次のように記述します。
<img src="ファイル名" alt="説明">
多くのタグは属性（attribute）を指定して、その表示の仕方を調整できるようになっています。
img タグの場合、src属性 で表示する画像を指定し、alt属性には画像の説明を記述します。文字だけしか表示できないブラウザでは、画像の位置に説明が表示されます。
画像に続いて文字（文）を表示させるときは、align属性で表示位置を指定します。
align="left" を指定すれば画像を左端（rightで右端）に寄せ、周りをテキストが回り込みます。
回り込みを解除するにはbrタグの clear属性を用いて <br clear="all"> とします。
<a href="ファイル名">・・リンクテキスト・・</a>
リンクは他のファイルを参照する機能で、ページの中のある部分（通常は文字の色が変わっており、下線がついている 上の例では ・・リンクテキスト・・ の部分）をクリックすることによって別のページに切り替えることができます。上記のほか、よく使われる要素に、次のようなものがあります。
| 横線 | hr （horizontal rule） | 終了タグ無し |
| 改行 | br （forced line break） | 終了タグ無し |
| 引用 | blockquote | 短い場合は <q> |
| 奥付 | address | 著作者、連絡先、作成日時などを書く |
【注】HTMLのタグで、ある程度の見栄を調節できますが、細かな調整のできるスタイルシートを使用して見栄を整えます。
<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<title>簡単なスタイルシートの例</title>
</head>
<body>
<p>
簡単なスタイルシートの例<br>
<span style="font-size: 1.5em;">文字の大きさ＝1.5倍</span><br>
<span style="color: blue;">文字の色＝青</span><br>
<span style="font-size: 0.7em; color: red;">文字の大きさ＝0.7倍で、文字の色＝赤</span><br>
</body>
</html>
実行結果 ↓
簡単なスタイルシートの例
文字の大きさ＝1.5倍
文字の色＝青
文字の大きさ＝0.7倍で、文字の色＝赤
head部の <meta http-equiv="content-style-type" content="text/css"> で、
スタイルシートを使用する事を宣言します。
body部を見て下さい。
文字の大きさ＝1.5倍 の部分が spanタグ でくくってあります。
span の開始タグ内に style="font-size: 1.5em;" と書いてあります。文字の大きさ（size）を 1.5倍に設定しています。
次の行で style="color: blue;" は文字の色を青に設定しています
3行目、style="font-size: 0.9em; color: red;" は文字の大きさと色を設定しています。複数の設定を指定できます。
<span> 自身は意味を持たないタグです。<span>〜〜</span> で囲まれた部分にスタイルシートを適用するのに用います。
最初の 簡単なスタイルシートの例 はスタイルシートによる指定がありません。文字の大きさは普通、文字の色は黒で表示されています。
次に示す 3通りの方法があります。同じスタイルの指定をすれば、どの指定方法を使っても見ばえが変化することはありません。ウェブサイト全体に共通するデザインは一つの外部ファイルに保存するなど、汎用性に応じて使い分けをすると良いでしょう。
スタイルシートをタグの属性として書く方法です。例えば次のようにします。
<p style="color: red;">スタイルシートをタグの属性として書く</p>
表示例 ↓
スタイルシートをタグの属性として書く
基本的にほとんど全ての要素に対してこの方法で指定することができます。
head 要素内に style 要素を書く方法です。下の例では、h1タグの文字の色を赤に設定しています。
<head>
<style>
<!--
h1{ color:red }
-->
</style>
</head>
<!-- と --> で囲ったのは、CSS に対応していないブラウザがこの部分を読まないようにするためです。
body部で h1タグを使って記述します。
<body>
<h1>CSSスタイルシートの使い方</h1>
</body>
表示例 ↓
h1タグ は最高レベルの見出しですから大きな文字で表示されます
CSS を記述したファイルを HTML 文書の入ったファイルとは別に作成する方法です。この場合、HTML文書の head要素内で、link 要素を用いて外部ファイルの場所を指定します。
例えば HTML 文書と同じディレクトリに style.css を作り、その中で CSS を記述した場合は下記のようにします。
rel属性は、style.css に CSS が記述されることをブラウザに通知します。href の部分は、絶対パスでも相対パスでも構いません。
head部に記述
<link rel="stylesheet" href="style.css">
つぎに、style.css を使って test.html を記述する例を示します。
style.css ファイル
h1{ color:blue; }
p{ font-weight: bold; }
test.html ファイル
<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="style.css">
<title>外部ファイルに記述したCSS</title>
</head>
<body>
<h1>h1レベルのタイトル</h1>
<p>太字で本文を書く</p>
</body>
</html>
表示例 ↓
太字で本文を書く
複数の方法を使ってスタイルを指定すると，スタイルの指定が衝突することがありえます。その場合は
1. style 属性
2. head 要素内
3. 外部ファイル
の順に優先されます。
HTML用のスタイルシートとしてW3Cが推奨しているのが カスケーディング・スタイル・シート（CSS） です。さまざまな調整ができますが、よく使われるプロパティ（property 属性）を示します。プロパティごとにスタイルを調整できます。
| 機 能 | プロパティ | 値／説明 |
|---|---|---|
| フォント | ||
| フォントファミリー（字体） | font-family | "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic"など |
| 文字のサイズ（大きさ） | font-size | 数値*1（ em、%、px ）｜small｜medium｜large |
| 文字の太さ | font-weight | normal｜bold |
| 文字飾り | text-decoration | none｜underline｜overline｜line-through （ 通常｜下線｜上線｜取り消し ） |
| 斜体文字 | font-style | normal｜italic |
| 行幅 | line-height | 数値*1（ em、%、px ） |
| テキスト | ||
| 単語間隔 | word-spacing | 数値*1（ em、px ） |
| 文字間隔 | letter-spacing | 数値*1（ em、px ） |
| 垂直位置（上付き、下付き） | vertical-align | super｜sub |
| 水平位置そろえ（左、中央、右） | text-align | left｜center｜right |
| 色と背景効果 | ||
| 前景色（文字色） | color （text-colorでない） |
色*2 |
| 背景色 | background-color | 色*2 |
| 背景画像 | background-image | url( 画像ファイル名 ) （ 背景画像の繰り返し、スクロール、位置などの指定ができる ） |
| 枠線 table以外にもほとんどのタグに枠を付ける事ができる。上下左右個別に指定も可 |
||
| 枠（ボックス）の大きさ | 横幅 ： width 高さ ： height |
auto（初期値）｜数値*1 |
| 枠線の種類 | border-style | solid｜double｜dotted｜dashed （ 実線｜二重線｜点線｜破線 ） |
| 枠線の太さ | border-width | thin｜medium｜thick｜数値*1 （ 細い線｜中間の太さ（初期値）｜太い線｜数値（任意の太さを指定できる）） |
| 枠線の外側余白 | margin | auto｜数値*1 （ 自動｜余白の幅を指定 ） |
| 枠線の内側余白 | padding | 数値*1 |
|
||
| 配置の指定 | float | left｜right｜none（初期値） |
| ボックスの幅 | width | 数値*1（ em、px ）｜auto（初期値） |
| 配置の解除 | clear | left｜right｜both |
|
||
| overflow | visible | 領域をはみ出して表示する（初期値） |
| hiddon | はみ出た部分を表示しない | |
| scroll | スクロールして表示（常に縦横のスクロールバーが表示される） | |
| auto | 内容があふれた場合のみスクロールバーが表示される | |
| 表（テーブル） | ||
| ◇表全体の指定 | ||
| 表の大きさ（幅／高さ） | width／height | 数値*1px、em、% 初期値：auto |
| 境界線の太さ、色、スタイル | border | 「枠線」の項を参照 |
| 境界線の表示方法 | border-collapse | collapse｜separate （ 重ねる｜間隔を開ける） 多くのブラウザは separate が初期値 |
| 境界線の間隔 | border-spacing | 数値*1px |
| ◇セル（ td、th ）の指定 | ||
| セルの大きさ（幅／高さ） | width／height | 数値*1px、em、% 初期値：auto |
| セル内の文字の位置 | 水平方向： text-align 垂直方向： vertical-align |
水平方向： left、center、right、justify （ 左寄せ=初期値｜中央揃え｜両端揃え ） 垂直方向： baseline｜top｜middle｜bottom （ 1行目のベースラインにそろえる｜上揃え｜中央揃え=初期値｜下揃え ） |
| ◇セルの結合 | ||
| 水平方向 | colspan | 整数 初期値：1 |
| 垂直方向 | rowspan | 整数 初期値：1 |