動画で練習5
参考サイト(サイト内に練習用データあり)
初心者でもわかるHTML&CSS講座 イタリアンレストランホームページを作る | Inoma Create
動画
HTML&CSS講座 イタリアンレストランホームページを作る【前編】 - YouTube
--------------------------------------
作製順位
- ボックスレイアウト
- htmlで実装
- cssでレイアウト調整
--------------------------------------
ボックスレイアウト設計
・HP=「box」という考え方でレイアウト構造を考える
・作成したデザインカンプ(完成イメージ)の構成になるよう具体的にどのよう「box」を配置するか検討、スムーズに実装が可能
--------------------------------------
・レイアウト
「header」
「main」
「footer」
3個の領域に分かれ練習するページも3個に分割します。
--------------------------------------
・「header」=「#site_logo」サイトのロゴ
「#site_reserve」予約連絡先
「nav」ナビゲーションメニュー
--------------------------------------
・「main」=「#main_image」メインイメージ
「concept」コンセプト
「#menu」メニュー
「#access」アクセス
・4個のセクションとして分割している。
・メニューセクション=各メニューリストが横並びになっているため「menu_box」を配置する
・アクセスセクションでは
「#access_map」マップ
「#access_txt」アクセス情報
「#access_reserve」連絡先
を「box」として配置する。
「footer」=今回はロゴとコピーライトだけなので今回は「box」は設定しません
--------------------------------------
html
↑黄色枠が自分で入力した部分です。
↑Googleチャームで出力、成功しました。
↑画像の設置をしていきます。
↑画像が設置できました。
メニューを作成します。
↑画像やメニュー表の配置をしています。
↑成功、画像が表示されました。
↑地図、住所、フッターなど情報を入力
↑失敗、何度か修正しましたが住所や番号が表示されませんでした。
何度か試しましたが原因が分からなかったのでCSSに移行したいと思います。