CSSスキル - 第4章 チャレンジ

ボックス系CSSを利用して、カフェのメニューページを作ろう(解説)

ボックス系CSSを利用して、カフェのメニューページを作ろう

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

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

border、margin、paddingプロパティを利用して、読みにくいカフェのメニューページを読みやすく改善してみましょう。



チャレンジ内容

・marginとpaddingプロパティの違いを理解しているかどうか
・borderプロパティを使うことができるかどうか



余白を指定して見やすいカフェメニューを作ろう

まずは、startフォルダの中にある index.html と style.css をSublime Textで開きます。
記述するのは、style.cssの、/* ------------------------------ your css ↓↓ */ と記述してある下です。



始めに、メニューの一番大きな見出しの「NEST Chocolate Cafe」の部分を見ていきましょう。
まず、角の丸みをborder-radiusプロパティで書きます。
角は、「border-radius: 左上 右上 右下 左下;」という順番で書くというルールがあります。
角の丸みの設定ができたら、paddingを使って内側の余白、margin-bottomで見出しとメニューの間の余白を指定しましょう。



header {
border-radius: 0 0 20px 20px;
padding: 20px 0 20px 0;
margin-bottom: 30px;
}



見出し2の「Drink Menu」にも余白の指定をしたいと思います。
「Drink Menu」の左にあるアイコンから余白をとるためには、paddingで内側の余白の調整を行います。
また、見出し2の下の点線からメニュー一覧までは、外側の余白をとりたいので、marginを使って書きましょう。



h2 {
padding-left: 20px;
margin-bottom: 20px;
}



次にメニュー一覧の部分にスタイルをかけましょう。
HTMLファイルを見て見ると、メニューと詳細は<li>タグで囲んであります。
1つ1つのメニューを四角形で囲んだデザインにしたいので、<li>タグに境界線を張って、余白の調整をしましょう。
また、<li>タグのアイコンは必要ないので、list-styleプロパティを使ってアイコンを消してください。



li {
border: 1px solid #999;
list-style: none;
margin-bottom: 20px;
padding: 20px;
}



次に、メニューと詳細の間にも余白が欲しいので、<dt>タグにmargin-bottomをかけましょう。



dt {
margin-bottom: 10px;
}



最後に、フッターの調整をします。
上下に30pxの内側の余白をとるためにpaddingを使って書いてください。



footer {
padding: 30px 0;
}



余白の調整をすることで、このような見やすいカフェメニューを作成することができました。
(左:スタート 右:完成)