文章の見出しを書いてみよう

新聞を想像してみてください。例えば偉い政治家が悪いことをして捕まったとします。 いきなり本文から入るでしょうか。まずでっかく「○○議員逮捕」などと 文章のタイトルが書かれていますよね。これが見出しです。見出しがあれば一体どんなことが書いてあるのか わかりやすいですよね。

html文書でも見出しを書くための要素があるので、わかりやすいサイトにするためにも是非使いましょう。

また新聞を思い出してください。一つの記事に見出しは一つだけでしょうか。大きいニュースなら 、まず一番大きな見出しがあって、小さな見出しがいくつかあるはずです。

先ほどの例ですと、「○○議員逮捕」という大きな見出しの下に、「合計一億円のワイロ」やら 「疑われる××氏との関係」など、それより小さい見出しがいくつかあって、さらにその下に本文が書かれていますよね。

肝心の見出しの要素ですが、一番大きな見出しがh1、次がh2、その次がh3と続いていって、 一番小さい見出しがh6です。合計6段階の見出しがあります。 一番大きい見出しの開始タグは<h1>、終了タグは</h1>です。他のレベルの見出しも同じように<h2></h2>、<h3></h3>…となります。

実際に書いてみよう

で保存したindex.htmlの空のbody要素に、h1要素で「htmlの練習」と書いてみて下さい。 前回からの続きを含めると、文書全体は下のようになります。 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="description" content="">
<meta name="keywords" content="html,てーこく">
</head>
<body>
<h1>htmlのお勉強</h1>
</body>
</html>

ちなみにhtmlではEnterキーでどれだけ改行しても本文中では改行されません。

例えば、


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta name="description" content="">
<meta name="keywords" content="html,てーこく">
</head>

<body>
<h1>htmlのお勉強</h1>


</body>

と書いても、実際にブラウザに表示させてみると改行されていません。

表示例

一度保存してブラウザで確認したら分かると思いますが、そのままこの要素を使うとほとんどのブラウザでは上の画像のように、例えばh1ではでかでかとした文字になり、しかもその上下に 広い空白が空いて表示されてしまいます。これではなんとも格好悪く、使い物になりません。 これを解決するにはCSS(スタイルシート)というものを使う必要がありますが、ここでは 構わずそのままに書いてください。

h要素の例

さらに注意点。見出しは数字の小さい順。つまり見出し自体が大きい順から使っていくべきです。 最初に突然h3を書いたりするべきではないということです。また、一番大きなh1の見出しは、普通一つの文書につき 最初に一度しか使いません。

それでは次はいよいよ本文を書いていきましょう。

へてむるクリエイターの場合

右クリック、「タグの挿入」の「見出し」から、1から6までの見出しを挿入することができます。 タグパレットなら、「カスタム」の左から二番目か、「文書構造」の一番左にある「H」というアイコン です。

HOME