【CSS教材②】idやclassの使い方から文字色変更、背景色変更、widthやheightの使い方までを徹底解説

2023年6月28日2023年9月19日

ファド

こんにちは！
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します！

こちらの記事はCSS教材の第2回目の記事になります。

その他のCSS教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。

idとclassについて

フォルダ名：「id_class」

実は、CSSのセレクタにはp要素やh1要素などのHTMLのタグ以外にもidやclassを使用することで、様々な対象を指定することができます。

idについて

まず初めに、idについて紹介していきます。

やり方としてはHTMLの要素にid属性を設定します。
属性値には、半角英数と-(ハイフン)または、_(アンダースコア)のみを使用してください。
それ以外の記号を入れると、バグやエラーの原因となるので気を付けましょう。
また、先頭に数字を入れるのはやめてください。

それでは、実際にコードで見ていきます。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>文字の色が変わらない</p>
    <p id="blue">文字の色が変わる</p>
</body>

</html>

style.cssを下記の通り編集してください。

#blue {
    color: blue;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！

もし表示されないようであれば、CSSのパスが合っているかなどを確認してください。

CSSでidを指定したい場合は、先頭に#を付けます。
その後ろに、HTMLで記述したidの値を書きます。
これでid名がblueの要素をセレクトするという意味になります。

このidを使うことで、全てのp要素やh1要素の色を変更するのではなく、指定したidの要素だけデザインを変更することができるようになります。

classについて

一方、classを使用したい場合は、class属性を使用します。
属性値にはid属性の時と同じく、半角英数と-(ハイフン)または、_(アンダースコア)のみを使用してください。
また、こちらもid属性と同じく、先頭に数字を入れるのはやめてください。

それでは、実際にコードで確認してみましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>文字の色が変わらない</p>
    <p id="blue">文字の色が変わる</p>
    <!-- ここから追加 -->
    <p class="red">文字の色が変わる</p>
    <!-- ここまで追加 -->
</body>

</html>

style.cssを下記の通り編集してください。

#blue {
    color: blue;
}

/* ここから追加 */
.red {
    color: red;
}
/* ここまで追加 */

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！

id属性と使い方は同じですが、CSSでclassを指定したい場合、先頭に.(ドット)を付けます。
その後ろに、HTMLで記述したclassの値を書きます。
これでclass名がredの要素をセレクトするという意味になります。

idとclassの使い分け

一見同じように見えるid属性とclass属性ですが、使い方に明確な違いがあります。

属性	特徴
id属性	同じWebページ内でid属性は1回しか使用することができない
class属性	同じWebページ内で同じclass属性の値は何度でも用いることができる

idとは、識別の役割を担っており、オンリーワン(重複しない)ということが前提になります。
また、プログラムの世界ではオンリーワンのことを「一意」や、「ユニーク」と言ったりもするので覚えておきましょう。

一方で、classとは部類、共通するという役割を担っています。
そのため、複数の要素を同じデザインにしたい場合は、このclass属性を使うようにしましょう。

idとclassの違いを覚えるコツとしては、idは「IDだからオンリーワン」、classは「クラスの全員にデザインを適用するから何回でも登場OK」のように覚えるといいでしょう。

それでは、実際にコードを見ながら確認していきましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p id="not_good">これはidのダメな例</p>
    <p id="not_good">これはidのダメな例</p>
</body>

</html>

これは1ページに同じidが2回指定されているのでダメな例です。
同じid属性値は1ページ内に1度のみ使用可能です。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p id="good1">これはidの良い例</p>
    <p>これはidの良い例</p>
    <p id="good2">これはidの良い例</p>
</body>

</html>

これは同ページにユニークなidがそれぞれ指定されているので、良い例です。

次に、Classの例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="this_is_class">これはclassの例</p>
    <p class="this_is_class">これはclassの例</p>
    <p class="this_is_class">これはclassの例</p>
    <p>これはclassの例</p>
    <p class="this_is_ex">これはclassの例</p>
    <p class="this_is_ex">これはclassの例</p>
    <p class="this_is_ex">これはclassの例</p>
</body>

</html>

.this_is_classクラスと.this_is_exクラスがあるので、それぞれにCSSを適用することができます。

