【レイアウト構成】上級編：ブログサイト／2カラム
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
目次
- 全体のレイアウト構成
- 各パーツのレイアウト構成
全体のレイアウト構成
解説!
2カラムのブログ型レイアウトです。
レイアウト構成は下記の通りです。
- header
- ロゴとグローバルナビを囲みます。
- div（#pickup）
- pickupのコンテンツを囲むエリア。中の記事をflexboxで横並びに配置します。
- div（#container）
- mainとasideを囲むエリア。flexboxで横並びに配置します。
- main
- コンテンツのメインとなる記事の一覧を囲みます。
- aside
- サイド―バー全体を囲みます。
- footer
- コンテンツ下のfooter部分を囲みます。
各パーツのレイアウト構成
header
コーディングのヒント!
- ロゴ
- h1タグで記述します。
- グローバルナビ
-
navタグは全幅で背景カラーを設定します。
メニューは最大幅を指定して中央に配置し、ul、liタグで横並びに揃えます。
div（#pickup）
コーディングのヒント!
エリア全体をdivタグで囲みます。
各記事をarticleタグで囲み、タイトル部分をh2タグで記述します。
外側のdivタグにflexboxを指定することで、3つの記事を横並びに配置します。
リンク部分は:hoverの設定で、ホバー時にアンダーラインを消します。
main
コーディングのヒント!
- main
- エリア全体をmainタグで囲みます。
- article
-
各記事をarticleタグで囲み、タイトルをh2タグで記述します。
タイトル下の更新日とカテゴリ名は、ul、liタグを使用してflexboxで横並びに配置します。
aside
コーディングのヒント!
- aside
- サイドバー全体をasideタグで囲みます。
- authorエリア
-
authorエリア全体をsectionタグで囲み、名前をh3タグで記述します。
画像にborder-radiusを指定することで丸く切り抜くことができます。widthとheightで円のサイズを調整します。 - rankingエリア
-
rankingエリア全体をsectionタグで囲みます。
エリアのタイトルをh3タグ、記事をarticleタグ、記事タイトルをh4タグで記述します。 - archiveエリア
-
rankingエリア全体をsectionタグで囲みます。
エリアのタイトルをh3タグ、アーカイブリストをul、liタグで記述します。
footer
コーディングのヒント!
フッター全体をfooterタグで囲み、背景カラーを設定します。
- 全体
-
各コンテンツをsectionタグで囲み、外側のdivタグでflexboxを指定して横並びに配置します。
各sectionタグのタイトルをh3で記述します。 - About
-
リンク先頭の黒矢印は、aタグの::beforeで指定します。
CSSだけで作れる矢印はたくさんありますので、この機会にネットで調べながら色々な矢印の実装を練習してみてください。擬似要素の詳細については、「【CSS】擬似要素の使い方について」で詳しく解説しています。
-
タイムラインの埋め込みは、公式サイトから埋め込み用のコードを生成できます。
タイムラインを埋め込む方法
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
