7-03 CSSでデザインを整える

2025年8月7日

📚 今日学ぶこと

CSS（Cascading Style Sheets）の基本を理解する
色の指定方法を覚える
フォントの設定を学ぶ
レイアウトの調整方法を身につける
リストタグとそのデザインを学ぶ

🎨 1. CSSとは？

CSSの役割

CSS（Cascading Style Sheets）は、Webページ上にあるテキストや画像などの色や大きさ、配置、スタイルなどを指定するための言語です。

HTMLとCSSの関係

HTML: 内容・構造（建物の骨組み）
CSS: 見た目・デザイン（建物の装飾）

CSSを使う前と後の違い

CSS使用前: 白い背景、黒い文字、基本フォント
     ↓
CSS使用後: 色鮮やかな背景、美しいフォント、整ったレイアウト

CSSの基本文法

セレクタ {
    プロパティ: 値;
    プロパティ: 値;
}

例：

h1 {
    color: blue;
    font-size: 24px;
}

主なプロパティの例

プロパティ	意味	値の例
`color`	文字の色	`red`, `blue`, `#ff0000`
`font-size`	文字の大きさ	`16px`, `20px`, `large`
`background-color`	背景色	`yellow`, `lightblue`
`margin`	外側の余白	`10px`, `20px`
`padding`	内側の余白	`5px`, `15px`
`border`	境界線	`1px solid black`

📝 覚え方：

セレクタ = 装飾する対象（どの要素に）
プロパティ = 装飾の種類（何を：色、サイズ、余白など）
値 = 装飾の具体的内容（どのように：赤、20px、太字など）

📝 2. CSSの適用方法

HTMLファイルにCSSを適用する場合

HTMLファイルに直接CSSのコードを記述する方法もありますが、通常は別のCSSファイルを作成して読み込む方法を使用します。

CSSの3つの適用方法

1. 外部スタイルシート（推奨）

別のCSSファイルを読み込む方法

HTML側（lesson3.html）:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>第3時間目の練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Main heading -->
    <h1>見出し</h1>
    <!-- Paragraph text -->
    <p>段落のテキストです。</p>
</body>
</html>

CSS側（style.css）:

/* This is CSS file */
h1 {
    color: green;
    font-size: 32px;
}

/* Paragraph style */
p {
    color: blue;
    font-size: 16px;
}

/* Body style */
body {
    background-color: #f0f0f0;
    font-family: "Yu Gothic", sans-serif;
}

📝 ポイント：

HTMLのコメント：
CSSのコメント：/* comment */
コメントは実際の表示には影響しません

2. 内部スタイルシート

ひとつひとつのHTMLファイルの<head>内に記述する方法。ファイルが一つだけならこれで十分。

<style>
    h1 {
        color: blue;
        font-size: 28px;
    }
</style>

3. インラインスタイル

個々のHTMLタグに直接記述する方法。特定の部分のスタイルを変えたいときには有効だが、すべてのタグに個別指定するのは面倒。

<h1 style="color: red; font-size: 30px;">見出し</h1>

💡 今回の授業では外部スタイルシートのみを使用します。
理由： 複数のファイルで同じCSSファイルを読み込むことができ、サイトの統一感が生み出されることから、実際の制作現場で最もよく使われる方法だからです。

🌈 3. 色の指定

色の指定方法

VS codeでは、CSSのファイル内で色の指定が簡単にできます。

色名での指定

h1 {
    color: red;
    background-color: yellow;
}

主な色名:

red, blue, green, yellow, orange, purple, pink
black, white, gray, silver
navy, maroon, olive, lime

16進数カラーコード

微妙な色合いを指定するときには、「16進数カラーコード」で指定します。Red, Green, Blue の順に2桁が割り当てられていて、\(16\times 16=256\)で指定します。
赤 #ff0000
緑 #00ff00
青 #0000ff

h1 {
    color: #ff0000;        /* 赤 */
    background-color: #0066cc;  /* 青 */
}

実習：色の練習

CSSで色指定の練習をしましょう。以下の内容で新しいファイルを作成し、それぞれ色を変えてみてください：

