実践コーディングスキル - 第10章 Lesson2

第13回:サイドバーを作成しよう(3)

   

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

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

ウェブマガジンサイトのサイドバーを作成する方法を解説しています。
ここでは、境界線や余白などのボックス関連のCSSを記述していきます。



この動画で学べること

・カテゴリ一覧にCSSをかける方法



カテゴリ一覧にCSSをかける方法

今回は、カテゴリ一覧にCSSをかけていきましょう。
まず、文字のサイズと文字の下に19pxの余白をとっていきます。



div#top_category ul li {
font-size: 13px;
margin-bottom: 19px;
}



一度保存してブラウザで見てみると、marginがかかりましたが、指定した19pxよりも広く余白がとられている気がします。
これは、ブラウザの初期状態で行間のスタイルが適応されているためです。
なので、line-height: 1;と入力して、行間が文字の高さぴったりになるように指定しましょう。



div#top_category ul li {
margin-bottom: 19px;
font-size: 13px;
line-height: 1;
}



<li>タグの一番下には余分な余白があるので、それを消したいと思います。
一番下にだけ、と指定するために擬似クラス:last-childを使います。
margin-bottom: 0;と入力しましょう。



div#top_category ul li:last-child {
margin-bottom: 0;
}



保存してブラウザで見てみましょう。
行間の余白、<li>タグの一番下の余白が上手くとれました。



サイドバーに広告の画像をいれよう


では最後に、カテゴリの下にある「ここに広告画像を挿入」の部分の画像を表示させていきましょう。
<div>id名top_categoryの次に、 <div>ボックスを作成し、id名をadにしておきます。
その中に<img>タグを書き、画像のパスを指定しましょう。
また、カテゴリ部分と広告部分がひっついてしまうため、#top_categoryの下に余白をとりましょう。


<div id="ad">
<img src="images/add.jpg" alt="ここに広告を挿入">
</div>



div#top_category {
width: 240px;
height: auto;
background-color: #fff;
padding: 10px;
border: 10px solid #dcdddf;
margin-bottom: 30px;
}



保存してブラウザで見てみます。
公告が上手く表示できれば、サイドバーがすべて完成です。