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

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

   

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

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

ウェブマガジンサイトのサイドバーを作成する方法を解説しています。
ここでは、文字に関するCSSを記述していきます。



この動画で学べること

・カテゴリの見出しにCSSをかける方法



カテゴリの見出しにCSSをかけよう

前回マークアップしたカテゴリの見出しに、スタイルをかけていきましょう。
まずは、文字のサイズや太さを指定します。



#top_category h3 {
font-size: 18px;
font-weight: bold;
}



一度保存してブラウザで見てみます。
文字のスタイルが少し変わりました。
次に見出しの左側にあるアイコンを背景画像で表示させたいと思います。
今回は、画像を一度だけ表示させたいので、画像のパスのあとにno-repeatを入力しましょう。
そして、アイコンの位置を指定していきます。



#top_category h3 {
font-size: 18px;
font-weight: bold;
background: url(images/category_icon.png) no-repeat left 3px;
}



最後に、見出しの下に薄いグレーの境界線を張って余白の調整をすれば、カテゴリの見出しが完成です。



#top_category h3 {
font-size: 18px;
font-weight: bold;
background: url(images/category_icon.png) no-repeat left 3px;
border-bottom: 1px dotted #dcdddf;
padding: 0 0 7px 25px;
margin-bottom: 10px;
}