MB-Support

パソコン初心者のサポートページ

文章の見出しと段落 <h1> <p>

 ホームページの親要素と子要素の構成例。 見出しを指定する <h1> 〜 <h1> 、段落をを指定する <p> 〜 </p> の説明です。



ホームページの決まり事 で、以下の基本構造まで完成しましたね。

HTMLソース(メモ帳)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>題名</title>
</head>
<body>
    マイ・ホームページ
</body>
</html>

このページでは、HTML の構造を考えてみましょう。 <body> 〜 </body> の間に入力した文章が、実際のブラウザ上に表示される部分でしたね。 文章画像に関するタグ を使って ホームページを作る上で、構成を考える必要があります。

HTMLソース(メモ帳)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>マイ・ホームページ</title>
</head>
<body>
 <h1>マイ・ホームページ</h1>
 <h2>トップページ</h2>
 <p>
各OSのインストール方法と、再インストールする前後の作業、
<b>FDISK</b>による領域作成/削除方法など、 
基本的な内容を掲載しています。
</p>
 <h2>ワトソンのパソコン教室</h2>
 <p>
Windows の起動と終了/マウスの使い方など、パソコンの基本的な操作方法から、
Windows アップデート/ハードディスクの断片化を修復するなど
メンテナンス情報を掲載しています。 
これから Windows パソコンを始める方向けです。
</p>
</body>
</html>

ブラウザ



上のソースを簡略化したのが、以下です。

<body>
  <h1>見出し1 タイトル マイ・ホームページ</h1>
 <h2>見出し2 トップページ </h2>
 <p>段落 文章 </p>
    <b>強調 FDISK</b>
 <h2>見出し3 ワトソンのパソコン教室</h2>
 <p>段落 文章</p>
</body>

文章の見出しとなる部分は、<h*>〜<h*> で囲みます 。ホームページを人間が読めば、そのページの見出しや、重要な部分が判断できますが、ブラウザには文章/画像/命令(タグ)でしかありません。これをブラウザに分かってもらうために <h*> を使用します。 <h*> の * 部分は 1 〜 6 まで設定可能で、数字が少ない方が、重要と判断されます。 視覚的には、強調の <b> タグとフォントサイズ が変更され、上下に空白が入ります。

HTMLソース(メモ帳)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>マイ・ホームページ</title>
</head>
<body>
<h1>マイ・ホームページ</h1>
<h2>マイ・ホームページ</h2>
<h3>マイ・ホームページ</h3>
<h4>マイ・ホームページ</h4>
<h5>マイ・ホームページ</h5>
<h6>マイ・ホームページ</h6>
</body>
</html>

ブラウザ



上の「マイ・ホームページ」は、このページのタイトルなので、一番重要とされる <h1>〜</h1> で囲みます。 フォントサイズが大きくなり、太字になりましたね。 次に、「トップページ」と「ワトソンのパソコン教室」の二つは、同じ重要度ですが、タイトルより重要度は下です。 そこで <h2>〜<h2> で囲みました。太字になりますが、<h1>〜<h1> よりもフォントサイズが小さくなります。 次に「トップページ」と「ワトソンのパソコン教室」の内容を説明する文章ですが、この部分はパラグラフ <p>〜</p> で囲みます。 <p>〜</p> で囲まれた部分は、1段落と解釈され、上下に空白が入ります。

これらの事をふまえて、最初に作成したホームページ(下)を見てみましょう。

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2.<html>
3. <head>
4.  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5.  <title>題名</title>
6. </head>
7. <body>
8.   マイ・ホームページ
9. </body>
10.</html>

変な所ありますか? ブラウザで表示するためには全く問題の無いソースですが、親要素と子要素で考えると変な所がありますね。 上から順番に見ていきましょう。1 行目は ホームページのバージョンを宣言 してるので要素ではありません。2 行目の <html> の子要素は、<head>と<body> になります。3 行目の <head> の親要素は <html> で、子要素は <meta> と <title> になります。 4 行目の <meta> の親要素は <head> です。 5 行目の <title> の親要素も <head> です。6 行目は <head> の終了を表す </head> 。 7 行目の <body> の親要素は <html> です。 8 行目の「マイ・ホームページ」は・・・・・何でしょう 。 <body> の子要素が「マイ・ホームページ」ではありません。「マイ・ホームページ」は単なる文章ですから。 そこで <body> 内に子要素を作る必要があります。

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2.<html>
3. <head>
4.  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5.  <title>題名</title>
6. </head>
7. <body>
8.   <p>マイ・ホームページ</p>
9. </body>
10.</html>

文章を <p>〜</p> で囲みました。これで <body> の子要素 <p> が存在する事になります。「マイ・ホームページ」という文章が重要であるならば、<h1>〜</h1> で囲んでもいいでしょう。

ホームページを作る上で、基本となる構造ですが、タグを 1 つも知らない時点で、この説明を読むのは厳しいです。 そこで、MB-Support では、基本的なタグを先に掲載してから、構造を知る流れになっています。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項