サイトレイアウトの実践練習

概要

コードをダウンロードし手順通りに作業しましょう。

目的

基本のpcレイアウトを学習する。

基本のレイアウト開始時

1 ファイル 1.92 MB

ダウンロード

目標

手順

①CSSの読み込み

HTMLにCSSを読み込みましょう。
reset.cssとstyle.cssがあります。

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

上記のコードの追加によってHTMLファイルとCSSファイルが連携します。

②必要なdivの追加とclass名の記述

横並びレイアウトを実現するためにdivを追加する必要があります。
以下を記述しましょう。

<div class="right"></div>
<div class="left"></div>

右エリア、左エリアを囲みましょう。

③ヘッダーを整える

.header {
background: #ddffed;
display: flex;
justify-content: space-between;
align-items: center;
}

.nav {
display: flex;
gap: 30px;
align-items: center;
}

④メインのエリアを左右横並びにする

.main {
display: flex;
flex-direction: row-reverse;
max-width: 960px;
margin: 0 auto;
}

.left {
background: #f6ceed;
width: 30%;
padding: 15px;
}

.right {
background: #f6f1ce;
width: 70%;
padding: 15px;
}

⑤フッター/その他を整える

.footer {
background: #ddffed;
text-align: center;
}

p {
margin-bottom: 40px;
}

完成までの組み立て順を確認する

サイト全体を作るときは、細かい文字や色から始めず、まず大きな箱を上から順に確認します。この課題では、次の順番で進めると指定先を見失いにくくなります。

HTMLとCSSの接続：reset.cssを先、style.cssを後に読み込みます。
大枠の確認：header、main、footerの3領域を開発者ツールで確認します。
mainの親子構造：左右に並べる2つの要素を同じ親要素の中へ入れます。
PCレイアウト：親へFlexbox、子へ幅を指定します。
スマートフォン確認：画面幅を狭め、縦並び・幅・ナビゲーションを確認します。
細部の調整：最後に色、文字、余白を目標画像へ近づけます。

横幅とpaddingを合わせて考える

この課題では左右の列へwidth: 30%;とwidth: 70%;を指定し、さらにpaddingを加えています。標準のボックスモデルではpaddingがwidthの外側へ加算されるため、合計幅が親要素を超える場合があります。次の指定をCSSの先頭付近へ追加すると、paddingとborderを指定幅の内側に含めて計算できます。

* {
  box-sizing: border-box;
}

スマートフォンでは縦並びにする

PC版が完成したら、開発者ツールまたはブラウザー幅を狭めて表示を確認します。横幅が小さいときは、左右2列を縦並びにし、それぞれを親幅に合わせる方法が基本です。

@media (max-width: 767px) {
  .header {
    display: block;
  }

  .nav {
    flex-wrap: wrap;
    gap: 10px;
  }

  .main {
    display: block;
  }

  .left,
  .right {
    width: 100%;
  }
}

767pxはこの練習用の例です。実制作では特定の端末名だけで決めず、レイアウトが崩れ始める幅を確認してブレークポイントを決めます。

よくある間違い

CSSの読み込み順が逆：reset.cssを後から読み込むと、style.cssで指定した値が打ち消されることがあります。
並べたい子要素へdisplay: flex;を指定する：Flexboxは、並べたい要素の直接の親へ指定します。
30%＋70%なのに横へ収まらない：paddingやborderを含めた幅を確認し、box-sizing: border-box;を使います。
row-reverseの意味を確認しない：HTMLの並び順と画面上の左右が反転します。読み上げ順なども考え、必要な場合だけ使います。
PC表示だけで完成にする：幅を狭め、横スクロール・画像のはみ出し・ナビゲーションの折り返しを確認します。
全体をpositionで配置する：header・main・footerや2列構成は通常の文書の流れとFlexboxで組み、positionは重ねる装飾に限定します。