Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

JavaScript学習者のためのCSS基本ガイド：ウェブページのデザインを学ぼう

なぜJavaScriptの前にCSSを学ぶ必要があるのか？

JavaScriptでデザインを変えるためには、CSSの知識がどうしても必要です。留学生の皆さんにもわかりやすい「やさしい日本語」で、大切なポイントを解説かいせつします。

JavaScriptはCSSを操作（そうさ）して、デザインを動的どうてきに変える役割を持っています。CSSを知っておくことには、次のような戦略せんりゃく的（せんりゃくてき）なメリットがあります。

  1. CSSを知らないとJavaScriptが書けない： JavaScriptで「背景はいけい色を変える」という命令めいれいを出すとき、CSSのプロパティ名（backgroundColorなど）を知らないと、プログラムが書けません。
  2. 無駄（むだ）なコードが減る： 簡単なデザインの変化（マウスを乗せたときに色を変えるなど）は、CSSだけで作れます。CSSでできることを知っていれば、JavaScriptのコードを短く、シンプルに保たもつことができます。
  3. エラーを減らせる： CSSの仕組しくみを理解していれば、JavaScriptでデザインを操作したときに「なぜか動かない」というミスを防ぐことができます。

ここをクリックしてみましょう。

これから、このHTMLをCSSを使って、デザインを変更してゆきます。

まず、デザインの基本である「文字のスタイル」について学びましょう。

I. 文字のスタイル（文字のデザインを変える）

Webサイトにおいて、文字は情報を伝えるための最も大切な要素です。文字の「読みやすさ」は、ユーザーの体験たいけん（UX “User eXperience“のこと）に大きな影響を与えます。

基本の3つのプロパティ

まずは、よく使われる以下の3つの命令（プロパティ）を覚えましょう。

  1. font-size： 文字の大きさ。
  2. color： 文字の色。
  3. text-align： 文字の並べ方。左（left）、真しんん中（center）、右（right）のどこに揃そろ（そろ）えるかを決めます。

CSSの書かき方かたの基本

CSSは、「どの場所に（セレクタ）」「何の項目を（プロパティ）」「どう変えるか（値）」というルールで書きます。

/* h1タグ（見出し）のデザインを変える例（れい） */
h1 {
  font-size: 24px;      /* 大きさを24ピクセルにする */
  color: blue;          /* 色を青にする */
  text-align: center;   /* 真ん中（まんなか）に並べる */
}

ここをクリックしてみましょう。

セレクタ

セレクタ はウェブページを分解して、その一部を取り出すときに、必要な部分を探すヒントとして使う、名前や特徴です。「タグ セレクタ」「クラス セレクタ」などがあります。

Important

セレクタ はJavaScriptでも、とても大事です。JavaScriptを書くときは、仕事をしてもらうオブジェクトを指定しなければなりません。そのとき、この セレクタ を利用するのです。

II. タグのスタイル（HTML要素に直接命令する）

「タグ セレクタ」とは、<h1>や<p>、<table>といったHTMLのタグ名に対して、スタイルを適用する方法です。ページ全体のデザインを一度に整えるのにとても便利です。

テーブル（表）のスタイル例れい

「テーブル（表）」をきれいに見せるためのプロパティを比較（ひかく）してみましょう。

プロパティ名意味（いみ）具体的な例れいと効果
border枠線（わくせん）1px solid black（1pxの太さの黒い実線じっせん）
padding内側うちがわの余白セルの中の文字と枠線の間のスペースを広げます。
background-color背景はいけいの色表の背景はいけいに色を塗ります。

Note

実線じっせん：途中で切れず、ずっと続いている線

border-collapse: collapse; は「魔法まほうの言葉」

テーブルのデザインで最も重要なのが border-collapse: collapse; です。 通常つうじょう、テーブルの枠線はセルごとに分かれていて、そのままでは「二重線」のように見えてしまいます。このプロパティを <table>タグ に適用すると、隣（となり）り合う2本の線を1本にまとめることができます。まさに 「2本の線を1本にする魔法まほうの言葉」 です。これを使うだけで、見みた目めがスッキリとプロらしくなります。

/* テーブルのデザインを変える例（れい） */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
}
th, td {
    border: 1px solid #333;
}
th, td {
    padding: 12px 15px;
}
th {
    background-color: #4CAF50; /* ヘッダーは緑 */
    color: white;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}

Note

注意：border（枠線）は各セル（<th>や<td>）に設定せっていし、border-collapseは全体の親である<table>に設定せっていするのが正しいルールです。

ここをクリックしてみましょう。

III. 特定の要素（クラス）のスタイル

