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

前回の【初めてのホームページ制作】#09マネして作ってみよう！(手順解説付き)は、コンテンツの左部分を作成しました。今回は、右部分を作成していきたいと思います。

コンテンツを作成しよう

右側コンテンツ部分も前回と同様に『div#content』ボックスに入れます。右側をニュースというコンテンツに位置付けて『div#news』ボックスを入れ子にします。それでは作っていきましょう。

手順001

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

■HTML
#infoの終了タグで改行し、2~7行を追加してください。

</div><!--<div id="info">の終了タグ-->
<div id="news">
<p>
カフェ ゆるらぎは、ゆったりとしたお時間を過ごしていただけるよう、まごころ込めて、皆様をお待ちしております。<br />
<img src="images/sample4.gif"width="100%" alt="カフェ ゆるらぎ" />
</p>
</div>

右側部分は、p要素に文字とimg要素が入ってるだけですね。

手順002

まだ横幅を指定してないのでコンテンツ幅の半分を指定し、floatを使って右側部分に滑り込ませましょう。

■CSS

/* ========NEWS CUSTOMIZE======== */
#news {
width:385px;
float:right;
}

あれっっ？？すっぽり入ってくれるかと思ったけど右にスライドしただけですね。あそこに入るとテトリスぐらいの爽快感があったんですが・・・（笑）
入らない原因は『div#info』ボックスにfloatを指定してないからなんですね。

手順002

３行目を追加してください。
■CSS

#info {
width:385px;
float:left;
}

すっぽり入りましたね。爽快ですね（笑）

手順003

『div#content』ボックスの中で２つの箱はfloatによる影響をモロに受けることになります。今回の例はfloatがイメージしやすいと思います。

例えば２つの箱を入れ替えたいとなると『div#info』に『float:right』を指定するだけで実現します。

『div#info』に『float:right』を指定

手順004

簡単に入れ替えることができました。

floatについて理解を深めたい方はTECH ACADEMYさんの記事が理解しやすいですので参考にどうぞ！

次は、ページトップに戻るリンクを作りたいところなんですが、これは難易度が一気に上がるので場所だけ確保して一番最後にしたいと思います。

div#newsの終了タグで改行し、以下のコードを記述しておいてくださいね。
■HTML

<div id="pageTop">
<p><a href="#top">ページのトップへ戻る</a></p>
</div>

cssも記述しておいてください。
■CSS

/* ========PAGETOP CUSTOMIZE======== */
#pageTop {
clear:both;
padding:10px 0;
text-align:right;
}
#pageTop a {
　padding:0 0 0 12px;
　　　background-image:none;
}

フッターを作成しよう

フッターとは、ページの一番下の部分のことです。OFFICEのwordにもヘッダーとかフッターとかありますよね。あれのことです。

フッターナビゲーションを作成しよう

基本的にホームページには、フッターナビゲーションがついていることがほとんどです。これも簡単に作っていけそうですね。

手順005

『divf#contents』の終了タグで改行し、以下のコードを追加してください。

■HTML

<div id="footMenu">
<ul>
<li><a href="index.html">ランチ</a></li>
<li><a href="index.html">デザート</a></li>
<li><a href="index.html">最新情報</a></li>
<li><a href="index.html">スタッフ紹介</a></li>
<li><a href="index.html">アクセス</a></li>
<li><a href="index.html">お問い合わせ</a></li>
<li><a href="index.html">プライバシーポリシー</a></li>
</ul>
</div>

■CSS

/* ========FOOTMENU CUSTOMIZE========= */
#footMenu ul {
position:relative;
left:50%;
float:left;
margin:0;
padding:0;
}
#footMenu li {
position:relative;
left:-50%;
margin:0 20px 0 0;
padding:0;
font-size:12px;
}
#footMenu li a{
background-image: none;
}

結構なCSSの量ですが説明しなくてもある程度わかってきていると思います。ので細かい説明は割愛しますね。

手順007

コピーライトを作成しよう

フッターの最後は、コピーライトの表示をしましょう。

コピーライトとは要するに『このホームページの著作権は、私のよ！！』という強いメッセージなのです。

div#footMenuの終了タグの後ろで改行し、追加してください。
■HTML

<div id="footer">
<div class="copyright">Copyright &copy; 2011 CAFE YURURAGI All Rights Reserved.</div>
</div>

■CSS

/* ========FOOTER CUSTOMIZE======== */
#footer {
text-align:center;
padding:20px 0;
}
.copyright {
font-size:15px;
letter-spacing: 1px;
}

letter-spacingで文字間隔を少し大きくします。

手順008

以上で、形としてはホームページは完成しました。次の第１０回はトップページへ戻るリンクボタンをページトップへ戻るように設定していきたいと思います。次で最後なので最後までみてくださいね～

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