6日でできる 新HTML入門｜CSSのまとめ

6日でできる 新HTML入門｜CSSのまとめ

CSSの基本をつなげて理解しよう。文字、背景、余白、枠線、リンク、レイアウトを組み合わせて、見やすいWebページを作る力を身につける。

CSSは、HTMLで作ったページに見た目を与えるための言語です。HTMLが文書の構造を作る役割を持つのに対して、CSSは文字の色や大きさ、背景、余白、枠線、画像の配置、リンクの見た目などを整える役割を持っています。

ここまで学習してきたCSSの内容は、一つひとつを見ると小さな指定に見えるかもしれません。たとえば、colorで文字色を変える、background-colorで背景色を付ける、marginで要素同士の間隔を空ける、border-radiusで角を丸くする、といった指定です。しかし、これらを組み合わせることで、シンプルなHTMLページを見やすく、使いやすく、印象のよいWebページへ変えることができます。

CSSを理解するうえで大切なのは、どの要素に、どのCSSを、どの場所で指定するのかを整理して考えることです。セレクターで対象を決め、プロパティで何を変えるかを指定し、値でどのように変えるかを決めます。この基本の形を押さえておくと、文字書式、背景、ボックスモデル、リンク、回り込みなど、さまざまなCSSを同じ考え方で扱えるようになります。

ここでは、CSSの指定方法、優先順位、文字書式、背景、ボックスモデル、角丸、影、半透明、回り込み、リンク、divタグとspanタグの使い方までを、総復習として整理します。最後には、これらのCSSを組み合わせたポートフォリオ風のサンプルHTMLも確認します。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

designer-profile.png

CSSの指定対象はセレクターで決める

CSSを書くときは、まずどのHTML要素にスタイルを適用するのかを決めます。この指定対象を表す部分をセレクターと呼びます。

たとえば、pにCSSを指定すると、ページ内のpタグすべてが対象になります。.noteのようにクラス名で指定すると、noteというclassが付いた要素だけが対象になります。#headerのようにID名で指定すると、headerというidが付いた要素を対象にできます。

よく使うセレクターの書き方

タグ名で指定すると広い範囲にCSSが適用されます。classで指定すると、必要な要素だけにCSSを当てやすくなります。idはページ内で基本的に1つだけの要素に使うため、特別な領域を指定したいときに使います。

セレクター指定の例

p {
  line-height: 1.8;
}

p.note {
  color: #CC0000;
}

.highlight {
  background-color: #FFF3CD;
}

#main-title {
  font-size: 32px;
}

pはすべての段落、p.noteはnoteクラスが付いたpタグ、.highlightはhighlightクラスが付いたすべての要素、#main-titleはmain-titleというidを持つ要素に適用されます。

CSSを書く場所を理解する

CSSは、主に3つの場所に書けます。HTMLタグのstyle属性に直接書く方法、HTMLファイル内のstyleタグにまとめて書く方法、外部CSSファイルに書いてlinkタグで読み込む方法です。

CSSを書く場所の比較

学習用の短いサンプルでは、HTMLとCSSを同じファイルで確認できる内部スタイルシートが分かりやすいです。一方、実際のWebサイトでは、外部スタイルシートを使うことが多くなります。複数ページで同じデザインを使い回せるため、修正もしやすくなります。

style属性は手軽ですが、同じ指定を何度も書くことになりやすく、管理が大変になります。基本的には、学習中の確認や一時的な指定を除き、styleタグや外部CSSにまとめるほうが扱いやすくなります。

図1：CSSは対象と書く場所を分けて考える

この図から分かること

CSSでは、まずセレクターで指定対象を決めます。そのうえで、CSSをstyle属性に書くのか、styleタグにまとめるのか、外部CSSファイルに分けるのかを考えます。対象と記述場所を分けて理解すると、CSSの管理がしやすくなります。

CSS指定の優先順位を理解する

