6日でできる 新HTML&CSS入門｜Webサイトの基本レイアウトを構築する

HTMLでページの骨組みを作り、CSSで見た目を整える。
構造とデザインを分けて、管理しやすいWebサイトの基本レイアウトを構築しよう。

Webサイトを実際に作るときは、いきなり文章や画像を並べるのではなく、まずページ全体の構造を考えることが大切です。どこにサイト名を置くのか、メニューはどこに配置するのか、本文はどの範囲なのか、補足情報やフッターはどこに入れるのかを整理しておくと、見やすく管理しやすいページになります。

Webサイトの基本レイアウトでは、主にheader、nav、main、aside、article、section、footerなどのタグを使って、ページを役割ごとのブロックに分けます。headerにはサイト名やナビゲーション、mainにはページの中心となる内容、asideには補足情報、footerには著作権表示や会社情報などを入れるのが一般的です。

さらに、HTMLとCSSを分けて管理することも重要です。HTMLはページの構造や意味を担当し、CSSは色、余白、横並び、背景、文字サイズなどの見た目を担当します。HTMLファイルの中にすべてのCSSを書いてしまうこともできますが、外部CSSファイルとして分けておくと、デザインを修正しやすく、複数ページで同じスタイルを使い回しやすくなります。

この記事では、HTMLファイルとCSSファイルを分けて、Webサイトの基本レイアウトを構築する方法を解説します。ヘッダー、ナビゲーション、メインコンテンツ、サイド情報、記事、フッターを持つページを例にしながら、構造とデザインの役割を丁寧に見ていきます。

HTMLとCSSは役割を分けて考える

Webページは、HTMLとCSSを組み合わせて作ります。HTMLは、ページの中にどのような情報があるのかを示すための言語です。見出し、本文、ナビゲーション、記事、補足情報、フッターなど、情報の意味や順番を表します。

一方、CSSは見た目を整えるための言語です。背景色、文字色、余白、横幅、配置、ホバー時の変化などを指定します。

ファイル種別主な役割拡張子
HTMLファイルページの構造や情報の意味を定義する.html
CSSファイルデザインやレイアウトを指定する.css

HTMLとCSSを分けると、ページの管理がしやすくなります。たとえば、サイト全体の背景色やメニューの色を変更したい場合、CSSファイルを修正するだけで対応できます。HTML側は情報の構造に集中できるため、コードも読みやすくなります。

外部CSSファイルを読み込むときは、HTMLのhead内にlinkを書きます。

<link rel="stylesheet" href="site-layout.css">

この指定により、HTMLファイルからsite-layout.cssを読み込み、ページ全体にCSSを適用できます。

図1：HTMLは構造、CSSはデザインを担当する

この図から分かること

HTMLとCSSは、それぞれ役割が異なります。HTMLはページの構造や意味を作り、CSSは見た目や配置を整えます。役割を分けて管理することで、ページの修正やデザイン変更がしやすくなり、複数ページで共通デザインを使い回しやすくなります。

ページ全体を主要ブロックに分ける

Webサイトの基本レイアウトは、役割ごとのブロックで考えると分かりやすくなります。代表的な構成は、上からheader、main、footerです。さらに、mainの中にarticleやsectionを入れ、必要に応じてasideで補足情報を配置します。

領域役割主なタグ
ヘッダーサイト名、ロゴ、ナビゲーションを配置するheader、nav
メインページの中心となる記事や本文を配置するmain、article、section
サイド情報補足説明、関連リンク、案内などを配置するaside
フッター著作権表示、会社情報、補助リンクを配置するfooter、small

ページをこのように分けておくと、HTMLの意味が分かりやすくなります。CSSでも、headerには濃い背景色、navには横並びメニュー、mainには本文用の余白、footerには控えめな背景色、というようにブロックごとにデザインを指定できます。

headerとnavでサイト上部を作る

headerは、ページやサイトの上部情報をまとめるためのタグです。サイト名やロゴ、キャッチコピー、メインメニューなどを入れることが多いです。

