トップページ>>ホームページ>>その１

このページはどう出来ているのだろう？

さて。皆さんにはHTMLのタグの意味とCSSの使い方を学んで頂きましたが、それだけではどのように配置して行けば良いのかわからないのでは無いでしょうか？
色々なやり方があるのでしょうが、私の知るうちでの知識を皆さんにお教えしたいと思います。
　題材にこのページ「HTML for Mac」を使い解説して行きたいと思います。
ページの上へ

ヘッドタグ

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
　まず初めにこの記述があります。
これはテキストでhtmlを書いて、文字コードはutf-8ですよ。ってことを行ってます。
ブラウザに文字コードを教えるのに必要な記述です。
これが無いと文字化けしてしまう事もあるので、必ず記述しましょう。
文字コードは色々ありますが、utf-8で良いと思います。
<meta http-equiv="Content-Style-Type" content="text/css">
スタイルシートを使いますよ。と言う宣言です。
<meta http-equiv="Content-Script-Type" content="text/javascript">
　JavaScriptを使いますよ。と言う宣言です。
まぁこのページでは使っていないのですがね・・・。
<meta name="keywords" content="初心者,HTML,タグ,たぐ,スタイルシート,CSS,stylesheet,mac,マック,マッキントッシュ">
　このサイトのキーワードを書いています。
検索エンジンに見つけてもらいやすいように記述しますが、googleでは関係無いと公式声明が出された様です。
やらないよりはやっておいた方が良いかも知れないので、一応やってます。
<meta name="description" content="初心者MacユーザーのためのHTMLの書き方を一緒に勉強して行けたらと思います。">
　これは検索エンジンに表示される時に、サイトの説明として表示される文字です。
<meta name="robots" content="all">
　検索エンジンのロボットに全部持ってってね。って言ってます。
検索エンジンでは、ロボットが自動的にサイトに訪れ検索エンジンのデータベースに登録して行きます。
それをトップページだけにしてもらいたいなどの指定をしています。ただ、あまり意味は無い様です。
<link rel="stylesheet" type="text/css" href="css/style.css">
　これはスタイルシートのリンクですね。
こちらで説明しています。
CSSフォルダにまとめてあるので、パスがcss/style.cssになっています。
パスについては→こちら
<link rel="shortcut icon" href="img/favicon.ico">
　これはファビコンの指定をしています。
ファビコンとは、フェイバリットアイコンの略みたいです。
ブックマーク（お気に入り登録）をした時に、そのページの横につくアイコンの事です。
それを作成するサイト→こちらがありまして、それを着けている次第です。
<title>HTML for Mac　-TOP-</title>
　ページのタイトルを記述しています。
こちらのページにて説明していますね。

　これで<head>タグの中身は終わりです。
簡単ですよね？次は<body>タグの中身について説明して行きます。
ページの上へ

ボディタグその１

<div id="wrapper">
　いきなりdivタグが出て来ました。
divタグってなんだっけ？と言う方はこちらをご覧下さい→こちら
bodyタグの中身をまず一つのブロック要素としてまとめています。
これだけでは何の意味も無いのですがCSSでこの様に指定しています。
#wrapper{
width:1000px;
margin:0px auto;
}
　どのような意味なのか皆さんはもうお解りですね？
widthでは横幅を指定します。ここでは1000pxですね。
marginは他のオブジェクトとの距離を指定するプロパティでしたね。
bodyと言うオブジェクトからの距離を指定しています。
　autoはオートです。
２つの値を指定した場合は、上下・左右と指定されるのを皆さん覚えていますでしょうか？
ここでは左右をautoに指定しました。
どのような効果があるかと言いますと、ウインドウを狭めたり広げるとそのオブジェクトが必ず中心に来るのです。
もちろん上の距離は0pxなので、横方向の中心と言う意味です。

