動画で練習31

参考ブログ

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

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

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－スマホのレイアウト調整

・横並びになっているボックスをスマホ様に変更

・メニューのロゴ「#menu_logo」の横幅「width」を「70％」にする。

・メニューボックス「.menu_box」の「float」を解除「none」

・「float」を解除「none」したので、横幅「width」は「100%」指定

・「margin」を「0 0 30px 0」←時計回りで適用される

・メニューの写真「.menu_box img」の画像最大幅「max-width」を「480px」に指定

・メニューボックスのULリスト「.menu_box ul」の余白「margin」を「 0 30px」←上下左右

css

ブラウザ

↑メニュー画像がスマホ用に大きくなりました。

続きます。