colors.html:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>色の練習</title>
    <link rel="stylesheet" href="colors.css">
</head>
<body>
    <h1>青い見出し</h1>
    <h2>オレンジの見出し</h2>
    <p>緑の段落文字</p>
</body>
</html>

colors.css:

h1 {
    color: blue;
    background-color: lightblue;
}

h2 {
    color: #ff6600;
    background-color: #ffffcc;
}

p {
    color: darkgreen;
}

📝 4. フォントの設定

フォント関連プロパティ

VS codeでは、フォントの指定も簡単にできます。

フォントサイズ

h1 {
    font-size: 32px;   /* ピクセル指定 */
    font-size: 2em;    /* 相対サイズ */
    font-size: large;  /* キーワード指定 */
}

フォントファミリー

h1 {
    font-family: "Arial", "Helvetica", sans-serif;
}

p {
    font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

Web上で一般的な日本語フォント

フォント名	特徴	対応OS
“Yu Gothic”	読みやすいゴシック体	Windows, Mac
“Hiragino Sans”	美しいゴシック体	Mac
“Meiryo”	Windowsの標準フォント	Windows
“MS Gothic”	古い標準フォント	Windows
“Arial”	英語フォント	すべて
sans-serif	フォールバック用	すべて

💡 ポイント： 複数のフォントを指定して、どのOSでも表示できるようにします。

フォントの選択順序

複数のフォントを指定した場合、ブラウザは左から順番にチェックして、最初に見つかったフォントを使用します。

/* 選択順序の例 */
body {
    font-family: "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
}

選択の流れ：

“Yu Gothic” があるかチェック → あれば使用
なければ “Hiragino Sans” があるかチェック → あれば使用
なければ “Meiryo” があるかチェック → あれば使用
どれもなければ sans-serif（システムの標準ゴシック体）を使用

OS別の実際の選択例

OS	選択されるフォント
Windows 10/11	Yu Gothic
Mac	Hiragino Sans
古いWindows	Meiryo
その他	sans-serif

💡 これが「フォントフォールバック」という仕組みです。

/* 推奨の日本語フォント設定 */
body {
    font-family: "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
}

フォントスタイル

h2 {
    font-weight: bold;     /* 太字 */
    font-style: italic;    /* 斜体 */
    text-decoration: underline;  /* 下線 */
}

実習：フォントの練習

CSSでフォント指定の練習をしましょう。以下の内容で新しいファイルを作成し、それぞれフォントスタイルを変更してください：

fonts.html:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォントの練習</title>
    <link rel="stylesheet" href="fonts.css">
</head>
<body>
    <h1>大きな見出し</h1>
    <h2>斜体の見出し</h2>
    <p>これは普通の段落です。</p>
    <p>この部分は<span class="highlight">強調</span>されています。</p>
</body>
</html>

fonts.css:

h1 {
    font-size: 36px;
    font-weight: bold;
    color: navy;
}

h2 {
    font-size: 24px;
    font-style: italic;
    color: darkgreen;
}

p {
    font-size: 16px;
    font-family: "Yu Gothic", sans-serif;
    line-height: 1.5;
}

.highlight {
    text-decoration: underline;
    font-weight: bold;
}

💡 ポイント： .highlightはクラスセレクタです

📦 5. レイアウトの基本

WEBページでは、セクションごとにスタイルを変更したい。あるいは、文中の特定の場所のスタイルを特別にしたいという場合があります。たとえば、論文を書いているときに、ある部分は引用であるとき、その引用部分を明確に別なスタイルで表示することが求められます。そのようなときには、<div>タグ、<span>タグを用います。

HTMLの範囲指定タグ

`<div>`タグ

div = division（区分、区切り）

<div>
    <h1>見出し</h1>
    <p>段落のテキスト</p>
</div>

ブロック要素: 縦に並ぶ（改行される）
グループ化: 複数の要素をまとめる
レイアウト: ページの構造を作る

`<span>`タグ

span = span（範囲、区間）

<p>この文章の<span>この部分だけ</span>違うスタイルにします。</p>

インライン要素: 横に並ぶ（改行されない）
部分的装飾: 文章の一部分だけスタイルを変更
テキスト内: 段落内の特定の部分に使用

divとspanの違い

タグ	要素タイプ	用途	表示
`<div>`	ブロック要素	セクション分け	縦に並ぶ
`<span>`	インライン要素	部分的装飾	横に並ぶ

クラス（class）の活用

divタグにクラスを付けて、ページのブロック（特定の範囲）ごとにスタイルを指定することができます。

HTMLでの使用例

<div class="header">
    <h1>サイトのタイトル</h1>
</div>

<div class="content">
    <h2>記事のタイトル</h2>
    <p>記事の内容...</p>
</div>

<div class="footer">
    <p>Copyright 2025</p>
</div>

CSSでのスタイル指定

/* クラスセレクタは . (ドット) で始める */
.header {
    background-color: #3498db;
    padding: 20px;
    text-align: center;
}

.content {
    background-color: white;
    padding: 30px;
    margin: 20px 0;
}

.footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 10px;
}

