動画で練習13

参考ブログ

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

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

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

メニューを縦に並べる

css

↑そのままだとスマホ画面では見にくいのでメニュー画像や料理画像、テキストを変更します。

グーグルチャーム

↑メニューと画像を変更できましたが「menu」画像とと「メニュー」の位置を中央に設定できませんでした。

アクセス

css

↑グーグルマップやアクセス情報をスマホサイズに合わせます。

正解（動画のキャプチャー画像）

↑今回の練習ではhtmlの時点で地図や店舗情報が適用できなかったので、動画のキャプチャーを載せておきます。

フッター

css

フッター画像をスマホサイズに合わせます。

正解（動画のキャプチャー画像）

↑動画のキャプチャーですが、赤い枠がスマホサイズに収まりました。

※スマホ用にCSSコードを組み立てたのでPCとスマホ両方に対応できました。

フッタ制作でホームページが完成しましたが、再現できない箇所が多かったので再度練習をしてみたいと思います。