HTMLとCSSでWebデザインする方法｜2カラム制作を初心者向けに解説

HTMLとCSSでWebページを作りたいものの、「それぞれ何を書くの？」「どう組み合わせればデザインになるの？」と迷うことがありますよね。

結論からいうと、HTMLで文章や画像の構造を作り、CSSで色・余白・大きさ・並び方を整えます。この記事では、HTMLだけの状態からCSSを加え、パソコンでは2カラム、スマートフォンでは1カラムになるページを一緒に作ります。

HTMLとCSSはWebデザインで何を担当する？
今回作るWebページ
作業前に2つのファイルを用意する
HTMLでページの構造を作る
1. HTMLだけではどのように表示される？
CSSで色・余白・2カラムを整える
スマートフォンでは1カラムに切り替える
デザインを自分好みに調整する方法
1. サイドバーを左側へ移動する
2. 色や余白を変更する
HTMLとCSSが反映されないときの確認点
HTMLとCSSでWebデザインするときの考え方
まとめ

HTMLとCSSはWebデザインで何を担当する？

HTML（エイチティーエムエル）は、見出し・本文・メニューなどに意味を付けて、ページの骨組みを作る言語です。一方、CSS（シーエスエス）は、その骨組みに色や余白などの見た目を指定します。

HTML：「ここは見出し」「ここは本文」「ここは補足情報」と構造を決める
CSS：文字色、背景色、余白、横並び、画面幅に応じた配置を決める

CSSだけでは、装飾する文章や要素がありません。HTMLだけでも内容は読めますが、余白や配置が初期状態のままです。2つを組み合わせることで、読みやすく目的が伝わるWebデザインになります。

今回作るWebページ

今回は、記事が並ぶメイン領域とカテゴリーを置くサイドバーを横に並べた「2カラム」のページを作ります。完成すると、パソコンでは次のように表示されます。

2カラムは、ブログや企業サイトでよく使われる構成です。この記事では、狭い画面で無理に横並びにせず、スマートフォンでは縦に並べ替えます。

作業前に2つのファイルを用意する

まず、同じフォルダにindex.htmlとstyle.cssを作成します。HTMLとCSSを別ファイルにすると、文章の構造とデザインを分けて管理でき、後から修正しやすくなります。

作業用のフォルダを1つ作ります。
フォルダ内にindex.htmlを作ります。
同じ場所にstyle.cssを作ります。
2つのファイルをVisual Studio Codeなどのエディターで開きます。

ファイル名の末尾が.txtになっていないかも確認してください。たとえばindex.html.txtでは、HTMLファイルとして正しく開けません。

HTMLでページの構造を作る

index.htmlへ、次のコードを記述します。ファイル全体を置き換えて試せる完成形です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Green Life Journal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Green Life Journal</h1>
    <p>暮らしを少し心地よくするヒント</p>
  </header>

  <div class="layout">
    <main>
      <h2>季節のおすすめ</h2>
      <p>HTMLで文章の意味と順番を組み立て、CSSで色・余白・並び方を整えたページです。</p>

      <div class="cards">
        <article class="card">
          <h3>部屋に緑を</h3>
          <p>初心者でも育てやすい植物を紹介します。</p>
        </article>
        <article class="card">
          <h3>心地よい朝</h3>
          <p>無理なく続けられる朝時間の作り方です。</p>
        </article>
      </div>
    </main>

    <aside>
      <h2>カテゴリー</h2>
      <ul>
        <li>暮らし</li>
        <li>植物</li>
        <li>読みもの</li>
      </ul>
    </aside>
  </div>
</body>
</html>

<main>にはページの中心となる内容、<aside>には補足的な情報を入れています。どちらもlayoutクラスを付けた<div>の内側にあるため、あとでCSSからまとめて配置できます。

<link rel="stylesheet" href="style.css">は、HTMLからCSSファイルを読み込む記述です。この行は<head>内へ入れ、hrefのファイル名を実際のCSSと一致させます。

HTMLだけではどのように表示される？

style.cssが空の状態でindex.htmlをブラウザで開くと、次のように縦並びで表示されます。内容と順序は分かりますが、2カラムやカードの見た目にはなっていません。

CSSで色・余白・2カラムを整える

次に、style.cssへ以下を記述します。CSSは「どの要素を」「どう見せるか」を、セレクターとプロパティで指定します。

* {
  box-sizing: border-box;
}