<div id="header">
またもdivタグが出て来ました。
divタグはレイアウトを組むのにとても便利なので多用します。
ページ一番上のロゴとメニューをくくっています。
<h1><a href="index.html" class="bd_none" id="top" name="top"><img src="img/logo.gif" id="logo" alt="HTML for Mac" name="logo"></a></h1>
　色々なタグが入れ子になっていますね。
初めに<h1>タグがあります。これでロゴを見出しにしています。
そして、ロゴの画像にリンクを付けるために<a>タグを入れ子にしています。
classはbd_none（ボーダーノーン）です。
idはtop。nameもtopです。
idとnameはリンクをここに飛ばす為に付けています。後々ご説明いたします。
そして<img>タグです。
画像フォルダのimgに入っているので、パスは"img/logo.gif"このようになっています。
代替テキスト（alt）はサイトの名前です。
　もしも何かの不具合で画像が表示されない場合は、この代替テキストが表示されるのですが、<h1>タグで囲んでいるのでただの代替テキストが見出しになるようにしています。
#logo{
width:400px;
height:160px;
border:none;
float:left;
}
#header h1{
display:inline;
}
CSSでの指定はこのようになっています。
#header h1のような記述で、header内のh1と言う指定をする事が出来ます。
<table>
<tr>
<th>事前準備</th>
<td><a href="jyunbi.html#html">HTML概要</a></td>
<td><a href="jyunbi.html#editer">エディタ</a></td>
<td><a href="jyunbi.html#bulauza">ブラウザ</a></td>
<td><a href="html/kakikata.html#dtd">文書宣言</a></td>
<td><a href="html/kakikata.html#bunpo">文法</a></td>
<td><a href="html/kakikata.html#jissyu">実習</a></td>
</tr>
</table>
　右側のメニュー表を書きました。
<table>です。忘れてしまった方は→こちら
<th>と言うのは見出しセルと言うものです。元々太字になっていて真ん中寄せになっています。
CSSでの指定はこちら↓
#header table{
border-collapse:collapse;
}
#header td{
width:200px;
border:solid 1px #ccc;
text-align:center;
}
#header th{
width:200px;
color:#f6c;
font-size:120%;
border:solid 1px #ccc;
}
#header a:link{
color:#33f;
}
#header a:visited{
color:#f33;
}
#header a:hover{
color:#f6c;
background:#eee;
}
#header a:active{
color:#66c;
background:#eee;
}
border-collapse:collapse;は枠線を連結して表示するプロパティです。
これが無いとセル同士が離れてしまうのでなんとなく格好悪い感じがしたのでこの指定をしました。
　colorの指定で、#cccと指定してあります。
十六進数では#ccccccと指定すると説明しましたが、三桁でも指定出来ます。
細かい設定は出来なくなりますが、そこまで細かい設定をする必要が無いと思われるのでしたら、三桁の指定でも何も問題無いと思います。
リンクにも装飾が施されています。リンク装飾については→こちら
</div>
ここで<div id="header">が終わります。
<div id="pankuzu"><a href="index.html">トップページ</a></div>
　パンくずリストを作っています。
ページの奥深くに入り込むと迷子になってしまう事があります。
そんな時に役に立つのがこのパンくずリストです。
ヘンゼルとグレーテルは迷子になってしまいましたが、ここにはパンくずを食べる小鳥がいないので大丈夫ですよ。
ページごとに追加して行けば良いだけなので、そんなに難しい事では無いです。
どのカテゴリーにこのページが属しているのかを簡単に解る事ができる優れものです。
#pankuzu{
float:left;
width:800px;
padding-left:1em;
}
#pankuzu a:link{
color:#136;
letter-spacing:0.5em;
}
#pankuzu a:hover{
background:#0fc;
color:#000;
letter-spacing:0.5em;
font-weight:bold;
}
#pankuzu a:visited{
color:#336;
letter-spacing:0.5em;
}
　説明していないプロパティはletter-spacing:0.5em;だけでしょう？
文字と文字の間隔を指定するプロパティです。
1emで一文字なので0.5文字ですね。つまり半角分です。
半角分文字の間隔を空けていると言う事です。

　これでページ上部が出来上がりました。
次のページでは本文に入ろうと思います。

<<前へ 次へ>> ページの上へ