未経験からのシステム開発職〜１週目その２〜

続いては本体を作成していきます。

画像を等間隔で横に並べる

ヘッダーの下にトップ画像を入れたら、その下に画像を３枚等間隔で並べます。見本は次のようになります。

 

まずヘッダーで行ったように、サイトの横幅が980pxになるように本文全体を<div class=”container”>の中に入れて作成していきます。今回画像は無順序リストタグ<ul>を使って横に並べます。また、画像の上下に空白を持たせるため<ul>全体を<div class=”mainContent”>で囲ってやります。この部分のhtmlファイルは次のようになります。

 続いてcssファイルを書いていきます。見本を元に、<div class=”mainContent”>の横幅、高さ、余白を指定します。

 同様に、<li>の横幅、高さ、余白を指定し、float:leftで左から横に並べます。

 ここで、.mainContent li:nth-child(3n)は<ul>中の３の倍数番目の<li>を指し、これに対して、余白をなくしています。これは、今後並べる画像が増えた際に一番右端に来る画像だけ余白をなくすように、拡張性を持たせた書き方になっています。結果は次のようになります。

 

 

本文を二つに分ける

続いて、その下の新着情報とメニュー、企業情報を作成していきます。ここでは全体を二つに分け、左側を新着情報、右側をメニュー、企業情報とします。

 これまでと同様に、見本を元に左と右の横幅、高さを指定し、それぞれ右と左にfloatで寄せて上げます。

 後は中身をそれぞれ書き足していきますが、長文となるので省略させていただきます。

フッターを作る

最後はフッターを作成します。<div class=”bottom”>を作成し、その中にテキストを入れます。

 

<div class=”bottom”>の横は全体に広げ、高さを指定します。また、テキストをtext-align: centerで左右中央に持ってきます。また、<p>のpaddingを指定し、上下中央に来るように調節します。

 結果は次のようになります。

 

以上、webページ作成は終了です。

 

未経験からのwebページ制作の模様を２回にわたってお伝えしました。他業種からIT業界へ転職をお考えの方々のご参考になれば幸いです！