バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[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というアプリケーションを使った実践編もご用意しております。

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

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

The following two tabs change content below.
アバター画像

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。グラフィック制作の流れを体験していただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