【レイアウト構成】中級編:ブログサイト/2カラム

目次

全体のレイアウト構成

サイト全体のレイアウト構成

解説!

2カラムのブログ型レイアウトです。
レイアウト構成は下記の通りです。

header
ロゴとグローバルナビを囲みます。
div(#pickup)
pickupのコンテンツを囲むエリア。中の記事をflexboxで横並びに配置します。
div(#container)
mainとasideを囲むエリア。flexboxで横並びに配置します。
main
コンテンツのメインとなる記事の一覧を囲みます。
aside
サイド―バー全体を囲みます。
footer
コンテンツ下のfooter部分を囲みます。

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

header

ヘッダーのレイアウト構成

コーディングのヒント!

ロゴ
h1タグで記述します。
グローバルナビ
navタグは全幅で背景カラーを設定します。
メニューは最大幅を指定して中央に配置し、ul、liタグで横並びに揃えます。

div(#pickup)

pickupエリアのレイアウト構成

コーディングのヒント!

エリア全体をdivタグで囲みます。

各記事をarticleタグで囲み、タイトル部分をh2タグで記述します。
外側のdivタグにflexboxを指定することで、3つの記事を横並びに配置します。

リンク部分は:hoverの設定で、ホバー時にアンダーラインを消します。

main

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タグで囲み、背景カラーを設定します。

全体
各コンテンツをsectionタグで囲み、外側のdivタグでflexboxを指定して横並びに配置します。
各sectionタグのタイトルをh3で記述します。
About
リンク先頭の黒矢印は、aタグの::beforeで指定します。
CSSだけで作れる矢印はたくさんありますので、この機会にネットで調べながら色々な矢印の実装を練習してみてください。
Twitter
タイムラインの埋め込みは、公式サイトから埋め込み用のコードを生成できます。
タイムラインを埋め込む方法

コーディング練習メニューに戻る

他のコーディング練習にチャレンジする

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習

リクエスト受付中
【プレゼント特典あり】

当サイトを利用いただき誠にありがとうございます。

皆様の学習がより良いものになるよう、日々サイトの改善に努めております。

利用してみて、「分かりづらい、もっとこうしたほうが良い」という点、「こんな学習内容があればいいのに」というリクエストをお送りください。

特典としまして、当サイトでは公開していない追加の学習コンテンツをご案内させいただきます。

【プレゼント特典】

【特別編】コーポレートサイト/サイドメニュータイプ

学習内容は以下の通りです。

  • ・デモサイト
  • ・レイアウト構成解説
  • ・ソースコード

下記、アンケートフォームでご入力いただいたメールアドレスへ、学習ページのURLをお送りさせていただきます。

※メールが届かない場合、メールアドレスの入力間違いか、迷惑メールへ振り分けられている可能性がありますのでご確認ください。

    【アンケートフォーム】

    ※学習に関するご質問につきましては、質問箱からお願いいたします。

    (※学習コンテンツのURL送付以外の目的で使用いたしません。)