超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

見出しの書き方

見出しを指定するタグは、 <h*> </h*> を使います。

*には、1から6までの数字が入ります。
<h1>見出し1</h1> のように書きます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

それぞれ見出しの大きさは次のようになります。

見本の文字の大きさを見る

実際に見出しを書いて見ましょう

先ほど作ったファイルを開いてください。

<例題1で保存したファイル>
<html>
<head>
<title>タイトル</title>
</head>

本文

<body>

</body>
</html>

まず、<title> と </title>、<body> と </body> の「本文」の文字を 「MY HOMEPAGE」 に書き換えます。
すると、以下のようになります。
(MY HOMEPAGE の部分は何でもかまいません。好きな題名をつけてください。)

ソース内の半角スペース及びタブ、改行は無視されますので、適当に改行をして見やすくしてください。

<例題2>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

MY HOMEPAGE

</body>
</html>

では、ブラウザで確かめて見ましょう。

ファイルを上書き保存して、閉じてからファイルをダブルクリックしてみてください。下の図のようになりましたか?

上記のように表示出来たら、「MY HOMEPAGE」の部分をh1タグで囲んで見ましょう。

フラウザは閉じずにそのまま、ブラウザのメニューバーの表示から「ソース」を選択してソースを表示してください。

すると、メモ帳でソースが開きます。

では次に、「MY HOMEPAGE」を <h1> </h1>タグではさんでください。

<例題3>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<h1>MY HOMEPAGE</h1>

</body>
</html>

上記のように書き込んで上書き保存をしたら、ブラウザの更新ボタンを押します。

すると、情報が更新されて以下のように表示されます。

どうですか?
うまく表示できましたか?


表示位置を変えてみましょう

では次に、見出しを真中に移動させましょう。(センタリングと言います)

センタリングするためには、  <center> </center> ではさむと、タグではさまれた部分がすべてセンタリングされます。

では、先ほどの <h1>MY HOMEPAGAE</h1>を<center> </center>ではさんでみましょう。

<例題4>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<center>
<h1>MY HOMEPAGE</h1>
</center>

</body>
</html>

そして、ファイルを上書き保存したあとブラウザの更新ボタンを押すと、 以下のように題名がセンタリングされました。


段落・改行をする

画像をタイトルの下に表示させるために段落を入れます。
段落を入れるには、
 <p> 
と書くと一段下がって、段落を入れることができます。

HTMLの場合、段落に終了タグがなくても表示には問題ありません。
終了タグを入力する場合は<p> と </p>ではさみます。

段落ではなく、改行をする場合には
 <br> 
と書くと改行をすることができます。 改行タグには終了タグはありません。


画像を表示させてみよう

では、画像を貼り付けてみましょう。

画像を表示させるには、次のように書くと画像を表示させることができます。

 <img src="ファイル名"> 
ファイル名には拡張子まで書きます。( .jpg や .gif などです)

見本画像の写真のファイル名は「cake.jpg」なので、ソースには

 <img src="cake.jpg"> 
と書きます。

もしも、画像のファイルを別のフォルダにおいている場合は、

 <img src="フォルダ名/cake.jpg"> 
となります。

では、先ほどのソースにタイトルで改行をして、画像を追加してみましょう。

<例題5>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>

<body>

<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
</center>

</body>
</html>

ファイルを保存してブラウザを更新してください。
下のように表示できましたか?

▲このページのトップに戻るTop


Tips

タグは「入れ子」にならないように気をつけましょう!

<入れ子の状態>
<font size="4"><b>文字</font></b>

<正しい記述>
<font size="4"><b>文字</b></font>

どうです。わかりましたか?