💡 ポイント：

クラス名はページの構造や役割を表す名前にする
header（ヘッダー）、content（コンテンツ）、footer（フッター）等
同じクラスは複数の場所で再利用できる

ボックスモデル

すべてのHTML要素は「箱」として扱われます。

┌────  margin   ────┐
│ ┌─── border  ───┐ │
│ │ ┌─ padding ─┐ │ │
│ │ │  content  │ │ │
│ │ └───────────┘ │ │
│ └───────────────┘ │
└───────────────────┘

content: 内容（テキストや画像）
padding: 内側の余白
border: 境界線
margin: 外側の余白

余白の設定

div {
    margin: 20px;        /* 外側の余白 */
    padding: 15px;       /* 内側の余白 */
    border: 2px solid black;  /* 境界線 */
}

/* 方向別の指定 */
h1 {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
    
    /* 短縮記法 */
    margin: 10px 15px 20px 25px;  /* 上 右 下 左 */
}

実習：レイアウトの練習

以下の内容で新しいファイルを作成してください：

layout.html:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>レイアウトの練習</title>
    <link rel="stylesheet" href="layout.css">
</head>
<body>
    <div class="container">
        <h1>レイアウトの練習</h1>
        <p>この段落には内側の余白（padding）があります。</p>
        <p>この段落にも余白があります。</p>
    </div>
</body>
</html>

layout.css:

body {
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

.container {
    background-color: white;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
    background-color: lightblue;
}

p {
    margin: 15px 0;
    padding: 10px;
    background-color: lightyellow;
}

💻 6. 実習：既存サイトのデザイン改良

これまでのファイルにCSSを適用

STEP 1: メインCSSファイルの作成

これまでの学習を活かして、サイト全体用の「main-style.css」を作成してください：

/* 基本設定 */
body {
    font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

/* ページ全体のコンテナ */
.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 見出しのデザイン */
h1 {
    color: #2c3e50;
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

h2 {
    color: #34495e;
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    border-left: 5px solid #3498db;
    padding-left: 15px;
}

/* 段落のデザイン */
p {
    color: #555;
    margin: 15px 0;
    text-align: justify;
}

/* ナビゲーションのデザイン */
nav {
    background-color: #3498db;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 20px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    padding: 5px 10px;
    border-radius: 3px;
}

nav a:hover {
    background-color: #2980b9;
}

/* 画像のデザイン */
img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin: 10px 0;
}

/* リストのデザイン */
ul, ol {
    margin: 15px 0;
    padding-left: 30px;
}

li {
    margin: 5px 0;
}

/* 強調のデザイン */
strong {
    color: #e74c3c;
}

em {
    color: #9b59b6;
    font-style: normal;
    font-weight: bold;
}

STEP 2: HTMLファイルへのCSS適用

index.htmlを開いて、<head>内に以下を追加：

<head>
    <meta charset="UTF-8">
    <title>私のWebサイト</title>
    <link rel="stylesheet" href="main-style.css">
</head>

さらに、<body>の内容を以下のように修正：

<body>
    <div class="container">
        <h1>私のWebサイトへようこそ</h1>
        
        <nav>
            <a href="lesson1.html">音楽とICT</a>
            <a href="lesson2.html">私のテーマ</a>
        </nav>
        
        <h2>サイトマップ</h2>
        <p>このサイトでは、以下のページをご覧いただけます：</p>
        
        <ul>
            <li><a href="lesson1.html">音楽とICTについて</a></li>
            <li><a href="lesson2.html">私の興味のある分野</a></li>
        </ul>
        
        <h2>外部リンク</h2>
        <p>参考になるサイト：</p>
        <ul>
            <li><a href="https://www.google.com" target="_blank">Google</a></li>
            <li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a></li>
        </ul>
    </div>
</body>

STEP 3: 他のファイルにも適用

lesson1.htmlとlesson2.htmlにも同様にCSSを適用してください：

<head>内に<link rel="stylesheet" href="main-style.css">を追加
<body>の内容を<div class="container">で囲む
ナビゲーションを統一する

✅ 7. 確認問題

問題1: CSSの基本文法

以下のCSSで、h1要素を赤色、フォントサイズ24pxにする場合の空欄を埋めてください：

h1 {
    _______: red;
    _______: _______px;
}

解答

h1 {
    color: red;
    font-size: 24px;
}

問題2: クラスセレクタ

HTMLで<div class="container">と書いた要素をCSSで指定する場合、正しい書き方はどれですか？

A) container { }
B) .container { }
C) #container { }

