実践コーディングスキル - 第6章 Lesson4

第4回:メニュー一覧のデザインを調整しよう

   

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

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

リストタグを使って作成したメニュー一覧に、文字サイズや大きさ、余白などのデザインを調整するためのCSSを記述する方法を解説しています。



この動画で学べること

・メニュー一覧にスタイルを適応させる方法



メニュー一覧にスタイルを適応させる方法

前回記述したメニュー一覧部分にスタイルを適応させましょう。
まず、<dt>タグの見出しと詳細の部分にスタイルをかけます。
それぞれに文字の大きさ、色、太さをPhotoshopで調べて設定してください。



div#left dl dt{
font-size: 15px;
font-weight: nomal;
color: #734339;
}

div#left dl dd{
font-size: 13px;
font-weight: nomal;
color: #734339;
}




保存してブラウザで見てみましょう。
文字が少し小さくなり、色も変わりました。
今はまだ詰まったようなデザインになっているので、詳細部分の左側と下に余白が必要です。
なので<dd>タグにmarginをかけて調整していきましょう。
また、背景が小さいので高さを中身に応じで自動で調整するという指定をしましょう。



div#left dl dd{
font-size: 13px;
font-weight: nomal;
color: #734339;
margin-left: 15px;
margin-bottom: 20px;
}



div#left {
width: 555px;
height: auto;
background-color: #fff;
float: left;
margin-right: 20px;
padding: 10px;
}



保存してブラウザで見てみると、余白などが調整されて見やすいメニュー一覧になりました。