CSSでは、同じ要素に複数の指定が重なることがあります。たとえば、pに文字色を指定し、さらに.noteにも別の文字色を指定した場合、どちらが反映されるのかを理解しておく必要があります。

CSSには優先順位があります。大まかには、より具体的に指定したCSSほど優先されます。

CSSの優先順位の目安

同じ強さの指定が複数ある場合は、基本的に後から書かれたCSSが優先されます。内部スタイルシートと外部スタイルシートのどちらが優先されるかも、読み込む順番や書かれた位置によって変わります。

たとえば、外部CSSを読み込んだあとにstyleタグで同じ対象を指定すると、後に書かれたstyleタグの指定が反映されやすくなります。CSSが思った通りに効かないときは、セレクターの具体性と書かれている順番を確認すると原因を見つけやすくなります。

文字書式のCSSを整理する

文字の見た目を整えるCSSは、Webページの読みやすさに直結します。文字色、文字サイズ、フォント、太さ、斜体、行間、文字揃えなどを適切に指定することで、本文や見出しが読みやすくなります。

文字書式でよく使うCSS

本文では、font-sizeとline-heightのバランスが特に大切です。文字が小さすぎたり、行間が詰まりすぎたりすると、文章が読みにくくなります。日本語の本文では、line-heightを1.6から1.9程度にすると読みやすいことが多くあります。

見出しでは、font-size、font-weight、colorを調整すると、本文との違いが分かりやすくなります。見出しが目立つと、ページ全体の構成も把握しやすくなります。

背景のCSSを整理する

背景は、ページ全体の雰囲気を決める大切な要素です。背景色を付けるだけでも、ページの印象は大きく変わります。また、背景画像を使うことで、テーマ性や季節感を表現することもできます。

背景でよく使うCSS

背景画像を使うときは、文字の読みやすさに注意します。背景画像と文字が重なると読みにくくなる場合があります。そのようなときは、本文の後ろに半透明の背景色を付けたり、背景画像を淡いものにしたりすると読みやすくなります。

ボックスモデルを理解する

CSSでレイアウトを作るときに欠かせないのが、ボックスモデルです。HTMLの要素は、内容を表すcontent、その内側余白であるpadding、枠線であるborder、外側余白であるmarginを持っています。

ボックスモデルの領域

widthとheightは、初期状態ではcontentの大きさを指定します。そこにpaddingやborderを加えると、実際に表示されるサイズは指定したwidthやheightより大きくなることがあります。

ボックス関連でよく使うCSS

box-sizing: border-box;を指定すると、widthやheightの中にpaddingとborderを含めて計算できます。カードやボックスを並べるレイアウトでは、サイズ計算が分かりやすくなるため、よく使われます。

図2：文字・背景・ボックスモデルは見た目の土台になる

この図から分かること

CSSでは、文字書式、背景、ボックスモデルを組み合わせて見た目を整えます。文字の色や大きさを調整し、背景色で範囲を分かりやすくし、paddingやmarginで余白を作り、borderで情報のまとまりを示します。これらはWebデザインの基本になる指定です。

角丸・影・半透明のCSSを整理する

角丸、影、半透明は、Webページにやわらかさや奥行きを加えるCSSです。カード、ボタン、画像、メッセージボックスなどに使うと、見た目が整いやすくなります。

装飾でよく使うCSS

border-radiusは、要素の角を丸くしてやわらかい印象にします。box-shadowは影を付けて、要素が少し浮き上がっているように見せます。opacityは要素全体を半透明にするため、文字も画像も一緒に薄くなります。背景だけを半透明にしたい場合は、background-colorにrgbaを使うと読みやすさを保ちやすくなります。

装飾は使いすぎると画面が重く見えることがあります。影は薄く自然に、角丸はページの雰囲気に合わせて、半透明は文字が読める範囲で使うとよいでしょう。

回り込みのCSSを整理する

画像の横に文章を回り込ませたいときは、floatを使います。floatを指定すると、画像やボックスを左または右に寄せ、その周囲に後続のテキストを流し込めます。

回り込みで使うCSS

