配置を調整する

売れるホームページの作り方 ⇒ 速攻HTML ⇒ 配置を調整する


速攻HTML

コンテンツの配置を調整して中央配置にし、境界に色を付けます

画像を組み込む ←|→ 背景に模様を付ける



全体の横位置を中央に揃え、境界を設定して境界に色をつけます。


今までで出来上がったページは全体に横長で左寄りになっています。また、全体が真っ白です。なので


  ・巾を設定する。600px にします。
  ・横位置を中央配置にします。
  ・境界と境界色を色をつけます。


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を言う名前の領域の中に納めてしまいます。
・この領域の境界を描き、領域内を中央表示します。
・領域の幅を600にして、領域内の背景は色にしておきます。



A 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は左から右、上から下へとコンテンツが段組みされます。
この為、レイアウト設定が大変難しくなります。


この解決方法として、コンテンツ同士を1纏めにして、1纏めにした単位で配置を変えたり、色を変えたりします。


1纏めにしたコンテンツをブロック要素と言います。


方法の1つが、1纏めにしたいコンテンツを<div></div>タグで囲む方法です。


このタグは大変便利で、大抵のサイトでは、何重にも入れ子で使っています。
このままだと、表示しても何も変化は起こりません。
通常はこのタグにプロパティを指定して配置や色を変えて行きます。


A IDセレクタ


スタイルシートのセレクタで先頭にの付いたものを、ID(アイディー)セレクタと呼びます。


このセレクタに属性として色や位置などを記述して、HTMLのタグからIDセレクタを呼び出して使用します。


IDセレクタを呼び出したタグだけに属性として設定した色や位置などが適用されます。


(例)
#midori { font-color: #00ff00 } : スタイルシート


htmlで<p id="midori" >この色は緑です。<p> とすれば この色は緑です。 と表示されます。


例題では、<div id="containertop">としてにidセレクタを適用させています。


B 境界


borderで境界の形式 幅 色を指定します。プロパティ値を半角ブランクで区切って複数指定できます。


・形式 solid:実線 dotted:点線 dashed:破線 double:二重線 等
・幅  ピクセルpx や センチメートルcm 等
・色  色名や色コードで指定します 赤なら#ff0000 等


 幅を0にすると指定形式や色を指定しても表示されません。



C 配置



text-alignで行揃えを行います


・text-align:left  左揃え
・text-align:center 中央揃え
・text-align:right  右揃え





サンプルを表示したイメージです。ほぼ完成です。
次ページで真っ白な背景に少し手を入れて完成させます。


  完成前画像