TOPページ >  スタイルシート(CSS)の記述 > スタイルの共通部分をまとめて記述する

スタイルの共通部分をまとめて記述する

ホームページやブログなどのウェブサイトで、同一のスタイルを 何度も指定したいときに便利な スタイルシート(CSS)ですが、各コンテンツで 文字色や文字の大きさなど、さまざまな設定をしていると、スタイルシートも長く煩雑なものになりがちです。

こんなとき、スタイルを指定する際に、共通する部分は半角カンマで区切ってまとめて記述することができます。

<style type="text/css">
<!--
.sampleclass_A,
.sampleclass_B
{ color:red; padding:2px 5px; width:200px; }
.sampleclass_A { background-color:#FF33FF; }
.sampleclass_B { background-color:white; }
-->
</style>

<div class="sampleclass_A">サンプルクラスA</div>
<div class="sampleclass_B">サンプルクラスB</div>

このサンプルでは、共通部分(段落の幅と、文字の色および余白)をまとめて記述しています。このソースを表示させると、次のようになります。

サンプルクラスA
サンプルクラスB

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

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