ワイヤーフレームの通りにCSSで整える
HTMLではワイヤーフレームをもとにHTMLの構造を考えました。
ここでは同じワイヤーフレームを使い、HTMLはそのままに、CSSでレイアウトを整えていきます。
HTMLとCSSそれぞれの役割の違いを意識しながら見ていきましょう。
※ワイヤーフレームの続きになります。
CSSの割り当て
HTMLでは、header、main、footerといった要素で構造を分けました。
CSSでは、これらの要素をそのまま使い、ワイヤーフレームで示された配置になるようにレイアウトを整えていきます。
まずは、HTMLで構造を決定したワイヤーフレームを改めて見てみましょう。
今回のワイヤーフレームでは、次の単位でレイアウトを考えます。
- header全体
- メイン画像
- 新着情報と広告バナーの2カラム
- footer全体
新着情報の中身については、縦に並ぶ通常の構造のため、ここではレイアウトとして分けて扱いません。
CSSでは、HTMLで決めた区切りを動かさずに、配置だけを調整していきます。
headerのレイアウト
headerには、サイト名、キャッチコピー、ナビゲーションが含まれています。
HTMLでは意味ごとに要素を分けましたが、CSSではそれらをどのように配置するかを考えます。
ワイヤーフレームを見ると、サイト名とキャッチコピーは左側、ナビゲーションは右側に配置されています。
そのため、CSSではheader全体を1つのレイアウト単位として扱い、中の要素を横並びに配置することで、ワイヤーフレームの構成を再現します。
この段階では、文字サイズや色は考えません。
要素の並び方と位置関係だけを整えることが目的です。
mainのレイアウト
mainには、ページの主な内容が配置されています。
ワイヤーフレームでは、上部に大きなメイン画像があり、その下に新着情報と広告バナーが並んでいます。
CSSでは、まずmain全体を縦方向の流れとして考えます。
その中で、メイン画像のエリア・新着情報と広告バナーのエリアという2つのまとまりに分けてレイアウトします。
新着情報と広告バナーは横に並んでいるため、この部分を2カラムのレイアウトとして扱います。
新着情報の中身は縦に並ぶだけなので、この時点では細かく分けて考える必要はありません。
footerのレイアウト
footerには、個人情報の取り扱いに関するリンクや、住所、電話番号といった補足情報が配置されています。
HTMLではそれぞれ段落として配置していますが、CSSでは見た目を整えるために横並びにすることを考えます。
footer全体を1つのレイアウト単位として扱い、中の要素を横方向に並べることで、ワイヤーフレームに近い配置を作ります。
footerはページの主役ではないため、レイアウトもシンプルに整えるだけで十分です。
以上のことを踏まえると、CSSのレイアウトでの区切りはこのようになります。
それではこの区切り方をもとにCSSでレイアウトしていきます。
CSSの準備
まずは、CSSを書くためのファイルとして、空のstyle.cssを用意します。
そして、そのstyle.cssをhtmlに適用します。
また、titleに会社名を書きます。
CSS追加前のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
</head>CSS追加後のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<title>株式会社サンプル食品</title>
</head>
当然ですが、まだCSSを書いていないため、style.cssを読み込ませてもスタイルは適用されません。
しかし、CSSを適用していないと変化がわからないため、空でも最初にlinkタグを使っておきます。
それでは、headerからCSSを書いていきます。
headerのレイアウト
それではheaderのCSSを書いていきます。
CSS追加前のコード
<header>
<h1>株式会社サンプル食品</h1>
<p>
あなたの未来の健康のためにできること。<br>
安全な食品を提供することをお約束します。
</p>
<nav>
<ul>
<li><a href="">商品案内</a></li>
<li><a href="">企業情報</a></li>
<li><a href="">代表挨拶</a></li>
<li><a href="">お問合せ</a></li>
</ul>
</nav>
</header>
最初にそれぞれの要素が持っている余白を打ち消すために、margin: 0とpadding: 0を*{}内に書きます。
そして、ワイヤーフレーム通りにレイアウトするには、header内の要素を横に並べる必要があるため、display:flexを使用します。
ただし、headerの左右には余白があります。
そのため、背景は画面幅いっぱいに表示しつつ、中身の幅だけを制御する必要があります。
そこでheaderタグの直下にdivを追加し、この要素にレイアウトの指定を行います。
また、右側に配置する文章とナビゲーションは縦に並ぶため、これらをdivでまとめ、そのdivにdisplay:flexとflex-direction:columnを指定します。
最後に、ナビゲーション内のメニューは横並びにするため、ul要素にdisplay:flexを指定します。
CSS追加後のコード
<header>
<div id="headerInner">
<h1>株式会社サンプル食品</h1>
<div class="rightContents">
<p>
あなたの未来の健康のためにできること。<br>
安全な食品を提供することをお約束します。
</p>
<nav>
<ul>
<li><a href="">商品案内</a></li>
<li><a href="">企業情報</a></li>
<li><a href="">代表挨拶</a></li>
<li><a href="">お問合せ</a></li>
</ul>
</nav>
</div>
</div>
</header>*{
margin: 0;
padding: 0;
}
header{
border: 1px solid #000000;
width: 100%;
height: 150px;
box-sizing: border-box;
margin-bottom: 16px;
}
#headerInner{
display: flex;
gap: 16px;
max-width: 1440px;
margin: 0 auto;
}
#headerInner h1{
width: 60%;
line-height: 150px;
}
.rightContents{
display: flex;
flex-direction: column;
width: 40%;
}
.rightContents p{
width: 100%;
height: 100px;
box-sizing: border-box;
}
nav ul {
display: flex;
gap: 10px;
list-style: none;
}
nav ul li {
border: 1px solid #000000;
border-bottom: none;
width: 100%;
height: 50px;
box-sizing: border-box;
line-height: 50px;
text-align: center;
}
考え方を理解することを優先するため、中央揃えなどの細かい指定については省いています。
ワイヤーフレームの段階では作り込む必要はなく、要素がワイヤーフレーム通りに配置されていれば問題ありません。
mainのレイアウト
それではmainのCSSを書いていきます。
CSS追加前のコード
<main>
<img src="../img/noImage.png" alt="メインイメージ">
<section>
<h2>新着情報</h2>
<article>
<a href="">
<time>2026.1.10</time>
<p>新製品「サンプルC」のご案内</p>
</a>
</article>
<article>
<a href="">
<time>2026.1.1</time>
<p>新年のあいさつ</p>
</a>
</article>
<article>
<a href="">
<time>2025.12.1</time>
<p>新製品「サンプルB」のご案内</p>
</a>
</article>
<article>
<a href="">
<time>2025.10.1</time>
<p>新製品「サンプルA」のご案内</p>
</a>
</article>
<article>
<a href="">
<time>2026.9.1</time>
<p>サイトリニューアル</p>
</a>
</article>
</section>
<aside>
<img src="../img/noImage.png" alt="広告バナー">
</aside>
</main>
main内には、上にメインイメージ、下にコンテンツエリアを配置するため、縦並びのレイアウトになります。
そのため、mainにはdisplay:flexを指定し、flex-direction:columnで縦方向に要素を並べています。
メインイメージは、ワイヤーフレーム上で指定されている大きさを基準に、幅と高さを設定しています。
ここでは画像の内容ではなく、レイアウト上の領域を確認することが目的です。
メインイメージの下には、本文エリアとサイドエリアを横に並べます。
この2つの要素をまとめたdivにdisplay:flexを指定し、sectionとasideを横並びに配置しています。
sectionは新着情報の一覧を表示するエリア、asideは広告などを配置するサイドエリアを想定しています。
それぞれの幅はワイヤーフレームに合わせて割合で指定し、構造が分かりやすいようにしています。
CSS追加後のコード
<main>
<img src="../img/noImage.png" alt="メインイメージ">
<div id="mainContents">
<section>
<h2>新着情報</h2>
<article class="news">
<a href="">
<time>2026.1.10</time>
<p>新製品「サンプルC」のご案内</p>
</a>
</article>
<article class="news">
<a href="">
<time>2026.1.1</time>
<p>新年のあいさつ</p>
</a>
</article>
<article class="news">
<a href="">
<time>2025.12.1</time>
<p>新製品「サンプルB」のご案内</p>
</a>
</article>
<article class="news">
<a href="">
<time>2025.10.1</time>
<p>新製品「サンプルA」のご案内</p>
</a>
</article>
<article class="news">
<a href="">
<time>2026.9.1</time>
<p>サイトリニューアル</p>
</a>
</article>
</section>
<aside>
<img src="../img/noImage.png" alt="広告バナー">
</aside>
</div>
</main>main {
margin: 0 auto;
max-width: 1440px;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
main > img {
width: 100%;
height: 400px;
}
#mainContents{
display: flex;
height: 400px;
gap: 16px;
}
#mainContents section{
border: 1px solid #000000;
width: 70%;
box-sizing: border-box;
padding: 0 16px;
}
#mainContents section h2 {
border-bottom: 1px solid #000000;
margin-bottom: 16px;
}
#mainContents section .news a {
display: flex;
margin-bottom: 8px;
}
#mainContents section .news a time::before{
content: "•";
}
#mainContents aside{
width: 30%;
box-sizing: border-box;
}
#mainContents aside img {
width: 100%;
height: 400px;
}headerと同様、考え方を理解することを優先するため、中央揃えなどの細かい指定については省いています。
footerのレイアウト
最後にfooterのCSSを書いていきます。
CSS追加前のコード
<footer>
<p><a href="">個人情報の取り扱いについて</a></p>
<p>〒000-0000 東京都○○区▲▲町1-2-3 サンプルビル3F</p>
<p>電話番号（代表）00-0000-0000</p>
</footer>footerでは、要素を横並びにし、左側の要素を広く使うことで、右端に電話番号を配置しています。
CSS追加後のコード
<footer>
<div id="footerInner">
<p><a href="">個人情報の取り扱いについて</a></p>
<p>〒000-0000 東京都○○区▲▲町1-2-3 サンプルビル3F</p>
<p>電話番号（代表）00-0000-0000</p>
</div>
</footer>footer {
border: 1px solid #000000;
width: 100%;
height: 80px;
box-sizing: border-box;
}
#footerInner {
display: flex;
gap: 16px;
max-width: 1440px;
margin: 0 auto;
}
#footerInner p{
line-height: 80px;
}
#footerInner p:first-child {
flex: 1;
}
#footerInner p:last-child {
text-align: right;
}
footer内の各pをdivで囲むのみのシンプルなCSSとなります。
このように簡単ではありますが、ワイヤーフレーム通りのレイアウト通りとなりました。
ワイヤーフレームとCSSの考え方
ここまで、同じワイヤーフレームをもとに、レイアウトを整えるためにHTMLを最小限調整しながら、CSSで配置を指定してきました。
CSSでは、見た目を作り込むのではなく、要素同士の位置関係や役割を整理することが重要になります。
同じワイヤーフレームであっても、HTMLのまとめ方やCSSの指定方法は人によって多少異なります。
HTMLとCSSの組み合わせにも、必ずしも1つの正解があるわけではありません。
大切なのは、なぜその構造や指定を選んだのかを説明できることです。
ワイヤーフレームを見て配置と役割を考え、理由を持ってHTMLを補い、CSSを書くことができれば、レイアウトとして十分に意味のあるものになります。
最後にここをクリックして書いた内容を確認してみてください。