【レイアウト構成】中級編：ストアサイト（インテリア）／グリッドレイアウト
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
目次
全体のレイアウト構成
解説!
レイアウト構成は下記の通りです。
- header
- ロゴとハンバーガ―メニューを囲みます。
- main
- コンテンツのメインエリア全体を囲みます。
- footer
- コンテンツ下のfooter部分を囲みます。
各パーツのレイアウト構成
header
コーディングのヒント!
- header
- ロゴとハンバーガ―メニューをflexboxの両端揃えで横並びに配置します。
- ロゴ
- h1タグで記述します。
- ハンバーガ―メニュー
-
navタグの中にメニューを記述します。
ハンバーガ―メニューの2本線を表現するクラスとメニューオープン時に全体にかけるマスク用のクラスを作ります。
ハンバーガ―メニューがクリックされた際に、jQueryでメニューのオープン、クローズを切り替えます。
トップページ
コーディングのヒント!
- グリッドレイアウト
-
ul、liタグで囲み、「display: grid」で横並びに配置します。
「grid-template-columns」でPC表示は4列、スマホ表示は2列にします。
また、「gap」を使って画像間の余白を設定します。※グリッドレイアウトの詳細については、「【CSS】Grid（グリッドレイアウト）の使い方について」で詳しく解説しています。
プロダクト一覧ページ（products）
コーディングのヒント!
- タイトル
- ページタイトルをh1タグで記述します。
- グリッドレイアウト
- トップページと同じです。
- ページネーション
- ul、liタグを使用してFlexboxで横並びに配置します。
プロダクト詳細ページ（item）
コーディングのヒント!
- タイトル
- ページタイトルをh1タグで記述します。
- メインコンテンツ
- 画像とテキストのエリアをdivタグで囲み、Flexboxで横並びに配置します。
Aboutページ（about）
コーディングのヒント!
- タイトル
- ページタイトルをh1タグで記述します。
- メインコンテンツ
- 全体をdivタグで囲み、テキストを段落ごとにpタグで記述します。
Companyページ（company）
コーディングのヒント!
- タイトル
- ページタイトルをh1タグで記述します。
- 会社情報
- dl、dt、ddタグを使用し、dt、ddタグをFlexboxで横並びに配置します。
- Google マップ
-
Google マップの埋め込みは、公式サイトに説明がありますので、こちらを参考にしてください。
他のユーザーとマップやルートを共有する
埋め込んだGoogle マップの全体をdivタグで囲み、filterのgrayscaleで白黒に設定します。
footer
コーディングのヒント!
フッター全体をfooterタグで囲みます。
- SNSメニュー
- ul、liタグを使用してFlexboxで横並びに配置します。
- コピーライト
- pタグで記述します。
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
