実践コーディングスキル - 第5章 Lesson1

第18回:新着情報一覧の背景を作成してみよう

   

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

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

新着情報一覧の背景を作成する方法を解説しています。
ここでは、背景の色と内側の余白を、レイアウト崩れのないように設定していきます。



この動画で学べること

・新着情報のHTMLを記述する方法
・新着情報の背景にスタイルを適応させる方法



新着情報のHTMLを記述しよう

今回から、新着情報の部分の作成に入っていきましょう。
まずはHTMLファイルに必要なタグを書いていきます。
見出しを作成していきますが、<h1>はすでにロゴの部分で使っているので<h2>を使って<div>id名leftの中に記述していきましょう。



<div id="left">
<h2>新着情報</h2>
</div>



次に新着記事一覧の部分ですが、ここは同じようなデザインが繰り返されているので、リストを使っていきます。
日付の部分を違うデザインにしたいので、<span>タグで囲んでおいてください。



<ul>
<li><span>2013-9-20</span>
タイトルが入ります。タイトルが入ります。
</li>
<li><span>2013-9-20</span>
タイトルが入ります。タイトルが入ります。
</li>
<li><span>2013-9-20</span>
タイトルが入ります。タイトルが入ります。
</li>
<li><span>2013-9-20</span>
タイトルが入ります。タイトルが入ります。
</li>
<li><span>2013-9-20</span>
タイトルが入ります。タイトルが入ります。
</li>
</ul>




新着情報の背景にスタイルを適応させよう

ではここからは新着情報の部分にスタイルを書いていきたいと思います。
まず、背景のボックスの背景を白くし、メイン画像のボックスにかけた影をつけていきましょう。
また、paddingで内側の余白をとってください、この時、要素のサイズが変わってしまうのでレイアウト崩れに注意しましょう。



#news {
width: 575px;
height: 198px;
background-color: #fff;
float: left;
margin-right: 20px;
box-shadow: 0 2px 7px rgba(83,78,61,0.3);
padding: 10px;
}



では保存してブラウザで見てみましょう。
影の入った、新着情報の背景が完成しました。