今後、CSSを適用する時に、複数の要素に同じスタイルを適用したいという状況が多々出てくるかと思います。
そんな時は、HTMLの要素のclass属性を同じ値に設定してあげれば、指定したクラス名を持つすべてのHTML要素にスタイルが適用されます。

★検索ワード
・HTML id class 命名規則
・HTML id class 使い方
・HTML id class 使い分け

文字や文章の色を変更

フォルダ名：「font_color」

すでに、文字や文章の色を変えるCSSは以前のレクチャーで登場していますが、改めて見ていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="change_color">色が変わる</p>
    <p>色が変わらない</p>
    <p class="change_color">色が変わる</p>
    <p>色が変わらない</p>
    <p class="change_color">色が変わる</p>
</body>

</html>

style.cssを下記の通り編集してください。

.change_color {
    color: green;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！

今回の例では、前のレクチャーで学習したclass属性を使用して、テキストの色を変更しています。

CSSで文字の色を変えるためには、colorプロパティを使用します。
color: green;とすることで、緑色にすることができます。

CSSでの色の指定方法について

CSSでは、greenやblueなどの色の指定以外にも、たくさん色の指定方法があります。

指定形式	指定例	使い方
キーワード	「green」「white」「blue」などのキーワード名で指定	color: green;
16進数カラーコード	「#432123」「#c00」など、16進数を使ったカラーコードを指定	color: #432123;
RGB	「rgb(32, 132, 12);」「rgba(123, 123, 123, 0.5);」のように指定 ※aは透過度	color: rgb(32, 132, 12);
HSL	「hsl(0, 50%, 100%);」「hsla(0, 50%, 100%, 0.5);」のように指定 ※aは透過度	color: hsl(0, 50%, 100%);

キーワードと16進数カラーコードについての補足

キーワードや16進数のカラーコードは少し下に色についての便利なサイトをまとめているので、そちらを参考にすると良いでしょう。
色々な色を指定できるので、ぜひ試してみて下さい。

RGBについての補足

RGBの中の数字の正体は、rgb(赤の数値, 緑の数値, 青の数値)です。
それぞれの数値は0〜225で表され、数値のバランスで色を決定しています。
絵の具で色を混ぜる感覚に似ています。
0ならその色は混ざってないし、225ならいっぱい混ざっているというイメージです。

また、透過度も指定でき、0.0〜1.0の間で設定できます。
その場合は、rgba(赤の数値, 緑の数値, 青の数値, 透過度)などと表記します。

HSLについての補足

HSLの中の数字の正体はRGBと似ていますが、hsl(色相の数値, 彩度の数値, 輝度の数値)です。
また、こちらも透過度も指定でき、0.0〜1.0の間で設定できます。
その場合は、hsla(色相の数値, 彩度の数値, 輝度の数値, 透過度)などと表記します。

色についての便利なサイト

・原色大辞典
・カラーピッカー from みんなの知識ちょっと便利帳

色指定のまとめ

基本的には16進数のカラーコードを使い、透過などをしたいときはRGBAを使用するのがいいと思います。
また、その時々によってやりたいことは異なるので、設定の仕方ごとにどのようなことができるのかを確かめながら、どれを使えばいいのかを検討し、随時実装できればOKです。

★検索ワード
・CSS 文字色変更
・CSS color 使い方
・CSS カラーピッカー
・CSS rgba 使い方
・CSS hsla 使い方

背景を変更する

フォルダ名：「background_color」

背景色を変えるCSSもすでに以前のレクチャーで登場していますが、改めて見ていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="change_color">色が変わる</p>
    <p>色が変わらない</p>
    <p class="change_color">色が変わる</p>
    <p>色が変わらない</p>
    <p class="change_color">色が変わる</p>
</body>

</html>

style.cssを下記の通り編集してください。

.change_color {
    background-color: green;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！

今回も前にレクチャーで学習したclass属性を使用して、背景の色を変更しています。

CSSで背景の色を変えるためには、background-colorプロパティを使用します。
background-color: green;とすることで、背景を緑色にすることができます。

また、背景色の変更にも、16進数やRGBA、HSLAを使用することもできます。
使い方は、文字色を変更するときと同じです。

index.htmlはそのままで、style.cssを下記の通り編集してください。

.change_color {
    background-color: rgba(130, 20, 100, 0.1);
}

このようなコードを記述することで、背景が緑から薄ピンク色になります。
ぜひ皆さん自身でも色々な色に変えてみてください。

★検索ワード
・CSS 背景色変更
・CSS カラーコード

幅や高さを指定する

フォルダ名：「width_height」

今回のレクチャーでは、初めて出てくるwidthプロパティとheightプロパティを使用して、幅と高さの指定について学習していきます。

幅を指定する

CSSで要素の幅を指定するには、widthプロパティを使用します。

px(ピクセル)を使った幅の指定方法

まずは、要素の幅をpxで指定してみましょう。
pxとは、いわゆるcm(センチメートル)のような長さを表す単位のこととイメージして下さい。
Webページを作成する時は、長さの単位にcmやmm(ミリメートル)は使用せず、このpxを使用していくので徐々に覚えておきましょう。
たとえば、p {width: 500px;}と書けば、指定されたp要素の幅は500pxになります。

実際に見ていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="width">幅の指定</p>
</body>

</html>

style.cssを下記の通り編集してください。

.width {
    width: 300px;
    background-color: skyblue;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！

以前のレクチャーの際に、p要素の背景色を設定した場合の幅を思い出してください。
ブラウザの横幅いっぱいまで背景色が適用されていませんでしたか？

今回は、widthプロパティで幅を300pxに指定したため、横幅が「300px」で固定されるようになりました。

また、幅を視覚的にわかりやすくするために、background-colorプロパティを使用して背景色も変更しています。

%（パーセント）を使った幅の指定方法

widthの値を%で指定すると、要素の幅は可変になります。
つまり、親要素の幅次第で幅が変わることになります。

HTMLの教材で親要素を説明したことを覚えていますでしょうか？
HTMLでは、下記のようなコードを書くことがよくあります。

<div class="parent">
    <p class="child">これは子要素</p>
</div>

class名からも分かる通り、div要素の中にp要素が入っているため、div要素が「親要素」、p要素が「div要素の子要素」です。

もし、p要素に対して幅を%で指定した場合、div要素の幅の大きさによって幅の長さが変更されます。

言葉で説明してもわかりにくいので、実際に手を動かしていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="parent1">
        <p class="child1">親要素の幅が500px</p>
    </div>
    <div class="parent2">
        <p class="child2">親要素の幅が300px</p>
    </div>
</body>

</html>

style.cssを下記の通り編集してください。

.parent1 {
    width: 500px;
    background-color: wheat;
}

.child1 {
    width: 50%;
    background-color: violet;
}

.parent2 {
    width: 300px;
    background-color: thistle;
}

.child2 {
    width: 50%;
    background-color: tomato;
}

下記画像のように表示されていればOKです！

%で指定したp要素2つは、それぞれの親要素であるdiv要素の幅の50%になっています。

このように値を◯◯%で指定すると、親要素の幅に対する比率で幅が決まります。
親要素自身が％で指定されているときも、これは変わりません。

つまり、これを100%にした場合は、親要素と全く同じ幅になるということになります。

高さを指定する

CSSで要素の高さを指定するためには、heightプロパティを使用します。

px（ピクセル数）を使った高さの指定方法

まずは、要素の高さをpxで指定してみましょう。

書き方は、幅の実装方法とプロパティ以外は全く同じです。
p {height: 100px;}と書けば、指定されたp要素の高さは100pxになります。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="height">高さの指定</p>
</body>

</html>

style.cssを下記の通り編集してください。

.height {
    height: 100px;
    background-color: yellow;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！

以前のレクチャー時に、p要素に背景色を設定をした時の高さを思い出してください。
p要素に書いてあるテキストの高さとほぼ同じではなかったですか？

今回は、heightプロパティで高さを100pxに指定したため、高さが「100px」で固定されるようになりました。

また、高さが視覚的にわかりやすいように、background-colorプロパティを使用して背景色も変更しています。

%（パーセント）を使った高さの指定方法

heightの値を%で指定すると、要素の高さは可変になります。
つまり、親要素次第で高さが変わるのです。

実際に手を動かしていきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>CSSの学習</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="parent1">
        <p class="child1">親要素の高さが200px</p>
    </div>
    <div class="parent2">
        <p class="child2">親要素の高さが100px</p>
    </div>
</body>

</html>

style.cssを下記の通り編集してください。

.parent1 {
    height: 200px;
    background-color: wheat;
}

.child1 {
    height: 50%;
    background-color: violet;
}

.parent2 {
    height: 100px;
    background-color: thistle;
}

.child2 {
    height: 50%;
    background-color: tomato;
}

HTMLファイルをブラウザで読み込み、下記画像のように表示されていればOKです！

%で指定した子要素であるp要素2つは、それぞれの親要素であるdiv要素の高さの50%になっています。

このように値を◯◯%で指定すると、親要素の高さに対する比率で高さが決まります。
親要素自身が％で指定されているときも、これは変わりません。

つまり、これを100%にした場合は、親要素と全く同じ高さになるということになります。

widthとheightについて

簡単そうで意外と奥が深い幅と高さ。
課題などで徐々に使っていき、慣れていきましょう。

★検索ワード
・CSS width height
・CSS width 使い方
・CSS height 使い方
・CSS 幅指定
・CSS 高さ指定

次の教材

次の教材は下記から簡単に飛ぶことができます！
引き続きプログラミングを楽しんでいきましょう！

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします！

サポート価格はなんと1日あたりたったの約300円！

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります！

なお、サポート内容の詳細は下記の通りです。

目標設定
マインドセット
オリジナル教材見放題
オリジナル課題見放題
オリジナル課題の解答見放題
課題コードレビュー
教材への無制限質問
課題への無制限質問
ポートフォリオ作成アドバイス
褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください！

この記事が気に入ったら
フォローしてね！

Follow @fadotechjp

よかったらシェアしてね！

URLをコピーしました！

【CSS教材②】idやclassの使い方から文字色変更、背景色変更、widthやheightの使い方までを徹底解説

【CSS教材①】CSSとは？CSSファイルの作り方から基本的な書き方までを徹底解説

【CSS教材③】枠線やmargin・paddingの実装方法からデベロッパーツールの使い方までを徹底解説

【CSS教材④】floatの実装方法から余白の計算、box-sizingの使い方までを徹底解説

【CSS教材⑤】Flexboxの実装方法からレスポンシブデザインの実装方法までを徹底解説

idとclassについて

idについて

classについて

idとclassの使い分け

文字や文章の色を変更

CSSでの色の指定方法について

キーワードと16進数カラーコードについての補足

RGBについての補足

HSLについての補足

色についての便利なサイト

色指定のまとめ

背景を変更する

幅や高さを指定する

幅を指定する

px(ピクセル)を使った幅の指定方法

%（パーセント）を使った幅の指定方法

高さを指定する

px（ピクセル数）を使った高さの指定方法

%（パーセント）を使った高さの指定方法

widthとheightについて

次の教材

プログラミング学習サポートについて

サポート価格はなんと1日あたりたったの約300円！

コメント

コメント

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

【CSS教材②】idやclassの使い方から文字色変更、背景色変更、widthやheightの使い方までを徹底解説

【CSS教材①】CSSとは？CSSファイルの作り方から基本的な書き方までを徹底解説

【CSS教材③】枠線やmargin・paddingの実装方法からデベロッパーツールの使い方までを徹底解説

【CSS教材④】floatの実装方法から余白の計算、box-sizingの使い方までを徹底解説

【CSS教材⑤】Flexboxの実装方法からレスポンシブデザインの実装方法までを徹底解説

idとclassについて

idについて

classについて

idとclassの使い分け

文字や文章の色を変更

CSSでの色の指定方法について

キーワードと16進数カラーコードについての補足

RGBについての補足

HSLについての補足

色についての便利なサイト

色指定のまとめ

背景を変更する

幅や高さを指定する

幅を指定する

px(ピクセル)を使った幅の指定方法

%（パーセント）を使った幅の指定方法

高さを指定する

px（ピクセル数）を使った高さの指定方法

%（パーセント）を使った高さの指定方法

widthとheightについて

次の教材

プログラミング学習サポートについて

サポート価格はなんと1日あたりたったの約300円！

コメント

コメント

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

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