【初めてのホームページ制作】#08 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ08

第8回目に突入しましたね。ここまでで半分くらいは仕上がってきているかと思います。それでは、コンテンツ部分を作っていきましょう。

コンテンツを作成しよう

コンテンツ部分は、『div#content』ボックスに入れます。左部分と右部分に分かれていますのでまずは左側を更新情報というコンテンツに位置付けて『div#info』ボックスを入れ子にします。左部分を作成しましょう。

手順001

手順001

div#menuの終了タグの後ろで改行し、下記のHTMLコードを追加してください。
■HTML

<div id="contents">
<div id="info">
<h2>INFORMATION</h2>
<dl>
<dt><span>2010-01-05</span></dt>
<dd>
<div>14:00~16:00の間、ケーキセットをご注文いただいた方は、10%OFFのキャンペーンを行っています。1月30日までです。<a href="#">詳細はこちらから。</a>
</div>
</dd>
<dt><span>2010-01-04</span></dt>
<dd>
<div>新年明けましておめでとうございます。今年もカフェ ゆるらぎを宜しくおねがいいたします。<br />
</div>
</dd>
<dt><span>2009-12-18</span></dt>
<dd>
<div>誠に勝手ながら12月28日~1月3日まで年末年始の休業日とさせていただきます。年始のオープンは1月4日10:00からです。
</div>
</dd>
<dt><span>2009-12-12</span></dt>
<dd>
<div>新メニュー登場です!「さっぱりお酢の鶏丼」です。本日から18日まで、ご注文された方はサラダバーが無料です。
</div>
</dd>
<dt><span>2009-12-08</span></dt>
<dd>
<div>12月7日に帽子の忘れ物がございました。心当たりのある方は、XXX-XXX-XXXまでご連絡ください。
</div>
</dd>
</dl>
</div>
</div>
手順002

手順002

『INFORMATION』の見出しがメニュー横に配置されてしまいました。これも『div#contents』に横幅を指定してないので起こる現象ですので、幅を指定してあげましょう。

■CSS

  /* INFORMATION CUSTOMIZE */
#contents{
width: 780px;
}
手順003

手順003

上記のHTMLコードで新たに出たdl,dt,dd要素について表にしました。

■dl dt dd

要素名 説明
dl dl要素はDefinition Listの略称で、開始dlと終了dlの間は定義されたリストであることを表します。
dt dl要素はDefinition Termの略称で、定義語を意味します。
dd dd要素はDefinition Descriptionの略称で、定義語の説明を意味します。

そんなに使う機会はないタグだと思うので今は気にしなくてもいいかと思います(今、『じゃあ使うなよ!』って聞こえました。怖い)

ホームページ全体をウィンドウの真ん中に配置する

今までホームページ全体がウィンドウの左側に配置されていましたが、このあたりでウィンドウの真ん中に配置しましょう。『今更かよ!』って思わないでくださいね(笑)

開始のbodyタグで改行し、div#topを追加し、終了のbodyタグの前にdivを追加してください。省略部分のコードは、長くなるのであえて省略しました。

■HTML

<body>
<div id="top"><!-- #top -->
<div id="header">
/* 省略 */
</div><!-- /#top -->
</body>
ちなみに『/*』と『*/』の間には、コメントを記述することができます。『<!--』と『-->』も同様にコメントを記述できます。コメントはホームページ上には、表示されません。

CSSに#topを追加してください。
■CSS

#top {
width: 780px;
margin: auto;
}

動画で確認してみましょう。


『margin:auto』を指定することでウィンドウサイズを変化させても、自動で両サイドのmarginを計算し、真ん中に配置してくれています。

左側のボックスを完成させよう

後から右のボックスもつくるので、右側のスペースを空けておきましょう。左側の更新情報覧の幅を指定します。

■CSS

/* ========INFO CUSTOMIZE======== */
#info {
width:385px;
}

『div#contents』幅の大体半分くらいを取りました。

手順004

手順004

次に『INFORMATION』の見出しと更新情報を見やすいスタイルにしていきたいと思います。

■CSS

#info h2 {
background-color:#98534B;
font-size:16px;
color:#fff;
padding:2px 5px 0px 5px;
border-bottom:3px solid #823C34;

『INFORMATION』(h2要素)のスタイル

  • 背景色を変える
  • 文字サイズを小さくする
  • 文字を白くする
  • 文字位置を左下で少し内側余白を指定する
  • 枠線を指定する

■CSS

#info dl dt {
float: left;
padding: 10px;
font-size: 13px;
}

『日付』(dt要素)のスタイル

  • 説明(dd要素)を右に回り込ませる
  • 日付の位置を変更する
  • 文字サイズを小さくする

一旦ここで表示してみます。

手順005

手順005

見出しスタイルの調整と日付(dt要素)の右側に説明(dd要素)が回り込みました。

floatについては、第4回でも少し触れました。
floatについて理解を深めたい方はTECH ACADEMYさんの記事が理解しやすいですので参考にどうぞ!

次は説明(dd要素)を調整します。

■CSS

#info dl dd {
font-size: 13px;
padding: 10px 0.5em 10px 8em;
margin-left: 0;
background-image: url(images/bg_info_line.gif);
background-repeat: repeat-x;
}

説明(dd要素)のスタイル

  • 文字サイズを小さくする
  • 内側余白の上下を10px,右を0.5em,左を8emでdd要素の位置を調整
  • 外側の左余白が40pxあったので、それを0pxにする
  • 背景画像を指定、区切り線の画像を入れる
  • 背景画像の繰り返し表示を無くす

これで左側の更新情報『div#info』ボックスは完成になります。

手順006

手順006

CSSの記述を走りまくってしまいましたが、1つ1つのスタイルがどんな風な動きをしているか、確認しながらやってみるとCSSをより理解しやすくなります。皆さんがある程度馴れてきたかと思い、1つ1つのCSSに対して画像を表示して確認するといった煩わしさもあったと思うので(勝手に解釈しました(笑))このように最後に確認するという形を取りました。

基本的には、CSS追加→ファイルの更新→ブラウザで表示確認といった繰り返しの流れになりますのでこの動作に馴れておくといいと思います。これで第8回は終わります!

【初めてのホームページ制作】#09 マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ08

自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA