◎ Webデザイン後編/練習問題(上)

【最新版2020】HTML+CSS練習問題

基礎から学ぶHTML+CSS

ケーキハウス編

架空のケーキショップを作成しながら、基礎を固めて行きます。「モバイルファースト」を視野に入れ、スマホ対応のみを優先に練習します。先に、パソコン用のレイアウトを習得してしまうと、後からスマホ用に対応させることが非常に困難になりますので、必ず、スマホ用のレイアウトを先に習得してから、パソコンモニターに対応させるようにしたほうがよいでしょう。
▶ 素材ダウンロード(フリー)



▶ 大きい画像で見る


▶ 素材ダウンロード(フリー)


練習問題 ①
マークアップの基本


ヘッダー、フッター配置・テキストと画像を配置します。
ロゴマークにSVGを使ってみよう。


▶ 仕上がりサンプルを見る

▶ 資料を見る


【テキスト素材】
以下のテキストをbody内にペーストし、マークアップしていきます。

洋菓子専門店「ケーク」大阪 阿倍野 帝塚山
ケーキハウス「ケーク」へようこそ
このサイトでは、人気のケーキを紹介します。
いらっしゃいませ
甘いものを食べると、脳のなかで「幸せホルモン」といわれる
セロトニンが増えていると考えられています。

ショートケーキ
イチゴがのった一番人気のスポンジケーキです。
モンブラン
栗をふんだんに使ったケーキです。様々な形状があります。
Copyright ケーキハウス Co.,Ltd. All Rights Reserved.

【コーディングを始めるに当たっての参考例】

  • ビューポートを記述する。
  • リセットCSSを読み込む。(リセットCSSを先に読み込んでから、オリジナルのCSSを読み込むこと。)
  • 必要に応じて、metaへの情報(description,keyword等)を記述する。
  • bodyのfont-familyは、通常sans-serifなどゴシック体を指定する。

▶ 資料を見る

スタイルシート参考


練習問題 ②
フロート基礎

ケーキを2つ横へ整列させます。2つのケーキの背景色を流し込んでください。
【参考】初心者のためのfloat基礎


【参考】初心者のためのfloat基礎

▶ 仕上がりサンプルを見る


練習問題 ③
横並び基礎

ケーキを4つ横へ整列させます。

ザッハトルテ
こってりとしたチョコレートの濃厚な味わい
シュークリーム
サクサク生地と濃厚クリームは相性抜群

▶ 仕上がりサンプルを見る


練習問題 ④
ナビゲーション基礎(1)

ナビゲーション(縦)を追加してみましょう。


▶ 仕上がりサンプルを見る
【参考】
CSS横並び プロパティまとめ


練習問題 ⑤
ナビゲーション基礎(2)

ナビゲーション(横)を追加してみましょう。

▶ 仕上がりサンプルを見る
【参考】
CSS横並び プロパティまとめ