【特別編】コーポレートサイト／レイアウト
目次
全体のレイアウト構成
解説!
サイドメニュータイプのコーポレートサイトです。
全体をdiv（.wrapper）で囲み、headerとdiv（.container）を横並びに配置します。
各パーツのレイアウト構成は下記の通りです。
- header
- ロゴとグローバルナビを囲みます。
- div
- メインビジュアルのエリアを囲みます。
- section（#news）
- Newsコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section（#service）
- Serviceコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section（#company）
- Companyコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section（#Work）
- Workコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- section（#contact）
- Contactコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
- footer
- コンテンツ下のfooter部分を囲みます。
各パーツのレイアウト構成
header
解説!
- ロゴ
- h1タグで記述します。
- グローバルナビ
- navタグで囲んだ中に、ul、liタグを使用して記述します。
メニューとSNSはそれぞれ別のurタグで囲みます。
div
解説!
メインビジュアルのエリアです。CSSでmarginなどのレイアウト調整を行うために、全体をdivタグで囲みます。
news
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- ニュース
- ニュースエリア全体をdlタグで囲み、日付をdtタグ、ニュース内容をddタグで記述します。
service
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- サービス
- サービス内容のエリアをul、liタグで記述します。ulタグにflexboxを指定することで横並びに配置します。
company
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- 会社内容
- 会社内容のエリア全体をdlタグで囲み、項目をdtタグ、内容をddタグで記述します。dlタグにflexboxを指定することで、dtタグとddタグを横並びに配置します。
work
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- 作品リスト
- 作品リストのエリアをul、liタグで記述します。liタグにflexboxを指定することで、中の画像とテキストを横並びに配置します。
contact
解説!
エリア全体をsectionタグで囲みます。
- タイトル
- sectionのタイトルをh2タグで記述します。
- フォーム
- フォームエリア全体をformタグで囲み、フォーム内のラベルと入力フィールドをそれぞれdtタグ、ddタグで記述します。
footer
解説!
- footer
- フッター全体をfooterタグで囲みます。
- コンテンツ
-
フッター内のコンテンツ全体をdivタグで囲み、その中の3つのコンテンツもそれぞれdivタグで囲みます。
外側のdivタグにflexboxを指定することで、中の3つのコンテンツを横並びに配置します。
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。