4−2 基本は「見出し」と「本文」でコンテンツを作成する
ホームページというのは、デザインのような見えているものだけが重要というわけではありません。
ただ、文章を埋めていけばよいというわけでなく、タイトルを書く場所が<title>〜</title>だったように、それぞれのXHTML(HTML)タグの意味や使い方を学び、使い分ける必要があるのです。
といっても、膨大にあるXHTML/HTML タグの意味や使い方をすべて覚える必要はありません。ホムつく講座では、最も使用頻度が高く、すぐに役立つものを説明していますので安心してくださいね。
それでは、メインコンテンツ作成時に最も基本となる「見出し」と「本文」について説明したいと思います。
見出しには、<h1>〜<h6>
hタグは見出しを意味し、Webページ上にホームページタイトル、ページタイトル、文章をまとめて内容を示す小見出しなどの重要な項目をWebページに記載するときに使われるタグです。
また、hタグは1〜6まであり、1が最も大きな見出しを意味し、数が大きくなるにつれ、重要度が下がるので、小さな見出しに使います。
作成中のwebページでは、この部分にhタグが使われています。
本文には<p>
<h>は見出しに使われるタグですが、文章を書くときには<p>を使います。
<p>の「p」は「paragraph」(段落)を意味しています。見出しには当たらない文章は基本的に<p>を使いますが、本文でなければ、<p>は使わず、そのままテキストを記載してください。

改行
文章を改行するときは改行したい箇所にbrタグ書き加えます。HTMLとXHTMLでは、少し記述方法が違うので注意してください。
ホームページソース
「a-box」の<h1>の下の「ホームページの説明文」と「d-box」の「copyright (c) oooo.com All right reserved. 」は、<p>を使わずにそのまま記載します。
「c-box」は、そのままにしておいてください。
<head>
<title>タイトル</title>
</head>
<body>
<div id="site-box">
<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト テキスト テキスト テキスト テキスト テキスト
</div>
<h2>h2 ページタイトル</h2>
<p>テキスト (省略)</p>
<h3>h3 見出し</h3>
<p>テキスト (省略)</p>
<h3>h3 見出し</h3>
<p>テキスト (省略)</p>
</div>
</div>
copyright (c) oooo.com All right reserved.
</div>
</div>
</body>
</html>
width : 750px;
border: 1px solid #FF9900;
}
border-bottom: 1px solid #FF9900;
background-image: url('img/header.gif');
}
float: left;
width: 500px;
}
float: right;
width: 250px;
}
clear: both;
width: 750px;
background-color: #FFFF99;
}
(「まぐまぐ」にて殿堂入りしました)
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか?
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。
こんなヤツ!
ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ
必要なものは?
ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。
ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。
良くしたい
ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。
ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。