[CSS]クラスの複数指定
2011年9月27日(火曜日)
とある限定キャンペーンのため、一晩で某コンビニを約50軒まわったというちょっと痛い記録を更新したスタッフ「ほ」です。
最近、急に涼しくなりましたが、みなさまお風邪など召されてませんでしょうか?
私は思い切り風邪ひきました…orz
さて、今日はWebネタでいきたいと思います。
CSSで装飾を行う際に個別の装飾を担当してくれるクラス。
実は1つの要素に対して、複数のクラスを適用できたりします。
例えば、以下のような4つのクラスを作ったとします。
.hot {
color: #FFF;
background-color: #F90;
border: 3px solid #F00;
}
.cool {
color: #00F;
background-color: #9FF;
border: 3px solid #00F;
}
.wide {
padding: 20px;
width: 500px;
}
.narrow {
padding: 10px;
width: 200px;
}
クラス「hot」は、赤やオレンジを基調にしたカラーリングの指定。
クラス「cool」は水色やブルーを基調にしたカラーリングの指定。
クラス「wide」は広めの幅の指定。
クラス「narrow」は狭い幅の指定。
そして以下の4つのボックスを用意しました。
<div>
クラス「hot」+クラス「wide」
</div>
<div>
クラス「hot」+クラス「narrow」
</div>
<div>
クラス「cool」+クラス「wide」
</div>
<div>
クラス「cool」+クラス「narrow」
</div>
これらのボックスにクラスを2つずつ適用してみます。
<div class="hot wide">
クラス「hot」+クラス「wide」
</div>
<div class="hot narrow">
クラス「hot」+クラス「narrow」
</div>
<div class="cool wide">
クラス「cool」+クラス「wide」
</div>
<div class="cool narrow">
クラス「cool」+クラス「narrow」
</div>
このように、1つのDIVボックスに2つのクラスを適用する場合、
クラス名を半角スペースで区切って入力します。覚えておくと何気に便利なテクニックですので、試せそうなところがあったらぜひ試してみてください。
「クラスってか、そもそもCSSがよくわかんないんだよね」って方は、バンフートレーニングスクールのWeb講座にてお待ちしております。
バンフートレーニングスクールでは、ホームページ制作講座を開講しています。
このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。
まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。
詳しくは、下記詳細ページをご覧ください。
スタッフ 「ほ」
最新記事 by スタッフ 「ほ」 (全て見る)
- [Photoshop]生成塗りつぶしを使ってみよう - 2023
- [Premiere Pro]使わなかったデータをプロジェクトから除外する - 2022
- [新講座]イラストレーター(オンライン講座)始めました - 2022