TOPページ >  スタイルシート(CSS)の記述 > 複数のタグで同一のスタイルを指定する

複数のタグで同一のスタイルを指定する

ホームページやブログなどのウェブサイトで、何度も同一のスタイル(文字の大きさや色など)を指定したい場合は、スタイルに名前をつけて、タグにスタイル指定すると便利です。

 .名前 { スタイル }

という形式になります。複数の指定をする場合は、;(セミコロン)で区切って記述します。見やすいように改行してもOKです。タグの記述は、

<タグ名 class=" 名前 ">

というように、どのスタイルを適用するのか class="名前" で指定します。
使用例です。

<style type="text/css">
<!--
.test1 { color:red }
.test2 {
font-size:18px;
color:white;
background-color:#000080;

}

-->
</style>

というふうに指定をしておけば、何度でもこのスタイルを使用することができます。

<span class="test1">この文字は赤色</span>

<div class="test2">

この段落は、大きさ 18ピクセル、文字色は白、背景色は #000080です。
</div>

このサンプルを表示させると、次のようになります。

この文字は赤色
この段落は、大きさ 18ピクセル、文字色は白、背景色は #000080です。

通常のウェブサイトであれば、スタイルの記述は<head>~</head> に記述するのが一般的ですが、ブログの場合、そのまま記事の投稿欄に記載してしまっても平気です。
この場合、自動改行機能を有効にしたままですと<style>タグの改行で本文が改行されて間が開いてしまいますので、自動改行は無効にしておくことをおすすめします。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
スタイルシートでボタン風リンク文字を表示する
スタイルの共通部分をまとめて記述する
タグを入れ子にして同じクラス/ID名を使い分ける
見出しタグ(H1~H6)のスタイルを指定する
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルを指定する
タグのスタイルを指定する
外部からスタイルシートを読み込む
ページ内で一回だけスタイルを使用する
複数のタグで同一のスタイルを指定する
一時的にスタイルシートを利用
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス