動画で練習26

参考ブログ

初心者でもわかるHTML&CSS講座　イタリアンレストランホームページを作る | Inoma Createｋ

※ブログ内に練習用のデータあり

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

メニューレイアウト調整

• <menu>の<box>表示＝横並びにするので幅を29％「width: 29%;」
• 「float: left;」
• 「margin-left: 3%;」＝左余白を3％に指定
• 「margin-bottom: 30px;」＝左余白を30pxに指定
• メニューボックスに配置するイメージタグ→「.menu_box img 」
• 幅＝「width: 100%;」　最大の横幅＝「max-width: 300px;」
• メニューボックスの中にある「ul」=「 .menu_box ul」
• 文字揃えは左＝「text-align: left;」
• フォントサイズは少し小さめの「0.8倍」＝「font-size: 0.8em;」
• 左余白を「３％」に＝「margin-left: 3%;」
• メニューを横並びにしたので今回も「.clearlist 」を使用して「frowt」の解除を行います。

CSS 

↑「.menu_box」のの設定

• htmlの最後のメニューボックスの後に<div class="clearlist"></div>を入力

html

↑メニュー項目の最後に記載

ブラウザ

↑無事にメニュー項目が「横並ぶになりました。」

※続きます。