【6日でできるHTML入門】CSSのまとめ

１．CSSの指定方法

1.1. セレクター（指定対象）の書き方

セレクター説明
タグ名 {…}ページ内の該当タグすべてに適用
タグ名.クラス名 {…}タグ名かつクラス名を持つ要素だけに適用
.クラス名 {…}クラス名を持つすべての要素に適用
#ID名 {…}ID名を持つ要素ひとつだけに適用

1.2. CSS記述の場所

方法書き方例特徴
style 属性<p style="color:red;">…</p>要素ひとつずつ手軽。ただし繰り返しに不向き。
<style> 内部スタイルシートhtml<br><head><style>…</style></head>ページ単位でまとめられる。外部シートより優先度高。
外部スタイルシート<link rel="stylesheet" href="style.css">複数ページで共有可能。最も再利用性に優れる。

２．CSS指定の優先順位

優先度（高→低）例
1. style 属性<p style="font-size:20pt;">…</p>
2. ID セレクター#header {…}
3. クラス／擬似クラス.btn {…} / a:hover {…}
4. タグ／タグ＋クラスp {…} / p.note {…}
5. 外部・内部スタイルシート<style> 内／外部シート
6. ブラウザ標準デフォルトの青リンク、下線 など

３．文字書式のCSS

プロパティ名説明
color文字色を名前（red）や16進数（#FF0000）で指定
font-size文字サイズを単位付き数値（16pt / 1.2em）で指定
font-familyフォントを指定（"MS Pゴシック", sans-serif）
font-weight太さを指定（normal/bold/100～900）
font-style斜体を指定（normal/italic/oblique）
font書式を一括指定（例：italic bold 12pt/1.5 serif）
text-decoration下線・上線・取り消し線（none/underline/overline/line-through）
line-height行間を指定（倍率1.5または単位付き24px）
text-align行揃えを指定（left/center/right）
letter-spacing文字間隔を単位付き数値（2px）で指定
word-spacing単語間隔を単位付き数値（4px）で指定

４．背景のCSS

プロパティ名説明
background-color背景色を名前（lightblue）や16進数（#CCEEFF）で指定
background-image背景画像を指定（url("pattern.png")）
background-repeat繰り返し方法（repeat/repeat-x/repeat-y/no-repeat）
background-attachment固定化（fixed） or スクロール（scroll）
background-position位置指定（left top/center center/単位付き10px 20px）

５．ボックスのCSS（サイズ・枠線・余白）

プロパティ名説明
width横幅を単位付き数値（400px/50%）で指定
height高さを単位付き数値（200px/auto）で指定
border枠線を線種（solid/dashedなど）・太さ（2px）・色（#333333）で一括指定
border-top/right/bottom/left上右下左の枠線を個別に指定
padding内部余白（枠線の内側）を単位付き数値（10px）または複数値（10px 20px）で指定
margin外部余白（枠線の外側）を単位付き数値（10px）または複数値（20px auto）で指定
margin-top/right/bottom/left上右下左の外部余白を個別に指定

６．角丸・影・半透明のCSS

プロパティ名説明
border-radius四隅の丸みを単位付き数値（8px）で指定
box-shadow影を追加（横オフセット・縦オフセット・ぼかし半径・拡大半径・色）をスペース区切りで指定
box-shadow: inset …inset を最後に追加すると内側に影を表示
opacity不透明度を0～1の数値（0.5）で指定。0は透明、1は不透明

７．回り込み（float/clear）のCSS

プロパティ名説明
float要素を左（left）または右（right）に寄せ、テキストなどを回り込ませる
clear回り込みを解除（left/right/both/none）。次の要素を回り込み外に配置

８．リンクのCSS（疑似クラスを含む）

セレクター意味
a:link未訪問のリンク
a:visited訪問済みのリンク
a:hoverマウスオーバー時
a:activeクリック中
a { text-decoration:none; }下線を消す色・サイズも同様に指定可能

▶︎ 画像リンクの枠線を消すには

a img { border:none; }

９．範囲指定タグ（div/span）の使い方

タグ種類用途
<div>ブロックレベル要素見た目や位置をまとめて指定したい範囲を囲む
<span>インライン要素文章中の一部文字だけスタイルを変えたい範囲を囲む

