初心者向け
ホームページの
作り方講座

トップページを完成させる

やっとラストです。最後にトップページ完成させましょう。

index.htmlをTeraPadで開きます

会社概要ページの時と同様、<div id="contents">から</div>までの間に内容を入れていきます。

まずはご挨拶を入力するボックスを作る

今までやってきた時と同じように<section>~~</section>というタグを入力します。

↓手打ちに自信がない人は以下のタグをコピペ。

「ごあいさつ」の見出しと本文を入れる

次に「ごあいさつ」の見出しと本文を入れます。

↓手打ちに自信がない人は以下のタグをコピペ。

続いて「更新情報・お知らせ」の欄を作ります。

今入力したごあいさつの下にホームページのお知らせ欄を追加します。
今回はお知らせ欄専用のスタイルを追加するので<section>にnewという名前を付けておきます。尚、今回このお知らせ欄のスタイルは1個しか使わないのでid(#)を使いましたが、同じページ内で他にも使う可能性があるならclass(.)を使っておいて下さい。

↓手打ちに自信がない人は以下のタグをコピペ。

続いてお知らせ情報を入力しましょう

一般的な段落タグ<p>で記載してもいいのですが、今回は定義リストタグ<dl><dt><dd>を使ってみます。

↓手打ちに自信がない人は以下のタグをコピペ。

<dl>~</dl> tableタグの時と似たイメージですが、定義リストを使う時はまずこの<dl>タグで外枠を囲みます。
<dt>~</dt> <dt>タグは「用語」を示します。今回はお知らせ欄の日付に使います。 <dd>~</dd> <dd>タグは「用語」ごとの説明です。 今回は日付に対する更新情報の部分に使います。

ここで一旦プレビュしてみましょう

見出しと、更新情報が以下のように表示されましたか?

日付と、更新内容のスタイルを整えていきましょう。

style.cssにスタイルを追加していきます。

追加するのは以下のタグです。

↓以下のタグをコピペして下さい。

簡単に説明をします。

まず、「#new dl」は、sectionに付けた名前(new)の中にあるdlタグに対してになるので、更新欄の外枠を意味します。「margin」の指定で3つ数字がありますが、3つの場合は左から、「上」「左右」「下」へ空けるスペースの事です。
#new dt」は、日付部分への指定です。今回新しいタグが出てきたかと思いますが、 font-weight: (css指定の文字列); というのは文字の太さを指定するスタイルです。今回は「font-weight: bold;」とありますが、boldは太字にする設定です。他によく使う文字列は「normal」です。例えば見出し用の<h>タグは標準で太字表示されるので、これを意図的に標準にしたい場合などに使ったりします。
次に「#new dd」は更新情報への指定です。「border-bottom」は下側への線の設定です。margin-leftは左側(ボックスの外側)へ空けるスペースの事です。

再びプレビュー

以下のように日付と更新情報が左右に分かれていればOKです。

ちょっとトップページの内容が寂しいなと思ったら

サービスページの中から特におすすめしたい商品のタグをコピペしてもってきましょう。賑やかになりますよ。

最後の最後にフッターの調整を少ししておきましょう

忘れていましたがfooterの位置がちょっと辺なので調整しておきます。
style.cssを開き、以下を追加して下さい。

「text-align」も以前やりましたが文字をセンタリングする設定です。フッターのテキストが左端に寄ってしまっていたので、左右中央に配置させました。
「padding」はfooter内の余白設定です。今回は2つ設定しているので、左から、「上下」「左右」への設定値となります。フッターの上下にほどよい空間ができました。

最後にプレビュー

以下のようにバランスが取れていればOKです。

次はいよいよ最後のステップです

「サーバーにアップロードする」です。頑張りましょう!