「クラス（Class）」を使うと、特定のグループに名前をつけて、その名前を呼ぶことでスタイルを適用できます。同じデザインを何度も書かなくて済むため、コードの管理がとても楽になります。

タグの名前はあらかじめHTMLのルールで決まっていますが、クラスの名前はプログラマが自分で付けるもの です。

クラスを使うステップ

  1. HTMLで名前をつける： <p class="highlight"> のように書きます。
  2. CSSでデザインを決める： .highlight { color: red; } のように、先頭にドットをつけて書きます。

クラス名のルール

  • 名前の始まりには必ず .（ドット） をつけます（例れい：.main-title）。
  • 名前は、そのグループが何であるかわかる 意味のある英語 を使います。
  • 複数の単語を繋げる場合は、JavaScriptと同じ camelCase（キャメルケース） （例れい：.submitButton）を使うのがおすすめです。JSとCSSで名前の付け方を統一（とういつ）すると、ケアレスミス（不注意な間違い）を減らすことができます。

JavaScriptへの繋つながり

JavaScriptには、getElementsByClassName() という「クラス名を使って要素を見つける」命令があります。CSSでクラスを使ってグループ化しておけば、後あとでJavaScriptからそのグループだけを一度に動かすことが非常に簡単になります。

/* highlightクラスのデザインを変える例（れい） */
.highlight { color: red; }

ここをクリックしてみましょう。

IV. 特定の状態のスタイル

ウェブページには「普段ふだんの状態」だけでなく、「マウスが乗ったとき」のような「特別な状態」があります。この特別な状態を 疑似ぎじ（ぎじ）クラス と呼びます。

代表的な疑似ぎじクラス：:hover

最もよく使われるのが :hover（ホバー）です。これは「要素の上にマウスカーソルが乗ったとき」の状態を指します。

  • CSSの :hover： マウスが乗ったときに、色をサッと変えることができます。
  • JavaScriptの onmouseover / onmouseout： マウスが乗ったとき（over）と離はなれたとき（out）に、より複雑（ふくざつ）な動うごき（計算や画面がめんの切きりり替かえ）をさせるときに使います。

使つかい分わけの指針（ししん）： 「ボタンの色を少し明るくする」といった見みた目めの変更だけなら CSS を使い、「ボタンに乗ったらデータを保存（ほぞん）する」といった機能の追加は JavaScript を使いましょう。

a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}
a:hover {
  color: hotpink;
}

ここをクリックしてみましょう。

V. JavaScriptからCSSを操作する重要ルール

JavaScriptを使ってデザインを書かき換かええるとき、CSSのプロパティ名の書かき方かたが少し変わるという「重要なルール」があります。

キャメルケースへの変換へんかん（へんかん）

CSSでハイフン（-）を使っていた名前は、JavaScriptではハイフンを消して、次の文字を大文字にする 「キャメルケース」 に書かき換かええます。

CSSの書かき方かたJavaScriptでの書かき方かた意味
font-sizefontSize文字の大きさ
background-colorbackgroundColor背景はいけいの色
border-radiusborderRadius角の丸み（かどのまるみ）

JavaScriptでの書かき換かええ構造：「道のり」で考える

JavaScriptからCSSを操作するときは、次のような構造で命令を出します。

// ID名が "title" の要素の色を赤に変える
document.getElementById("title").style.color = "red";

これを、目的地（もくてきち）までの 「道のり（みちのり）」 として分解（ぶんかい）してみましょう。

  1. document：このウェブページという「大きな書類」の中から、
  2. .getElementById(“title”)：IDが “title” の「場所」を見つけて、
  3. .style：「デザイン（スタイル）」の担当者に、
  4. .color = “red”：「文字の色」を「赤」に変えるように命令する。

このように、ドット（.）で繋つなぐことで、操作したい場所へ順番にたどり着くことができます。

【参考】この「道のり」を英語を使って「パス(path)」と呼ぶことがあります。

VI. CSS基礎のまとめ

  • 文字スタイル： font-size や color で読みやすくする。
  • タグスタイル： タグに直接命令し、border（1px solid black）などで整える。
  • クラス： 名前をつけてグループ化し、JavaScriptからも操作しやすくする。
  • 疑似ぎじ（ぎじ）クラス： :hover でユーザーの動うごきに反応はんのうさせる。

HTMLをしっかり覚（おぼ）えることが、JavaScriptをマスターするための近道ちかみち（ちかみち）です。また、CSSで自分の思おもい通どおりのデザインが作れるようになると、JavaScriptの学習はもっと楽しくなります。まずは 「自分の書いたコードで画面がめんが変わる楽しさ」 を大切にしてください。