body {
  max-width: 960px;
  margin: 0 auto;
  padding: 36px;
  color: #203040;
  font-family: sans-serif;
}

.site-header {
  margin-bottom: 24px;
  padding: 22px 26px;
  border-radius: 18px;
  background: linear-gradient(120deg, #0d6e8a, #38a3a5);
  color: #fff;
}

.site-header h1,
.site-header p {
  margin-top: 0;
}

.layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

main {
  flex: 1;
  min-width: 0;
}

aside {
  width: 210px;
  padding: 20px;
  border-radius: 16px;
  background: #f1f7f8;
}

h2,
h3 {
  color: #0d6079;
}

p {
  line-height: 1.75;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.card {
  padding: 18px;
  border: 1px solid #d7e5e9;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgb(20 74 90 / 8%);
}

display: flexを指定した要素の直下にあるmainとasideが横並びになります。gapは2つの領域の間隔です。

mainのflex: 1は、サイドバーを除いた残りの幅を使う指定です。asideはwidth: 210pxで幅を決めているため、割合を手計算する必要がありません。

保存してブラウザを再読み込みすると、先ほど掲載した2カラムの画面になります。変化が見えないときは、ブラウザで強制再読み込みするか、CSSのファイル名と読み込み位置を確認してください。

スマートフォンでは1カラムに切り替える

パソコン向けの横並びをそのまま狭い画面へ表示すると、本文が細くなって読みにくくなります。そこで、style.cssの末尾へメディアクエリを追加します。

HTMLとCSSで作ったWebページをスマートフォン向けの1カラムで表示した画面

画面幅が600px以下になると、メイン領域、カード、サイドバーが縦に並びます。画像のように、文章を読むための幅を確保できます。

/* style.cssの末尾へ追加 */
@media (max-width: 600px) {
  body {
    padding: 22px;
  }

  .layout {
    display: block;
  }

  aside {
    width: 100%;
    margin-top: 24px;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}

メディアクエリは、画面幅などの条件に応じてCSSを切り替える仕組みです。HTMLを2つ用意するのではなく、同じ内容をCSSで並べ替えるのがポイントです。

デザインを自分好みに調整する方法

サイドバーを左側へ移動する

HTMLの順番を変えずにサイドバーを左へ移したい場合は、.layoutへflex-directionを追加します。

.layout {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 24px;
}

ただし、見た目と読み上げ順が異なると分かりにくくなる場合があります。サイドバーを常に左へ置く設計なら、HTMLでもasideを先に書く方法を検討してください。

色や余白を変更する

ヘッダーの色は.site-headerのbackground、カード間の距離は.cardsのgap、内側の余白はpaddingで変更できます。一度に多く変えず、1つ変更するたびにブラウザを再読み込みすると原因を追いやすくなります。

HTMLとCSSが反映されないときの確認点

CSSがまったく反映されない：href="style.css"の名前と保存場所を確認します。
2カラムにならない：mainとasideが.layoutの直下にあるか、display: flexのつづりを確認します。
一部だけ反映されない：セレクターの先頭に必要な.や、宣言末尾の;が抜けていないか確認します。
スマホで横にはみ出す：viewportのmetaタグとメディアクエリがあるか確認します。
変更前のままに見える：ファイルを保存し、キャッシュを無視した再読み込みを試します。

HTMLとCSSでWebデザインするときの考え方

最初から複雑な見た目を完成させようとすると、どこで間違えたのか分からなくなりがちです。まずHTMLだけで内容と順番を確認し、次に大きな配置、最後に色や影などの細かな装飾を追加しましょう。

HTMLで見出しや本文を意味の合うタグに入れる
CSSを読み込み、余白や文字を整える
FlexboxやGridで大きな配置を作る
スマートフォン幅を確認する
色、枠線、影などを仕上げる

この順番なら、「内容の問題か」「CSSの問題か」を切り分けやすくなります。見た目だけでなく、見出しの順序や読みやすさもWebデザインの一部です。

まとめ

HTMLはページの構造、CSSは見た目を担当します。今回の例では、HTMLでmainとasideを用意し、CSSのFlexboxで2カラムにしました。

まずHTMLだけで表示し、CSSを追加し、最後にメディアクエリでスマートフォンへ対応すると、初心者でも変化を確認しながら進められます。コードをそのまま試したあと、色や余白を1か所ずつ変えて、自分のデザインへ育ててみてください。