navは、ナビゲーションリンクをまとめるためのタグです。ホーム、サービス、製品情報、サポート、会社概要など、ユーザーがページを移動するためのリンクを配置します。

ナビゲーションはulとliでリストとして作り、CSSで横並びにすると管理しやすくなります。HTMLではリスト構造として意味を持たせ、CSSで見た目をメニューらしく整える流れです。

main、aside、article、sectionで本文エリアを作る

mainは、ページの中心となる主要コンテンツを入れるタグです。基本的に1ページに1つ使います。ページ固有の本文、記事、サービス紹介、お知らせ一覧などが入ります。

asideは、本文を補足する情報を入れるタグです。サイドバー、関連リンク、補足メモ、広告、プロフィール欄などに使えます。

articleは、独立した記事や情報のまとまりを表します。ニュース記事、ブログ記事、お知らせ、コラムなどに向いています。

sectionは、テーマごとの区切りを作るタグです。articleの中で複数のお知らせを分けたり、本文を見出しごとに整理したりするときに使います。

タグ役割使い方の例
mainページの主要コンテンツ本文全体、メインエリア
aside補足情報サイドバー、関連リンク
article独立した内容記事、お知らせ、投稿
sectionテーマごとのまとまり記事内の区切り、情報ブロック

この4つを組み合わせることで、本文エリアを分かりやすく整理できます。

図2：Webページをヘッダー・メイン・サイド・フッターに分ける

この図から分かること

Webページは、役割ごとのブロックに分けると構造が分かりやすくなります。headerにはサイト上部の情報、navにはメニュー、mainには中心となる内容、asideには補足情報、footerには下部情報を配置します。構造を整理してからCSSを指定すると、見た目の調整もしやすくなります。

HTMLファイルでページ構造を作る

ここでは、Webサイトの基本レイアウトをHTMLで作ります。ヘッダー、ナビゲーション、メインコンテンツ、サイド情報、記事、フッターを持つ構成にします。

CSSは外部ファイルとしてsite-layout.cssに分けるため、HTMLのhead内でlinkを使って読み込みます。

ファイル名： lesson37_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webサイト基本レイアウト</title>
<link rel="stylesheet" href="site-layout.css">
</head>
<body>
  <header id="site-header">
    <h1>Creative Web Studio</h1>

    <nav id="global-menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">制作サービス</a></li>
        <li><a href="#">実績紹介</a></li>
        <li><a href="#">学習コラム</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <div id="page-contents">
      <aside>
        <section>
          <h2>サイドメニュー</h2>
          <p>制作の流れや関連情報をこちらに掲載します。</p>
        </section>
      </aside>

      <article>
        <section>
          <h3>2026.07.10</h3>
          <p>HTMLとCSSの基礎講座を公開しました。</p>
        </section>

        <section>
          <h3>2026.07.01</h3>
          <p>Webデザイン学習用のサンプルページを更新しました。</p>
        </section>
      </article>
    </div>
  </main>

  <footer id="site-footer">
    <small>© 2026 Creative Web Studio. All rights reserved.</small>
  </footer>
</body>
</html>

このHTMLでは、ページ上部をheader、メニューをnav、中心となる領域をmainで作っています。mainの中には、サイド情報を入れるasideと、記事一覧を入れるarticleがあります。

articleの中にはsectionを2つ置き、それぞれ日付と本文を入れています。footerには著作権表示を入れ、smallで少し小さめの補足テキストとして表示します。

HTMLサンプルの構造を確認する

このHTMLは、次のような構造になっています。

領域HTMLタグ内容
サイト上部headerサイト名とナビゲーション
メニューnav、ul、li、a各ページへのリンク
メイン全体mainページの中心となる領域
レイアウト用のまとまりdivasideとarticleを横並びにするための親要素
補足情報aside、sectionサイドメニューや補足説明
記事情報article、sectionお知らせや更新情報
サイト下部footer、small著作権表示

ここで使っているdiv id="page-contents"は、asideとarticleをまとめて配置するための入れ物です。意味を持つ主要な領域にはmain、aside、articleなどを使い、レイアウト調整用のまとまりとしてdivを使っています。

