実践コーディングスキル - 第9章 Lesson9

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

   

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

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

ウェブマガジンサイトのサイドバーを作成する方法を解説しています。
ここでは、カテゴリー一覧のHTMLを記述していきます。



この動画で学べること

・サイドバーのマークアップをする方法



サイドバーのマークアップをしよう

サイドバーのカテゴリを作っていきましょう。
<div>id名top_leftの中に、さらに<div>id名top_categoryを追加し、その中に<h3>で見出しを作ります。
カテゴリ一覧の部分は<li>タグで書き、文字をクリックしたときに別のページに飛ぶことが出来るように、<a>タグを入れます。



<div id="top_category">
<h3>CATEGORY</h3>
<ul>
<li><a href="#">すべてのカテゴリー</a></li>
<li><a href="#">ウェブデザイン</a></li>
<li><a href="#">WORDPRESS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">ウェブマーケティング</a></li>
</ul>
</div>



HTMLが書けたら、CSSの記述に移っていきます。
まず、#top_leftのbackground-color: red;はもう必要ないので消しておきましょう。
#top_categoryに横幅と縦幅を指定し、背景の色を白にしておきます。



div#top_category {
width: 280px;
height: auto;
background-color: #fff;
}



一度保存してブラウザで見てみます。
白い背景のカテゴリ部分のボックスができました。
ではこのボックスの余白や境界線をつけていきたいと思いまうす。
borderやpaddingを使うと、要素の大きさが変わってしまうので、横幅の調整をする必要があります。
borderやpaddingで指定した値を横幅から引き、数値を変更していきましょう。



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