はじめに
Webページをデザインする際、CSSは欠かせないツールとなっています。
特に、CSSクラスを利用することで、デザインの再利用や効率化が可能となります。
本記事では、初心者の方でも手軽にCSSクラスの複数利用ができるよう、基本的な使い方から応用テクニックまでを解説します。
●CSSクラスを複数使う方法
CSSクラスを複数使うには、クラス名を半角スペースで区切って複数指定します。
例えば、次のようにクラス名を指定すると、idが”sample”の要素とclassが”box”の要素に、同じスタイルが適用されます。
#sample, .box {
color: red;
}このように、複数の要素に同じスタイルを適用する場合には、CSSクラスを複数使うことができます。
また、CSSクラスは、同じスタイルを適用するだけでなく、異なるスタイルを適用するためにも利用できます。
●CSSクラスの使い方の例
次に、CSSクラスの使い方の例をいくつか紹介します。
【例1】 idが”sample”の要素に、背景色と文字色を指定する場合。
HTML
<div id="sample">Hello World!</div>CSS
#sample {
background-color: yellow;
color: blue;
}【例2】 classが”box”の要素に、マージン、パディング、枠線を指定する場合。
HTML
<div class="box">This is a box.</div>CSS
.box {
margin: 10px;
padding: 10px;
border: 1px solid black;
}【例3】 classが”btn”の要素に、ボタン用のスタイルを指定する場合。
HTML
<button class="btn">Click me!</button>CSS
.btn {
display: inline-block;
padding: 10px 20px;
background-color: blue;
color: white;
border-radius: 5px;
cursor: pointer;
}これらの例を参考にして、自分でCSSクラスを作成して使ってみましょう。
●CSSクラスを複数使う際の注意点
複数のCSSクラスを使う場合、スタイルの優先順位によって、どのクラスが適用されるかが変わります。
具体的には、次のような優先順位があります。
- !importantが指定されたスタイル
- インラインスタイル
- idセレクタによるスタイル
- classセレクタによるスタイル
- タグセレクタによるスタイル
- ユニバーサルセレクタによるスタイル
つまり、idセレクタで指定されたスタイルは、classセレクタで指定されたスタイルよりも優先されます。
また、同じセレクタで複数のスタイルが指定されている場合は、後に指定されたスタイルが優先されます。
このような優先順位に気をつけて、適切にCSSクラスを使いましょう。
●応用例：レスポンシブWebデザインにおけるCSSクラスの使い方
最近は、スマートフォンやタブレットなどのモバイル端末でもWebサイトを閲覧することが一般的になってきました。
このような端末に対応するために、レスポンシブWebデザインが注目されています。
レスポンシブWebデザインとは、端末の画面サイズに合わせてWebサイトのレイアウトを自動的に変化させる技術です。
この技術には、CSSクラスを使ったスタイルの切り替えが欠かせません。
次に、レスポンシブWebデザインにおけるCSSクラスの使い方の例を紹介します。
【例4】 PC版とスマートフォン版で表示する画像を切り替える場合。
HTML
<div class="img-wrapper">
<img src="pc.jpg" class="pc-img">
<img src="sp.jpg" class="sp-img">
</div>CSS
.pc-img {
display: block;
}
.sp-img {
display: none;
}
@media (max-width: 768px) {
.pc-img {
display: none;
}
.sp-img {
display: block;
}
}この例では、クラス名に”pc-img”と”sp-img”を使って、PC版とスマートフォン版の画像を切り替えています。
また、@mediaルールを使って、画面幅が768px以下の場合には、PC版の画像を非表示にし、スマートフォン版の画像を表示するようにしています。
このように、CSSクラスを使って、レスポンシブWebデザインを実現することができます。
まとめ
CSSクラスを複数使うことで、スタイルの適用範囲を絞り込むことができます。
また、レスポンシブWebデザインにおいても、CSSクラスを使ったスタイルの切り替えが欠かせません。
しかし、複数のCSSクラスを使う場合は、優先順位に注意しなければなりません。
適切にCSSクラスを使って、美しいWebサイトを作り上げましょう。