CSSファイルでデザインを指定する

次に、HTMLの見た目を整えるCSSを作成します。CSSでは、ページ全体の背景、ヘッダーの色、ナビゲーションの横並び、メイン領域の2カラム配置、記事カード、フッターなどを指定します。

ファイル名： site-layout.css

@charset "utf-8";

body {
  margin: 0;
  padding: 0;
  background: #f6f8fa;
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
}

#site-header {
  text-align: center;
  color: #ffffff;
  background-color: #2949d3;
  padding: 0.8em 0 0.4em;
}

#site-header h1 {
  font-size: 2em;
  margin: 0;
  padding: 0.3em 0;
}

#global-menu {
  background-color: #2949d3;
}

#global-menu ul {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

#global-menu li {
  width: 150px;
  line-height: 2.8em;
  border-right: 1px solid #ffffff;
  text-align: center;
}

#global-menu li:last-child {
  border-right: none;
}

#global-menu a {
  color: #ffffff;
  text-decoration: none;
  display: block;
}

#global-menu li:hover {
  background-color: #193083;
}

#page-contents {
  width: 860px;
  margin: 1.5em auto;
  display: flex;
  gap: 2em;
  align-items: flex-start;
}

aside {
  width: 210px;
}

aside section {
  background: #2949d3;
  color: #ffffff;
  padding: 1em;
  border-radius: 6px;
  min-height: 120px;
}

aside h2 {
  margin-top: 0;
  font-size: 1.1em;
}

article {
  flex: 1;
}

article section {
  background: #ffffff;
  margin-bottom: 1.2em;
  padding: 1em;
  border-bottom: 1px solid #cccccc;
  border-radius: 5px;
}

article h3 {
  margin-top: 0;
  color: #2949d3;
}

#site-footer {
  width: 100%;
  background: #e3e7f9;
  text-align: center;
  padding: 1em 0 0.8em;
  color: #5a5a5a;
}

small {
  font-size: 0.93em;
}

ブラウザの表示例

このCSSでは、bodyでページ全体の基本設定を行い、headerやfooterで上下の領域をデザインしています。ナビゲーションにはdisplay: flex;を使い、メニューを横並びにしています。

mainの中にあるpage-contentsにはdisplay: flex;を指定し、asideとarticleを横並びにしています。asideは固定幅、articleはflex: 1;で残りの幅を使うようにしています。

CSSサンプルのポイント

このCSSでは、ページ全体のレイアウトをブロックごとに分けて指定しています。主なポイントを整理すると、次のようになります。

CSS役割
bodyページ全体の余白、背景、文字の基本設定
#site-headerヘッダー全体の背景色と文字配置
#global-menu ulナビゲーションを横並びにする
#global-menu li:hoverメニューにマウスを乗せたときの背景色を変える
#page-contentsasideとarticleを横並びにする
asideサイド情報の横幅を指定する
articleメイン記事部分を残り幅いっぱいに広げる
article section記事ブロックをカードのように見せる
#site-footerフッターの背景色と中央寄せ
small著作権表示の文字サイズを調整する

外部CSSにしておくと、HTMLの構造とCSSのデザインが分かれて見やすくなります。HTMLでは「どの情報をどこに置くか」を確認し、CSSでは「どのように見せるか」を調整できます。

図3：外部CSSで基本レイアウトを整える

この図から分かること

HTMLファイルではページの構造を作り、CSSファイルではその見た目を整えます。外部CSSを使うと、構造とデザインを分けて管理できるため、コードが読みやすくなります。ヘッダー、メニュー、サイド情報、記事、フッターのようにブロックごとに整理すると、基本レイアウトを構築しやすくなります。

navのメニューを横並びにする仕組み

ナビゲーションメニューでは、ulとliを使ってリンクをリスト化しています。ただし、そのまま表示すると縦並びになり、リストの黒丸も表示されます。

そこで、CSSで次のように指定しています。

#global-menu ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

list-style: none;でリストの黒丸を消し、display: flex;でliを横並びにします。justify-content: center;を指定することで、メニュー全体を中央寄せにしています。