答え： _______

解答

答え： ___B___

解説：

クラスセレクタは.（ドット）で始める
#はID属性用の記号（今回の授業では扱わない）
クラス名だけでは認識されない

問題3: 色の指定方法

赤色を表す記述として正しいものをすべて選んでください：

A) color: red;
B) color: #ff0000;
C) color: rgb(255, 0, 0);
D) color: #red;

答え： _______

解答

答え： A, B

解説：

A: 色名での指定（正しい）
B: 16進数カラーコード（正しい）
C: RGB値（授業では扱わなかったが、実際は正しい）
D: 16進数コードの形式が間違い

問題4: ボックスモデル

以下のうち、要素の外側の余白を指定するプロパティはどれですか？

A) padding
B) margin
C) border

答え： _______

解答

答え：B

解説：

margin: 外側の余白
padding: 内側の余白
border: 境界線

問題5: divとspan

以下の説明で正しいのはどれですか？

A) divはインライン要素、spanはブロック要素
B) divはブロック要素、spanはインライン要素
C) divもspanも同じ要素タイプ

答え： _______

解答

答え：B

解説：

div: ブロック要素（縦に並ぶ、セクション分け用）
span: インライン要素（横に並ぶ、部分装飾用）

📝 8. 個人作業

課題：オリジナルデザインの作成

基本課題

style.cssをカスタマイズして、自分好みの色やフォントに変更
すべてのHTMLファイルにCSSを適用
統一感のあるデザインを作成

カスタマイズのアイデア

色の変更: お気に入りの色に変更
フォントサイズ: 読みやすいサイズに調整
背景色: 落ち着いた色に変更
余白: 適切な余白に調整

記入例

/* 自分らしい色に変更 */
h1 {
    color: #8e44ad;  /* 紫色 */
    border-bottom: 3px solid #e74c3c;  /* 赤色の下線 */
}

nav {
    background-color: #27ae60;  /* 緑色 */
}

body {
    background-color: #ecf0f1;  /* 薄いグレー */
}

🚨 9. よくあるミスと解決方法

❌ CSSが適用されない

原因： リンクの記述間違い 解決：

<link rel="stylesheet" href="style.css">が正しく書かれているか確認
CSSファイル名のスペルを確認
CSSファイルが同じフォルダにあるか確認

❌ 色が表示されない

原因： 色の指定間違い 解決：

色名のスペルを確認（red, blue, green等）
カラーコードの#を確認（#ff0000等）
セミコロン（;）が抜けていないか確認

❌ 文字の大きさが変わらない

原因： セレクタの間違い 解決：

HTMLのタグ名とCSSのセレクタが一致しているか確認
クラス名やID名が正しいか確認

❌ レイアウトが崩れる

原因： ボックスモデルの理解不足 解決：

margin、padding、borderの関係を確認
幅（width）が適切かチェック

