TOP ≫bodyタグについて

ボディ部分 <body>〜</body>

ボディ部分は、まさにホームページの本体部分です。
つまり、ブラウザーでファイルを開いた時に<body>〜</body>間で記述された内容が、そのまま、あなたのホームページの内容として表示されます。

といっても、ホームページの内容をそのまま入力してもブラウザーでは認識してくれません。じゃあ、どうすればいいの? 
そうです、HTML言語やスタイルシートなどでホームページの内容を記述してあげないといけないんです。


下では、基本的なホームページレイアウトについて説明しています。あくまで、基本的な例ですので、これにこだわる必要はありません。
あなたのホームページを見に来てくれる人達の事を考えて、見やすいホームページになるようにレイアウトを考えてみましょう。

基本的なホームページの例

まず、基本的なホームページを例に挙げてみましょう。
まずは、サンプルを見て下さい。

上のサンプルは私が適当に作った基本的なレイアウトのページですが、このサンプルのHTMLソースは下のようになっています。


【記述例】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="○○.css" />
</head>

<body>
<div id="contener">

<div id="header">
<h1>基本的なホームページレイアウト</h1>
</div>

<div id="menu">
<table width="100%" border="0" cellspacing="0">
<tr>
<th><a href="#">TOPページ</a></th>
<th><a href="#">会社概要</a></th>
<th><a href="#">お問合せ</a></th>
<th><a href="#">商品紹介</a></th>
<th><p>&nbsp;</p></th>
<th><p>&nbsp;</p></th>
</tr>
</table>
</div>

<div id="main">

<div class="subject1">
<h2 class="midashi1">
基本的なレイアウト</h2>
<p>まず、基本的なレイアウトについて・・・・左右両方にサイドメニューを付ける3ライン方式というものを作ることができます。</p>
</div>

<div class="subject1">
<h2 class="midashi1">
基本はここからです</h2>
<p>ホームページ作りってすごく複雑で・・・・『とことん本格的にやってやろう』と思わない限り複雑なことはありません。</p>
</div>

<div class="subject1">
<h2 class="midashi1">
まずは、自分でやってみよう!!</h2>
<p>
ホームページ作りについて覚えたいのなら、まずは自分でホームページを一つ作ってみることです。・・・・ホームページ作りが楽しくなってくるはずです!<br />
さあ、あなたも『とりあえずホームページ作成』をおこなってみませんか?<br />
</p>
</div>

</div>

<div id="footer">

<p>copy right&copy; <a href="../index.html">How-To-Homepage</a></p>

</div>

</div>

</body>
</html>


少し見づらいかもしれませんが、これがサンプルのHTMLソースです。赤色が『bodyタグ』、紫色で表示しているのが『htmlタグ』です。
(一部省略している部分があるので、全部見たい人はサンプルページで『右クリック→ソースを表示』としてみてください。)


いきなりこんなものを見せられても、ちんぷんかんぷんだと思います。

パッと見、アルファベットとか変な記号だとかがいっぱい並んでいて「HTMLって難しそうだなぁ・・」と思うかもしれませんが、ひとつひとつのタグを理解していれば、結構単純な構造になっています。

とにかく、自分で作ってみよう!!

ホームページの作り方について勉強するには、まず自分で作ってみるのが一番の近道です。 とにかく、ホームページを作ってみましょう。

題材が思い浮かばないなら、とりあえず他のホームページや書店に並んでいる本などを見ながら真似をして作ってみるのもいいと思います。
そうやって、一つのホームページを最後まで作っていくと、作り終わったときにはホームページの作り方について、かなり感覚がつかめていると思います。
『習うより、慣れろ!!』
これを頭に置いて勉強すれば、必ず素晴らしいホームページを作ることができると思います。


HTMLタグやCSS(スタイルシート)にはとてもたくさんの種類があって、これを全部覚えるのはすごく大変です、というかムリです。私は絶対にムリです!!でも、別にムリして全部覚える必要はないんです。多分一生使わないだろうな、っていうようなタグも結構あります。とりあえずは必要になった時に検索エンジンや書籍などで調べればいいんです。ちなみに、”HTMLタグ”については、色々なHTMLタグ・スタイルシートについては『色々なCSS』で紹介しているので、そちらもぜひ参考にしてください!

壁にぶち当ったら、『検索エンジン』で調べよう!!

検索エンジンっていうのはすごく優秀で、知りたいことは、おおよそ何でも検索することができます。実際、このホームページに来てくれた方の中にも検索エンジンから来た方が多いと思います。これは、HTMLタグに限ったことではないですが、なにか分からないことがあったら検索エンジンで調べてみる、ということを癖づけておくことはすごく大切だと思います。壁にぶち当たった時なんかも意外と簡単に解決できたりするもんですよ(^0^) 

前ページに戻る 次ページへ進む 次ページへ進む
特集

HP作成ソフト徹底比較

ホームページビルダー・ドリームウィ―バー徹底比較

HP作成ソフトの代名詞であるホームページビルダーと、プロご用達の本格派、ドリームウィ―バーについて徹底比較してみました。

inserted by FC2 system