また、aにdisplay: block;を指定しているため、リンクのクリックできる範囲が文字だけではなく、メニュー項目の横幅全体に広がります。

#global-menu a {
  display: block;
}

これにより、メニューとして操作しやすくなります。

hoverでメニューに反応を付ける

ナビゲーションでは、li:hoverを使って、マウスを乗せたときに背景色を変えています。

#global-menu li:hover {
  background-color: #193083;
}

hoverは擬似クラスのひとつで、マウスカーソルが要素に乗った状態を表します。メニューにhover効果を付けると、ユーザーがどの項目を選ぼうとしているのか分かりやすくなります。

Webサイトでは、操作できる場所に反応があると、使いやすさが上がります。特にナビゲーションやボタンでは、hoverの変化があるとクリックできることが伝わりやすくなります。

flexでサイド情報と記事を横並びにする

page-contentsにはdisplay: flex;を指定しています。これにより、asideとarticleを横並びにできます。

#page-contents {
  display: flex;
  gap: 2em;
}

gapは、flexの子要素同士の間隔を指定するCSSです。この例では、asideとarticleの間に2emの間隔を作っています。

asideにはwidth: 210px;を指定して固定幅にし、articleにはflex: 1;を指定しています。flex: 1;を指定すると、articleが残りの横幅を使うようになります。

要素指定役割
#page-contentsdisplay: flex;asideとarticleを横並びにする
#page-contentsgap: 2em;2つの領域の間隔を空ける
asidewidth: 210px;サイド情報の幅を固定する
articleflex: 1;残りの幅を記事エリアとして使う

以前はfloatを使って2カラムレイアウトを作ることも多くありましたが、現在はflexを使うほうが分かりやすく、調整もしやすいです。

clearfixについても知っておく

昔のレイアウトでは、floatで横並びを作り、その後にclearfixで回り込みを解除する方法がよく使われていました。clearfixは、floatした要素の影響を親要素の中で終わらせるためのテクニックです。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

この指定では、clearfixが付いた要素の最後に空の疑似要素を作り、clear: both;でfloatを解除します。

今回のCSSサンプルでは、横並びにdisplay: flex;を使っているため、clearfixは必須ではありません。ただし、古いコードや既存サイトではclearfixが出てくることがあります。意味を知っておくと、floatを使ったレイアウトの修正にも対応しやすくなります。

article sectionをカードのように見せる

articleの中にあるsectionには、背景色、余白、角丸、下線を指定しています。

article section {
  background: #ffffff;
  margin-bottom: 1.2em;
  padding: 1em;
  border-bottom: 1px solid #cccccc;
  border-radius: 5px;
}

これにより、各お知らせがひとつのカードのように見えます。背景色を白にし、paddingで内側に余白を作り、border-bottomで区切り線を入れることで、情報のまとまりが分かりやすくなります。

sectionは、内容をテーマごとに分けるタグです。お知らせ一覧では、1件ごとのお知らせをsectionとして分けると、HTMLの構造も見た目も整理しやすくなります。

footerでページ下部の情報をまとめる

footerは、ページ下部の情報をまとめるためのタグです。このサンプルでは、著作権表示をsmallで入れています。

<footer id="site-footer">
  <small>© 2026 Creative Web Studio. All rights reserved.</small>
</footer>

CSSでは、footer全体に背景色、中央寄せ、余白を指定しています。

#site-footer {
  background: #e3e7f9;
  text-align: center;
  padding: 1em 0 0.8em;
}

footerには、著作権表示だけでなく、会社情報、所在地、問い合わせリンク、プライバシーポリシー、利用規約などを入れることもあります。ページの最後に補助情報を整理しておくと、ユーザーが必要な情報を探しやすくなります。

構造とデザインを分けるメリット

HTMLとCSSを分けることには、いくつかの大きなメリットがあります。

