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

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

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

チャレンジ内容

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



使用するファイル

・「チャレンジ」フォルダの中にある「start」フォルダのindex.htmlとstyle.cssを使います。



進め方

01.「NEST Chocolate Cafe」部分の作成方法

・角の丸みをborder-radiusプロパティで書きます。
・paddingを使って、内側の余白を指定します。
・margin-bottomで見出しとメニューの間の余白を指定します。




02. 見出し2の「Drink Menu」の余白を作ろう

・paddingを使って、左にあるアイコンから余白をとります。
・見出し2の下の点線からメニュー一覧までは、外側の余白をとりたいので、marginを使って書きます。




03. メニュー一覧を完成させよう

・1つ1つのメニューを四角形で囲んだデザインにしたいので、<li>タグに境界線をつけます。
・<li>タグに20pxの内側の余白をとります。
・<li>タグのアイコンは必要ないので、list-styleプロパティを使ってアイコンを消します。
・<dt>タグにmargin-bottomをかけて、メニューと詳細の間の余白をとります。




04. フッターに余白を指定しよう

・paddingを使って上下に30pxの内側の余白をとりましょう。




今回のチャレンジでは、このような見やすいカフェメニューが完成します。
(左:スタート 右:完成)