🔮 10. 次回予告

第4時間目：MathJaxで数式表示

次回は数式を美しく表示する技術を学びます！

学習内容

MathJaxの基本的な使い方
数式の記法（LaTeX記法）
基本的な数学記号の表示
分数、根号、上付き・下付き文字
美しい数学ページの完成

MathJaxとは？

数学の数式をWebページで美しく表示するためのJavaScriptライブラリです。複雑な数式も簡単に表示できます。

事前準備

これまで作成したファイルをすべて持参
CSSでデザインされたサイトが完成していること
GitHubアカウントの作成

🎯 目標： 数式を含む美しいWebサイトを完成させ、GitHub Pagesで公開する

📋 11. 今日の学習チェックリスト

自分の学習状況をチェックしてください：

理解度チェック

[ ] CSSの基本文法がわかる
[ ] 色の指定方法がわかる
[ ] フォント設定の方法がわかる
[ ] ボックスモデルの概念がわかる
[ ] リストのスタイリングができる

技能チェック

[ ] 外部CSSファイルを作成できる
[ ] HTMLファイルにCSSをリンクできる
[ ] 基本的なデザインを適用できる
[ ] 色やフォントを変更できる

完成物チェック

[ ] style.cssファイルが完成している
[ ] すべてのHTMLファイルにCSSが適用されている
[ ] 統一感のあるデザインになっている

✨ すべてチェックできたら今日の目標達成！

📚 12. 参考資料

CSS基本プロパティ一覧

プロパティ	意味	例
`color`	文字色	`color: red;`
`background-color`	背景色	`background-color: yellow;`
`font-size`	フォントサイズ	`font-size: 16px;`
`font-family`	フォント種類	`font-family: Arial;`
`margin`	外側余白	`margin: 10px;`
`padding`	内側余白	`padding: 5px;`
`border`	境界線	`border: 1px solid black;`
`text-align`	文字揃え	`text-align: center;`

7-03 CSSでデザインを整える

📚 今日学ぶこと

🎨 1. CSSとは？

CSSの役割

HTMLとCSSの関係

CSSを使う前と後の違い

CSSの基本文法

主なプロパティの例

📝 2. CSSの適用方法

HTMLファイルにCSSを適用する場合

CSSの3つの適用方法

1. 外部スタイルシート（推奨）

2. 内部スタイルシート

3. インラインスタイル

🌈 3. 色の指定

色の指定方法

色名での指定

16進数カラーコード

実習：色の練習

📝 4. フォントの設定

フォント関連プロパティ

フォントサイズ

フォントファミリー

Web上で一般的な日本語フォント

フォントの選択順序

OS別の実際の選択例

フォントスタイル

実習：フォントの練習

📦 5. レイアウトの基本

HTMLの範囲指定タグ

<div>タグ

<span>タグ

divとspanの違い

クラス（class）の活用

HTMLでの使用例

CSSでのスタイル指定

ボックスモデル

余白の設定

実習：レイアウトの練習

💻 6. 実習：既存サイトのデザイン改良

これまでのファイルにCSSを適用

STEP 1: メインCSSファイルの作成

STEP 2: HTMLファイルへのCSS適用

STEP 3: 他のファイルにも適用

✅ 7. 確認問題

問題1: CSSの基本文法

問題2: クラスセレクタ

問題3: 色の指定方法

問題4: ボックスモデル

問題5: divとspan

📝 8. 個人作業

課題：オリジナルデザインの作成

基本課題

カスタマイズのアイデア

記入例

🚨 9. よくあるミスと解決方法

❌ CSSが適用されない

❌ 色が表示されない

❌ 文字の大きさが変わらない

❌ レイアウトが崩れる

🔮 10. 次回予告

第4時間目：MathJaxで数式表示

学習内容

MathJaxとは？

事前準備

📋 11. 今日の学習チェックリスト

理解度チェック

技能チェック

完成物チェック

📚 12. 参考資料

CSS基本プロパティ一覧

よく使う色

単位

コメント

コメントする コメントをキャンセル

`<div>`タグ

`<span>`タグ

コメントするコメントをキャンセル