複数のタグで同一のスタイルを指定する
ホームページやブログなどのウェブサイトで、何度も同一のスタイル(文字の大きさや色など)を指定したい場合は、スタイルに名前をつけて、タグにスタイル指定すると便利です。
.名前 { スタイル }
という形式になります。複数の指定をする場合は、;(セミコロン)で区切って記述します。見やすいように改行してもOKです。タグの記述は、
<タグ名 class=" 名前 ">
というように、どのスタイルを適用するのか class="名前" で指定します。
使用例です。
<style type="text/css">
<!--
.test1 { color:red }
.test2 {
-->
</style>
<!--
.test1 { color:red }
.test2 {
font-size:18px;
color:white;
background-color:#000080;
}
color:white;
background-color:#000080;
}
-->
</style>
というふうに指定をしておけば、何度でもこのスタイルを使用することができます。
<span class="test1">この文字は赤色</span>
<div class="test2">
この段落は、大きさ 18ピクセル、文字色は白、背景色は #000080です。
</div>
<div class="test2">
この段落は、大きさ 18ピクセル、文字色は白、背景色は #000080です。
</div>
このサンプルを表示させると、次のようになります。
この文字は赤色
この段落は、大きさ 18ピクセル、文字色は白、背景色は #000080です。
通常のウェブサイトであれば、スタイルの記述は<head>~</head> に記述するのが一般的ですが、ブログの場合、そのまま記事の投稿欄に記載してしまっても平気です。
この場合、自動改行機能を有効にしたままですと<style>タグの改行で本文が改行されて間が開いてしまいますので、自動改行は無効にしておくことをおすすめします。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス