CSSの特徴のスタイルを使い回すの利用されるクラス(class属性)とIDについて説明します。
クラス(class)は同一のHTMLの中で繰り返し利用できますが、IDは一度だけになります。
classは「.<class名>」という感じで記載します。HTMLの中ではピリオド「.」は不要ですね。
このclassはすでに、フォントの修飾のところで説明しましたが、再度記載します。
一方IDの方は同様に「.<ID名>」で利用しますが、HTMLの中では、#IDといったように利用します。
フォントの修飾で記載した「テキストに背景画像をつける」で利用した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">
<img src="./css_backimage.png" alt="これは何か?">
次の例では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>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="superimpose_cl1.css"> </head>
</head>
<body>
<div class="backgroundcover">
<div class="textcenter">
<br><h1><font color="#f1f769"> 京都の紅葉を見に行こう!</font></h1>
</div>
</div>
<h2 id=redtext> 2024年は11月末がピーク</h2>
</body>
</html>
このh1タグの中の文字色にもIDを使って変更してみましょう。
CSS に以下を追加しました。
#yellowtext{
color:yellow;
}
HTMLの <h1>タグの中を書き換えました。これでも上のコードと同様の出力になりますね。
<body>
<div class="backgroundcover">
<div class="textcenter">
<br><h1 id=yellowtext> 京都の紅葉を見に行こう!</font></h1>
</div>
</div>
<h2 id=redtext> 2024年は11月末がピーク</h2>
</body>
HTMLの中ではclassをまとめて利用することもできます。上の例ではHTMLの中で2つのdivを用いて、backgroundcoverとtextcenterが別々に利用されていました。これを1行にまとめるとすっきりします。
HTML
<div class="backgroundcover textcenter">
<br><h1 id=yellowtext> 京都の紅葉を見に行こう!</font></h1>
</div>