実践コーディングスキル - 第8章 Lesson7

第6回:ピックアップ記事のレイアウトを組もう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

ウェブマガジンのピックアップ記事を作成する方法を解説しています。
ここでは、まずボックスを用意し横に並べていきます。



この動画で学べること

・コンテンツ部分のボックスを作成する方法
・ボックスを横並びにし、ページの真ん中に寄せる方法



コンテンツ部分のボックスを作成する方法

今回は、コンテンツ部分の作成に入っていきたいと思いますが、まずはページを真ん中寄せにするためのボックスを作っていきたいと思います。
<header>タグの下に、<div>id名main_wrapperを書きましょう。
さらにその中に、ピックアップ部分とランキング部分の<div>タグを追加しましょう。
また、コンテンツ部分の背景の色を薄いグレーにしたいので、<body>タグに背景色を指定するコードを書いてください。



<div id="main_wrapper">
<div id="top_pickup"></div>
<div id="top_ranking"></div>
</div>



body {
font-family: "メイリオ", Meiryo;
color:#434343;
background-color: #f6f6f6;
}



では、コンテンツの大きさを指定していたいと思います。
コンテンツ全体をくるむ#main_wrapper、ピックアップ記事の#top_pickup、ランキングの#top_rankingにそれぞれ横幅と縦幅を指定します。
また、わかりやすいように今だけ背景の色も設定しておいてください。



div#main_wrapper {
width: 960px;
height: auto;
}


div#top_pickup{
width: 582px;
height: 360px;
background-color: orange;
}


div#top_ranking{
width: 348px;
height: 360px;
background-color: green;
}



では一度保存してブラウザで見てみましょう。
ピックアップ記事とランキング部分のボックスが表示されました。




ボックスを横並びにし、ページの真ん中に寄せよう

次に、コンテンツ部分のボックスのレイアウトを組んでいきたいと思います。
ピックアップ記事とランキング部分のボックスを横並びにして、間の余白をmarginでとってください。



div#top_pickup{
width: 582px;
height: 360px;
background-color: orange;
float: left;
margin-right: 30px;
}


div#top_ranking{
width: 348px;
height: 360px;
background-color: green;
float: left;
}



最後に、ページを真ん中に寄せるため、#main_wrapperに対してページの左右対称に余白をとるという指定をします。
また、上にも余白をとりたいのであわせて一緒に書きましょう。



div#main_wrapper {
width: 960px;
height: auto;
margin: 30px auto 0 auto;
}



では保存してブラウザで見てみます。
ボックスが横並びになり、ページの真ん中にることができました。