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

第19回:新着情報一覧の文字をデザインしてみよう

   

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

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

新着情報一覧の文字のデザインをする方法を解説しています。
ここでは、デザインと同じになるようにフォントのサイズや太さ等の調整を行います。



この動画で学べること

・新着情報の見出しにスタイルをかける方法
・新着記事一覧にスタイルをかける方法



新着情報の見出しをデザインしよう

今回から新着情報の部分にCSSをかけていきますが、まずは、見出し部分のスタイルをかけていきます。
見出しの文字のサイズ、色、太さを書き、右側のアイコンを境界線で指定します。
また、文字とアイコンの間に余白が必要なので、paddingを左側にかけましょう。



div#left h2{
font-size: 17px;
font-weight: bold;
color:#734339;
border-left: 5px solid #ba3009;
padding-left: 10px;
}



保存してブラウザで見てみましょう。
赤いアイコンのついた見出しができました。



新着記事一覧にスタイルをかける方法

では次に新着情報一覧にもスタイルをかけていきます。
まずは、日付部分の<span>タグと記事のタイトルが入る<li>文字にサイズや色の指定をします。
文字のスタイルをかけることができたら余白の調整も行なっていきましょう。



div#left ul li {
font-size: 13px;
font-weight: nomal;
color: #927e7a;
}

div#left ul li span {
font-size: 12px;
font-weight: nomal;
color: #b5b3b3;
margin-right: 15px;
}