メリット内容
コードが読みやすくなるHTMLは構造、CSSは見た目として分けて確認できる
修正しやすいデザイン変更はCSSファイルを中心に行える
再利用しやすい同じCSSを複数ページで使える
チーム制作に向いている構造担当とデザイン担当で分担しやすい
ページ全体の統一感を出しやすい共通のCSSでサイト全体の見た目をそろえられる

特に複数ページのWebサイトでは、外部CSSの利用がとても便利です。トップページ、サービスページ、問い合わせページなどで同じCSSを読み込めば、サイト全体の色や余白、メニューの見た目をそろえやすくなります。

idとclassを使って領域を分かりやすくする

HTMLでは、idやclassを使って要素に名前を付けることができます。CSSでは、その名前を使って特定の領域にスタイルを当てます。

このサンプルでは、site-header、global-menu、page-contents、site-footerなどのidを使っています。これにより、どの領域に対する指定なのかが分かりやすくなります。

名前対象役割
site-headerheaderサイト上部全体
global-menunavメインメニュー
page-contentsdivasideとarticleをまとめる領域
site-footerfooterサイト下部全体

idはページ内で1つだけの要素に使います。何度も使い回すデザインにはclassを使うとよいです。たとえば、複数のカードに同じデザインを当てたい場合は、class="card"のように指定すると再利用しやすくなります。

よく使うタグとCSSプロパティ

Webサイトの基本レイアウトを構築するときによく使うタグとCSSを整理しておきます。

タグ・CSS意味・用途
headerサイト名やナビゲーションをまとめる上部領域
navナビゲーションリンクのまとまり
mainページの主要コンテンツ
aside補足情報やサイドバー
article独立した記事やお知らせのまとまり
section内容の区切り
footerページ下部の情報
small著作権表示や補足テキスト
link外部CSSファイルを読み込む
background背景色を指定する
padding内側の余白を指定する
margin外側の余白を指定する
display: flex子要素を横並びにする
gapflexやgridの子要素間の余白を指定する
border枠線を指定する
border-radius角を丸くする
text-align文字やインライン要素の横位置を指定する
text-decorationリンクの下線などを指定する
:hoverマウスを乗せたときの状態を指定する
.clearfix::afterfloat解除のための疑似要素テクニック

これらのタグやCSSを組み合わせることで、Webサイトの基本的な骨組みとデザインを作れます。

基本レイアウトを構築するときの確認ポイント

Webサイトの基本レイアウトを作るときは、次の点を確認すると進めやすくなります。

確認すること見るポイント
HTMLとCSSを分けているかHTMLは構造、CSSはデザインに集中できているか
headerがあるかサイト名やメニューが分かりやすいか
navが整理されているかメニュー項目がリストで管理されているか
mainが明確かページの中心となる内容が入っているか
asideの役割が自然か補足情報として本文を助けているか
articleとsectionが適切か記事や情報のまとまりが分かりやすいか
footerがあるか著作権表示や補助情報が整理されているか
CSSがブロックごとに整理されているかheader、menu、contents、footerなどが分かれているか

最初はシンプルな構造でかまいません。header、main、footerを作り、次にnavやaside、articleを追加していくと、段階的に理解しやすくなります。

Webサイト制作では構造を先に考える

Webサイトを作るときは、最初に見た目だけを作ろうとすると、あとからHTMLが複雑になりやすいです。まずは、ページに必要な情報を洗い出し、どの情報をどのブロックに入れるのかを考えると、自然に整理された構造になります。

サイト名やメニューはheaderへ、ページの中心になる内容はmainへ、補足情報はasideへ、記事やお知らせはarticleとsectionで整理し、著作権表示や会社情報はfooterへ配置します。このように役割を分けることで、HTMLの意味が分かりやすくなり、CSSも書きやすくなります。

外部CSSを使えば、ページ構造を保ちながら見た目だけを変更できます。色や余白、メニューの見た目、カードのデザインなどをCSS側で調整できるため、保守しやすいWebサイトになります。

Webサイトの基本レイアウトを構築する力は、HTMLとCSSの学習でとても重要です。構造とデザインを分けて考える習慣を身に付けると、ページ全体を見通しながら、分かりやすく整ったWebサイトを作れるようになります。