クラスとIDの利用

CSSの特徴のスタイルを使い回すの利用されるクラス（class属性)とIDについて説明します。

クラス(class)は同一のHTMLの中で繰り返し利用できますが、IDは一度だけになります。
classは「.<class名>」という感じで記載します。HTMLの中ではピリオド「.」は不要ですね。
このclassはすでに、フォントの修飾のところで説明しましたが、再度記載します。
一方IDの方は同様に「.<ID名>」で利用しますが、HTMLの中では、#IDといったように利用します。

classの利用例（画像に文字をオーバレイする）

フォントの修飾で記載した「テキストに背景画像をつける」で利用したCSSは以下のものでしたね。
この「.container」や「.backgroud」がclass の利用法になります。

.container {

display: grid;

grid-template-columns: 1fr 1fr; /* 2つの列に均等分割 */

}

.background {

background-image: url(css_backimage.png); /* 背景画像指定 */

background-repeat: repeat; /* 背景の繰り返し設定 */

}

HTMLの中では以下のように利用されます。
<div class="background">

IDの利用

次の例ではclassに加えてIDの利用例を追加してみます。文字色を指定する#redtext を追加しています。画像中の文字の位置についても「.textcenter」を追加し、text-alingでcenter(中央)に設置するようにしました。

CSS

.backgroundcover {

background-image: url(css_colorleafs1.png); /* 背景画像指定 */

background-repeat: no-repeat; /* 背景の繰り返し設定 */

background-size: cover; /* 画像を大きくする　*/

width: 70%; /* 幅を600pxに設定 */

height: 200px; /* 高さを100pxに設定 */

}

.textcenter{

text-align:center;

padding:20px 0;

}

#redtext{

color:red;

}

ここでは文字の色指定を fontとIDを利用しています。画像中の文字<h1><font color>を用いて、画像の外の文字では<h2 id=redtext>を用いて指定しました。

HTML

<!DOCTYPE html>

<html>

<head>

<title>私の初めてのHTML</title>

</head>

<body>

<br><h1><font color="#f1f769"> 京都の紅葉を見に行こう！</font></h1>

</div>

<h2 id=redtext> 2024年は11月末がピーク</h2>

</body>

</html>

このh1タグの中の文字色にもIDを使って変更してみましょう。
CSS に以下を追加しました。
#yellowtext{

color:yellow;

}

HTMLの <h1>タグの中を書き換えました。これでも上のコードと同様の出力になりますね。
<body>

<br><h1 id=yellowtext> 京都の紅葉を見に行こう！</font></h1>

</div>

<h2 id=redtext> 2024年は11月末がピーク</h2>

</body>

classをまとめて利用する

HTMLの中ではclassをまとめて利用することもできます。上の例ではHTMLの中で2つのdivを用いて、backgroundcoverとtextcenterが別々に利用されていました。これを１行にまとめるとすっきりします。
HTML

<br><h1 id=yellowtext> 京都の紅葉を見に行こう！</font></h1>

</div>

動画による説明:ClassとID

Page updated

Google Sites

Report abuse

クラスとIDの利用

classの利用例（画像に文字をオーバレイする ）

IDの利用

classをまとめて利用する

classの利用例（画像に文字をオーバレイする）