新しいを創造する知恵2015.03.16未経験からのシステム開発職〜1週目その2〜未経験からのシステム開発職への転職ということで、IT業界へ就職を考えている方々へ向けて、奮闘の軌跡を発信していきます。前回はwbeページのヘッダーを作成しました。今回は本体を作成していきます。(※ここで紹介する方法は一例です。フッターを作るTweet続いては本体を作成していきます。画像を等間隔で横に並べるヘッダーの下にトップ画像を入れたら、その下に画像を3枚等間隔で並べます。見本は次のようになります。class=”container”>の中に入れて作成していきます。今回画像は無順序リストタグ<ul>を使って横に並べます。class=”mainContent”>で囲ってやります。この部分のhtmlファイルは次のようになります。class="container"><!--.container-->続いてcssファイルを書いていきます。class=”mainContent”>の横幅、高さ、余白を指定します。145px;}同様に、<li>の横幅、高さ、余白を指定し、float:leftで左から横に並べます。li:nth-child(3n)は<ul>中の3の倍数番目の<li>を指し、これに対して、余白をなくしています。これは、今後並べる画像が増えた際に一番右端に来る画像だけ余白をなくすように、拡張性を持たせた書き方になっています。結果は次のようになります。本文を二つに分ける続いて、その下の新着情報とメニュー、企業情報を作成していきます。ここでは全体を二つに分け、左側を新着情報、右側をメニュー、企業情報とします。class="containerRight"></div><!--containerRight--></div><!--.container-->これまでと同様に、見本を元に左と右の横幅、高さを指定し、それぞれ右と左にfloatで寄せて上げます。right;overflow:hidden;}後は中身をそれぞれ書き足していきますが、長文となるので省略させていただきます。フッターを作る最後はフッターを作成します。class=”bottom”>を作成し、その中にテキストを入れます。class=”bottom”>の横は全体に広げ、高さを指定します。centerで左右中央に持ってきます。<p>のpaddingを指定し、上下中央に来るように調節します。0;}結果は次のようになります。以上、webページ作成は終了です。未経験からのwebページ制作の模様を2回にわたってお伝えしました。2016.01.18母親のケータイをiPhoneに変えて気づいたこと。