【レイアウト構成】入門編:プロフィールサイト/1カラム LP

目次

全体のレイアウト構成

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

解説!

1カラムのシンプルなレイアウトです。
レイアウト構成は下記の通りです。

header
ロゴとグローバルナビを囲みます。
main
コンテンツのメインエリア全体を囲みます。
div(#mainvisual)
メインビジュアルのエリアを囲みます。
section(#about)
Aboutコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
section(#bicycle)
Bicycleコンテンツのエリアを囲みます。タイトルを含む一つのまとまったコンテンツなのでsectionタグを使います。
footer
コンテンツ下のfooter部分を囲みます。

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

header

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

コーディングのヒント!

header
ロゴとグローバルナビをFlexboxの両端揃えで横ならびに配置します。
ロゴ
h1タグで記述します。
グローバルナビ
navタグで囲んだ中に、ul、liタグを使用してCSSのFlexboxで横並びに配置します。

div(#mainvisual)

メインビジュアルのレイアウト構成

コーディングのヒント!

画像に高さを指定して高さを固定します。
object-fitを使用することで、固定したエリアの中に画像を表示することができます。

section(#about)

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

コーディングのヒント!

エリア全体をsectionタグで囲みます。
プロフィール画像とテキストの外側をdivで囲み、flexboxの中央揃えで横並びに配置します。

画像
画像にborder-radiusを指定することで丸く切り抜くことができます。widthとheightで円のサイズを調整します。

section(#bicycle)

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

コーディングのヒント!

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

画像
ul、liタグで記述を行い、CSSのflexboxで横並びに配置します。
各画像の説明用のタイトルをh3タグで記述します。
フッターのレイアウト構成

コーディングのヒント!

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

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

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

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

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

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

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

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

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

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

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

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

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

【プレゼント特典】

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

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

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

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

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

    【アンケートフォーム】

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

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