１０．CSS総まとめのサンプル

　以下は、本ステップで学習した各種CSS（文字書式・背景・ボックスモデル・角丸・影・半透明・回り込み・リンク・範囲指定タグ）をまとめて使用したサンプルHTMLです。単独で実行可能なので、保存してブラウザでご確認ください。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

css-summaryダウンロード
profile.png

ファイル名： lesson20.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>✨ポートフォリオ風サンプル</title>
  <style>
    /* 全体背景と文字の基本設定 */
    body {
      font-family: sans-serif;
      background-color: #f0f8ff;
      margin: 0; padding: 0;
    }
    /* ヘッダーのボックス（角丸＋影＋内部余白） */
    header {
      background-color: #0066cc;
      color: #ffffff;
      padding: 20px;
      text-align: center;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      margin: 10px;
    }
    /* リンクの疑似クラス指定 */
    nav a:link,
    nav a:visited {
      color: #ffd700;
      text-decoration: none;
      margin: 0 10px;
      font-weight: bold;
    }
    nav a:hover {
      color: #ffffff;
      background-color: #ff4500;
      padding: 4px 8px;
      border-radius: 4px;
    }
    /* プロフィール画像の回り込み＋影＋角丸 */
    .profile {
      float: left;
      margin: 10px;
      width: 200px;
    }
    .profile img {
      width: 100%;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    /* メインコンテンツ */
    .content {
      margin: 10px 10px 10px 230px; /* 回り込み解除 */
    }
    .content h2 {
      color: #0066cc;
    }
    .content p {
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .content p span.highlight {
      color: #ff4500;
      font-weight: bold;
    }
    /* フッターのクリアと背景 */
    footer {
      clear: both;
      text-align: center;
      padding: 10px;
      background-color: #eeeeee;
      margin: 10px;
    }
  </style>
</head>
<body>
  <header>
    <h1>✨私のポートフォリオ</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <div class="profile">
    <img src="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/CSSコーディング</li>
      <li>レスポンシブデザイン</li>
      <li>JavaScriptによる動的UI</li>
    </ul>
  </div>

  <footer>
    © 2025 山田花子
  </footer>
</body>
</html>

ブラウザの出力例

HTMLタグ解説

タグ用途
<header>ページ上部の見出しエリア。ブロックレベル要素で囲むことでまとめてスタイル設定が可能。
<nav>ナビゲーションリンクをまとめる要素。疑似クラスでリンクの状態を切り替え。
<a>リンク要素。:link/:visited/:hoverなどで未訪問・訪問済み・マウスオーバー時の書式を指定。
<div class="…">block要素のグループ化に使用。ここではプロフィールエリア（.profile）とメインコンテンツ（.content）を分けるのに利用。
<img>インライン要素。回り込み（float:left）や角丸・影を指定。
<h1>, <h2>見出しタグ。文字色と背景、余白などをCSSで整形。
<p>段落タグ。文字の行間とマージン、内部の一部文字に<span>を使って強調。
<span>インライン要素。文章中の一部にclass="highlight"を付与し、色・太さを設定。
<footer>ページ下部の著作権表示などをまとめるブロック要素。

このサンプルでは以下のCSSを活用しています。

  1. 背景・文字書式：background-color／color／font-family
  2. ボックスモデル：margin／padding／border-radius／box-shadow
  3. 回り込み：.profile { float:left; } & footer { clear:both; }
  4. リンクの疑似クラス：a:hover でマウスオーバー装飾
  5. spanタグによる部分強調：.highlight クラス

　これらを組み合わせることで、モダンで見やすいポートフォリオ風ページを実現できます。ぜひご自身でも各値を調整し、デザインを楽しんでみてください！

まとめ

  • セレクター と 書き方 を使い分け、スタイルの再利用性と保守性を高めよう
  • 優先順位 を意識して、思いどおりの表示に調整しよう
  • 文字書式・背景・ボックスモデル の基本を押さえ、レイアウトの骨格を固めよう
  • 角丸・影・半透明・回り込み は演出と配置の要。適材適所で活用しよう
  • リンク・範囲指定タグ をマスターして、インタラクションと構造を制御しよう

この表と構成を思い出しながら、ぜひ自分の作品にCSSの力を存分に活かしてください！