float: left;を指定すると、要素は左に寄り、文章は右側に回り込みます。float: right;を指定すると、要素は右に寄り、文章は左側に回り込みます。

回り込みを使った後は、clearで解除することが大切です。clear: both;を指定すると、左右どちらのfloatの影響も解除できます。次の見出しやフッターが画像やカードの横に入り込まないようにするために使います。

リンクのCSSを整理する

リンクは、ユーザーがページを移動したり、情報を開いたりするための重要な要素です。CSSでは、リンクの色、下線、ホバー時の見た目、クリック中の見た目などを調整できます。

リンクの擬似クラス

リンクの下線を消したい場合は、text-decoration: none;を使います。ただし、下線を消すと通常の文章と見分けにくくなることがあります。そのため、文字色や背景色、ホバー時の変化などで、リンクだと分かる工夫を入れることが大切です。

画像リンクでは、aタグの中にimgタグを入れます。画像リンクの余計な枠線を消したい場合は、a imgやimgに対してborder: none;を指定します。

divタグとspanタグを整理する

CSSを適用する範囲を作るときに便利なのが、divタグとspanタグです。

divタグとspanタグの違い

divタグは、カード、プロフィール欄、メインコンテンツ、サイドバーなど、大きなまとまりを作るときに使います。spanタグは、文章の中の一部だけ色を変えたり、太字にしたりするときに使います。

たとえば、プロフィール全体を囲むならdivを使います。文章の中の名前だけ色を変えるならspanを使います。

CSS総復習のサンプルHTML

ここまでの内容を組み合わせたサンプルHTMLを確認します。この例では、文字書式、背景色、余白、枠線、角丸、影、半透明、回り込み、リンクの擬似クラス、divタグ、spanタグをまとめて使っています。

