この文字をクリックするとサンプルダウンロード出来ます。
画像を組み込む ← ｜ → 背景に模様を付ける
全体の横位置を中央に揃え、境界を設定して境界に色をつけます。
今までで出来上がったページは全体に横長で左寄りになっています。また、全体が真っ白です。なので
・巾を設定する。６００px にします。
・横位置を中央配置にします。
・境界と境界色を色をつけます。
htmlソースに新たにタグを追加し、そのタグからスタイルシートのスタイルを引用します。
● 巾設定、中央寄せ、色付き境界設定
① スタイルシートに以下を追加します。
| #containertop |
|
セレクタの先頭に＃を付けます。 |
| {border: solid 2px #bbffaa; |
|
境界の巾と色を指定 |
| padding: 20px; |
|
コンテンツと境界の余白を設定 |
| background-color: #ffffff; |
|
この領域の背景を白 |
| width: 600px; |
|
この領域の巾を600pxとする |
| margin-left: auto; |
|
|
| margin-right: auto; |
|
|
| text-align:center;} |
|
この領域内を中央寄せに設定 |
htmlソース側で、コンテンツ全体をcontainertopを言う名前の領域の中に納めてしまいます。
・この領域の境界を描き、領域内を中央表示します。
・領域の幅を６００にして、領域内の背景は色にしておきます。
② 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=utf-8" />
<title>>野辺山高原の四季おりおりをお伝えします</title>
</head>
<body>
<div id="containertop"> ← 行を追加
<h1><img src="title.gif" alt="野辺山高原の四季"/></h1>
<p>野辺山高原の四季をお伝えする観光案内です。</p>
<ul>
<li><a fref="index.html">トップ</a></li>
<li><a fref="about.html">牛乳の工房について</a></li>
<li><a fref="event.html">イベントの案内</a></li>
<li><a href="mailto:yatugatake@web.mail">メール</a></li>
<li><a href="http://blog.xxx.xxx/">ブログ</a></li>
</ul>
<p><img src="top.gif" alt="八ヶ岳" /></p>
<p>野辺山高原社は、八ヶ岳の自然を生かしたイベントや季節の商品をお届けしている会社です。高原にある「牛乳の工房」では、乳製品を楽しんだり、八ヶ岳の自然を楽しむこと出来ます。野辺山にお越しの際は、ぜひお立ち寄りください。
</p>
</div> ← 行を追加
</body>
</html>
● 各項目の説明。
① ブロック要素
htmlは左から右、上から下へとコンテンツが段組みされます。
この為、レイアウト設定が大変難しくなります。
この解決方法として、コンテンツ同士を１纏めにして、１纏めにした単位で配置を変えたり、色を変えたりします。
１纏めにしたコンテンツをブロック要素と言います。
方法の１つが、１纏めにしたいコンテンツを＜div＞＜/div＞タグで囲む方法です。
このタグは大変便利で、大抵のサイトでは、何重にも入れ子で使っています。
このままだと、表示しても何も変化は起こりません。
通常はこのタグにプロパティを指定して配置や色を変えて行きます。
② IDセレクタ
スタイルシートのセレクタで先頭に＃の付いたものを、ID（アイディー）セレクタと呼びます。
このセレクタに属性として色や位置などを記述して、HTMLのタグからIDセレクタを呼び出して使用します。
IDセレクタを呼び出したタグだけに属性として設定した色や位置などが適用されます。
（例）
＃midori { font-color: #00ff00 } ： スタイルシート
htmlで＜p id="midori" ＞この色は緑です。＜p＞ とすれば この色は緑です。 と表示されます。
例題では、＜div id="containertop"＞としてにidセレクタを適用させています。
③ 境界
borderで境界の形式 幅 色を指定します。プロパティ値を半角ブランクで区切って複数指定できます。
・形式 solid：実線 dotted：点線 dashed：破線 double：二重線 等
・幅 ピクセルpx や センチメートルcm 等
・色 色名や色コードで指定します 赤なら#ff0000 等
幅を０にすると指定形式や色を指定しても表示されません。
④ 配置
text-alignで行揃えを行います
・text-align：left 左揃え
・text-align：center 中央揃え
・text-align：right 右揃え
サンプルを表示したイメージです。ほぼ完成です。
次ページで真っ白な背景に少し手を入れて完成させます。
