超初心者でも簡単!あなたもできる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で保存したファイル>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>タイトル</title>
</head>
<body>

本文

</body>
</html>

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

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

<例題2>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
</head>

<body>

MY HOMEPAGE

</body>
</html>

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

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

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

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

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

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

<例題3>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>
</head>

<body>

<h1>MY HOMEPAGE</h1>

</body>
</html>

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

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

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


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

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

センタリングするためには、センタリングさせるスタイルシートを<head> 〜 </head>の間に記述し、  <div class="クラス名"> </div> ではさむと、タグではさまれた部分がすべてセンタリングされます。

では、先ほどの <h1>MY HOMEPAGAE</h1>をセンタリングしてみましょう。

<例題4>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>

<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>
</div>

</body>
</html>

HTMLと同じファイルに書く場合は、 <style type="text/css"> 〜 </style> の間にスタイルシートを記述します。

そして、必ずスタイルシートに対応していないブラウザのために <!-- -->でコメントアウトしておきましょう。
(コメントアウトされた部分はブラウザには表示されなくなります。)

body {
color: #000000;
background-color: #FFFFFF;
}
この部分はbody全体のスタイルを指定しています。
この場合は color で文字の色を黒、 background-color で背景色を白に指定してます。
.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
次のこの部分がセンタリングの指定です。
クラスセレクタ名に「.center」を使いました。
クラスセレクタ名は、適当にわかりやすい名前をつけてもいいです。
但し、最初の一文字には数字を使わないように気をつけましょう。

文字をセンタリングするには text-align:center を使います。
最後の ; はここで区切りますよと言う意味です。複数の項目を続けて指定する場合は忘れずに書きましょう。

次の padding-top:10px;  padding-bottom:10px; でセンタリングする文字の上下の部分に10pxの余白を作っています。
この余白を作ることがHTMLタグだけではできませんでしたよね。

<div class="center">
<h1>MY HOMEPAGE</h1>
</div>
そして「MY HOMEPAGE」の文字には、ひとかたまりの範囲として定義するブロック要素 <div> </div> を使って全体をひとつのかたまりとしてまとめています。
この <div> </div> にセンタリングするクラスセレクタを適用して、  <div class="center"> </div> ではさむと ひとかたまりに定義された部分全体がセンタリングされます。

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


段落・改行をする

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

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

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

画像を表示させてみよう

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

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

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

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

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

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

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

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

<例題5>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>MY HOMEPAGE</title>

<style type="text/css">
<!--
body {
color: #000000;
background-color: #FFFFFF;
}

.center {
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
-->
</style>
</head>

<body>

<div class="center">
<h1>MY HOMEPAGE</h1>

<p>
<img src="cake.jpg">
</div>

</body>
</html>

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

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


Tips スタイルシートを記述するときの注意!

スタイルシートを連続して指定する場合、指定した部分の区切りで必ず「;」をつけましょう。
「;」を付け忘れるとWebが真っ白で表示されなくなります。
もし、Webが真っ白で表示されなくなったら「;」を付け忘れていないか確かめてくださいね。