ファイル名： Lesson20-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ポートフォリオ風サンプル</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #F0F8FF;
      color: #333333;
      margin: 0;
      padding: 0;
      line-height: 1.7;
    }

    header {
      background-color: #0066CC;
      color: #FFFFFF;
      padding: 24px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
      margin: 12px;
    }

    header h1 {
      margin: 0 0 12px;
      font-size: 30px;
      letter-spacing: 1px;
    }

    nav a:link,
    nav a:visited {
      color: #FFF3A0;
      text-decoration: none;
      margin: 0 10px;
      font-weight: bold;
      padding: 4px 8px;
      border-radius: 5px;
    }

    nav a:hover {
      color: #FFFFFF;
      background-color: #FF7043;
    }

    nav a:active {
      color: #222222;
      background-color: #FFE082;
    }

    .profile {
      float: left;
      width: 200px;
      margin: 14px;
      padding: 12px;
      background-color: rgba(255, 255, 255, 0.85);
      border: solid 1px #CCCCCC;
      border-radius: 12px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      text-align: center;
      box-sizing: border-box;
    }

    .profile img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
    }

    .profile p {
      margin: 10px 0 0;
      font-weight: bold;
      color: #0066CC;
    }

    .content {
      margin: 14px 14px 14px 240px;
      padding: 18px;
      background-color: rgba(255, 255, 255, 0.92);
      border-left: solid 6px #0066CC;
      border-radius: 10px;
      box-sizing: border-box;
    }

    .content h2 {
      color: #0066CC;
      border-bottom: solid 2px #B3D7FF;
      padding-bottom: 6px;
      margin-top: 0;
    }

    .content p {
      margin-bottom: 16px;
    }

    .content span.highlight {
      color: #FF4500;
      font-weight: bold;
      background-color: #FFF3E0;
      padding: 2px 4px;
      border-radius: 4px;
    }

    ul {
      padding-left: 24px;
    }

    li {
      margin-bottom: 6px;
    }

    footer {
      clear: both;
      text-align: center;
      padding: 12px;
      background-color: #EEEEEE;
      margin: 12px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <header>
    <h1>私のポートフォリオ</h1>
    <nav>
      <a href="#">ホーム</a>
      <a href="#">プロフィール</a>
      <a href="#">お問い合わせ</a>
    </nav>
  </header>

  <div class="profile">
    <img src="designer-profile.png" alt="プロフィール写真">
    <p>佐藤みなみ</p>
  </div>

  <div class="content">
    <h2>自己紹介</h2>
    <p>
      こんにちは。私はWeb制作を学んでいる
      <span class="highlight">フロントエンド学習者</span>
      です。HTMLで構造を作り、CSSで見やすく使いやすいページに整えることを大切にしています。
    </p>

    <h2>学習中のスキル</h2>
    <p>現在は、次のような内容を中心に学習しています。</p>
    <ul>
      <li>HTMLによる文書構造の作成</li>
      <li>CSSによる文字、背景、余白、枠線の調整</li>
      <li>リンクや画像を使ったWebページの装飾</li>
    </ul>
  </div>

  <footer>
    © 2026 佐藤みなみ
  </footer>
</body>
</html>

ブラウザの表示例

ページ上部には青いヘッダーが表示され、ナビゲーションリンクは通常時とマウスオーバー時で見た目が変わります。左側には丸いプロフィール画像が配置され、本文エリアは右側に表示されます。プロフィール欄には角丸、影、半透明の背景が使われ、本文中の一部の言葉はspanタグで強調されています。フッターにはclear: both;が指定されているため、回り込みの影響を受けずに下部へ表示されます。

図3：CSSを組み合わせて1つのページを完成させる

この図から分かること

CSSは、1つのプロパティだけで完成するものではなく、複数の指定を組み合わせてページ全体を整えます。文字書式、背景、余白、枠線、角丸、影、回り込み、リンク、spanによる強調などを組み合わせることで、シンプルなHTMLを見やすいWebページへ仕上げられます。

サンプルで使っているHTMLタグ

このサンプルで使っている主なHTMLタグを整理します。

headerはページの上部をまとめるタグです。navはリンクメニューをまとめるタグです。aタグには擬似クラスを使って、通常時、訪問済み、マウスオーバー時、クリック中の見た目を指定できます。

divタグは、プロフィール欄や本文エリアのようなまとまりを作るために使っています。spanタグは、文章の中の一部分だけを強調するために使っています。

imgタグには、width、border-radius、box-shadowを指定して、画像サイズ、丸い形、影を設定しています。footerにはclear: both;を指定し、floatの回り込みを解除しています。

サンプルで使っているCSSの確認

このサンプルでは、これまで学習したCSSをまとめて使っています。

CSSは、単独の指定だけでなく、組み合わせによって効果を発揮します。たとえば、プロフィール欄では、background-color、border、border-radius、box-shadow、float、margin、paddingを組み合わせています。これにより、左側に配置されたカード型のプロフィール欄が作られています。

本文エリアでは、marginを使ってプロフィール欄の横に配置し、border-leftで左側に強調線を付けています。span.highlightでは、文章中の一部分だけに色、太字、背景色、角丸を指定しています。

CSSを使うときに意識したいこと

CSSを書くときは、いきなり細かい装飾から始めるよりも、全体の構造を見ながら順番に整えていくと分かりやすくなります。

まず、bodyに基本のフォントや背景色を指定します。次に、header、content、footerなどの大きなまとまりを整えます。そのあとで、見出し、段落、リンク、画像、強調部分などの細かな見た目を調整します。

また、同じデザインを複数の場所で使いたい場合は、classを活用します。class名は、見た目だけでなく役割が分かる名前にすると、あとから見直しやすくなります。たとえば、highlight、profile、content、button-linkのような名前です。

CSSが思った通りに反映されないときは、次の点を確認すると原因を見つけやすくなります。

CSSは、学んだプロパティを一つずつ覚えるだけでなく、どの場面でどれを使うかを考えながら練習することが大切です。文字、背景、余白、枠線、リンク、画像、回り込みを組み合わせられるようになると、HTMLページの見た目を自分の意図に合わせて整えられるようになります。