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

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

動画で練習14

参考ブログ

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

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

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

今回は一度完成したコードで反映されなかった部分を「完成品」と比例して修正したいとおもいます。

 

f:id:morijuntan:20201211085653p:plain

↑配布データ内に答えの「完成版」があります。

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

完成品

f:id:morijuntan:20201211090023p:plain

f:id:morijuntan:20201211090403p:plain

f:id:morijuntan:20201211090519p:plain

↑お手本の完成品、三枚目のアクセスまでしっかりと表示されています。

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

自分の作った物

f:id:morijuntan:20201211090905p:plain

f:id:morijuntan:20201211091125p:plain

f:id:morijuntan:20201211091512p:plain

完成品と比例して

  • 「ご予約はこちら」「TEL」の位置
  • 「menu」「メニュー」の位置が真ん中ではない
  • アクセス情報とフッター(赤い枠)が無い

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

再度動画と答えのコードをみて修正していきたいと思います。

f:id:morijuntan:20201211100600p:plain

↑入力していない箇所がありました。

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

お手本コード

f:id:morijuntan:20201211100840p:plain

自分で記入したコード

f:id:morijuntan:20201211101038p:plain

「cliarlist」の位置が違っていました。

 

修正後再度読み込みをしましたが、文字のサイズをお手本の様に再現できませんでした。

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

 

※続きます。

次回はメニュー欄の修正作業をします。