前回の【初めてのホームページ制作】#09マネして作ってみよう!(手順解説付き)は、コンテンツの左部分を作成しました。今回は、右部分を作成していきたいと思います。
コンテンツを作成しよう
右側コンテンツ部分も前回と同様に『div#content』ボックスに入れます。右側をニュースというコンテンツに位置付けて『div#news』ボックスを入れ子にします。それでは作っていきましょう。
右側のボックスを完成させよう
■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要素が入ってるだけですね。
まだ横幅を指定してないのでコンテンツ幅の半分を指定し、floatを使って右側部分に滑り込ませましょう。
■CSS
/* ========NEWS CUSTOMIZE======== */ #news { width:385px; float:right; }
あれっっ??すっぽり入ってくれるかと思ったけど右にスライドしただけですね。あそこに入るとテトリスぐらいの爽快感があったんですが・・・(笑)
入らない原因は『div#info』ボックスにfloatを指定してないからなんですね。
3行目を追加してください。
■CSS
#info { width:385px; float:left; }
すっぽり入りましたね。爽快ですね(笑)
『div#content』ボックスの中で2つの箱はfloatによる影響をモロに受けることになります。今回の例はfloatがイメージしやすいと思います。
例えば2つの箱を入れ替えたいとなると『div#info』に『float:right』を指定するだけで実現します。
『div#info』に『float:right』を指定
簡単に入れ替えることができました。
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にもヘッダーとかフッターとかありますよね。あれのことです。
フッターナビゲーションを作成しよう
基本的にホームページには、フッターナビゲーションがついていることがほとんどです。これも簡単に作っていけそうですね。
『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の量ですが説明しなくてもある程度わかってきていると思います。ので細かい説明は割愛しますね。
コピーライトを作成しよう
フッターの最後は、コピーライトの表示をしましょう。
著作権(ちょさくけん)はコピーライト(en:copyright)とも呼ばれ、言語、音楽、絵画、建築、図形、映画、写真、コンピュータプログラムなどの表現形式によって自らの思想・感情を創作的に表現した著作物を排他的に支配する財産的な権利である。著作権は特許権や商標権にならぶ知的財産権の一つとして位置づけられている。
コピーライトとは要するに『このホームページの著作権は、私のよ!!』という強いメッセージなのです。
div#footMenuの終了タグの後ろで改行し、追加してください。
■HTML
<div id="footer"> <div class="copyright">Copyright © 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で文字間隔を少し大きくします。
プロパティ | 説明 |
---|---|
letter-spacing | letter-spacingプロパティは、文字の間隔をpxで指定します。文字の間隔にはマイナスの値を指定することもできます。 |
以上で、形としてはホームページは完成しました。次の第10回はトップページへ戻るリンクボタンをページトップへ戻るように設定していきたいと思います。次で最後なので最後までみてくださいね~
コメントを残す