森のプログラミング練習ブログ

htmlやcssの練習したコードを投稿するブログです。

動画で練習5

参考サイト(サイト内に練習用データあり)

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

動画

HTML&CSS講座 イタリアンレストランホームページを作る【前編】 - YouTube

--------------------------------------

作製順位

  1. ボックスレイアウト
  2. htmlで実装
  3. 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

f:id:morijuntan:20201202102631p:plain

 ↑黄色枠が自分で入力した部分です。

f:id:morijuntan:20201202103741p:plain

Googleチャームで出力、成功しました。

f:id:morijuntan:20201202110432p:plain

↑画像の設置をしていきます。

f:id:morijuntan:20201202110623p:plain

↑画像が設置できました。

 

メニューを作成します。

f:id:morijuntan:20201202113540p:plain

f:id:morijuntan:20201202113650p:plain

↑画像やメニュー表の配置をしています。

f:id:morijuntan:20201202114032p:plain

f:id:morijuntan:20201202114010p:plain

↑成功、画像が表示されました。

 

f:id:morijuntan:20201202125142p:plain

f:id:morijuntan:20201202130647p:plain

↑地図、住所、フッターなど情報を入力

f:id:morijuntan:20201202125319p:plain

↑失敗、何度か修正しましたが住所や番号が表示されませんでした。

 

何度か試しましたが原因が分からなかったのでCSSに移行したいと思います。