[CSS]クラスの複数指定

とある限定キャンペーンのため、一晩で某コンビニを約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というアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

新しい仲間!

 

8月の夏休みは、先日の台風で大きな被害を受けた
紀伊半島を旅してきた「な」です。
世界遺産「那智大社」や「那智の滝」も見てきたばかり、
親戚宅も被害にあうなど、改めて自然の驚異を実感しております。
被災された皆様に、心よりお見舞い申し上げます。

 

さて、今日はスクールに来た新しい仲間をご紹介!

新しいウォーターサーバー

スクールロビーのウォーターサーバーが新しくなりました!!!

 

一見、炭酸飲料が出てきそうな見た目ですが、、、

白いコックをひねると冷たい「お水」が出てきます!

冷え冷えです!!(お湯だって出ます)

 

お隣においてあるコーヒーも、ご自由にお召し上がりいただけます。
(コーヒーはスタッフがを厳選しました♪)

もちろん無料です!

 

パソコン操作で疲れた眼と、頭をロビーでリフレッシュ!
ぜひぜひご利用ください☆

 

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

InDesign 選択方法

1ヶ月ぶりの登場の間に、富士山登頂を果たした「あ」です。
これで私も自称『山ガール』です。
1回は登りたい!と思っていましたが、登頂した方皆いうのが、
「1回でいい。」私もです。別の山に登ってみたくなりました。
しかし、最近『○○ガール』って多いですよね~。

ではまたInDesignの小ワザを。
フレームが重なると後ろのフレームが選択し辛いことがあります。

そんな時には!

win→『Ctrl』

mac→『コマンド(アップルマーク)』キー

押しながらクリックしてみてください。
クリックするたびに後ろのアイテムに選択が移動できます!

基本からご興味ある方は、バンフートレーニングスクールのInDesign講座にてお待ちしております。

これからみなさま紅葉の秋、食欲の秋、勉強の秋楽しんでください。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