【レイアウト構成】初級編：ECサイト／商品ページ

目次

• 全体のレイアウト構成
• 各パーツのレイアウト構成
  • header
  • div（#item）
  • footer

全体のレイアウト構成

各パーツのレイアウト構成

header

コーディングのヒント!

header

ロゴとグローバルナビをheaderタグで囲みます。

ロゴ

divタグで記述します。

グローバルナビ

navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。

左側のメニューと右側のメニューはそれぞれ別のリストタグで囲み、Flexboxの両端揃えで横ならびに配置します。

div（#item）

コーディングのヒント!

全体

全体をdivタグで囲み、画像エリアのdivとテキストエリアのdivをFlexboxで横並びに配置します。

商品タイトル

h1タグで記述します。

数量とサイズの表

tableタグで記述します。
table内はヘッダー部分をtheadタグ、ボディ部分をtbodyタグで記述します。
また、見出し部分はthタグを使用します。
テーブル内の枠線は、th、td、tableタグの各辺に適切に設定することで、重なりあわないように気をつけます。

※tableタグやtheadタグ、tbodyタグの使い方については、「tableタグを使った表の作り方について」で詳しく解説しています。

footer

コーディングのヒント!

フッター全体をfooterタグで囲みます。
コピーライトをpタグで記述します。

あなたのコーディング力、実務で通用しますか？

以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。

• 模写はできるようになってきたけど、実務に通用するか不安
• ポートフォリオに悩んでいる・載せる実績がない
• 案件に挑戦したいけど、自信がなくて一歩踏み出せない

今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

コーディングを仕事にしていきたい方へ

Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。

• ポートフォリオに載せる実績がない・・・
• 実務経験がゼロ・・・
• 案件獲得に不安がある・・・

1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

• 第1章【入門編】プロフィールサイト〜フレックスボックス
• 第2章【初級編】ブランドサイト〜ポジション
• 第3章【中級編】サービスサイト〜複数ページ
• 第4章【上級編】カフェサイト〜複数レイアウト
• 第5章【応用編】ランディングページ〜動きのあるWebサイト
• 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。