意外と知られていない。 だけど、知っていると超便利な HTML の書き方をお教えします。
こっそり書いているつもりもありませんが、アクセス数が少ないので結果的に、こっそりお教えします (涙)
HTML はどうやってもなんとかブラウザで表示できるので、
「 HTML なんて、簡単だ 」
「 HTML も CSS も誰でもできる」
と、思われがちです。
普通の人はそれでもいいでしょう。”ホームページ” (ウェブページ) が作れたらそれで OK ですから。
でも、それを仕事にしている方がそう思っていたら、ちょっと問題あるかもしれません。わかった気になって勉強をやめてしまいますからね。
HTML も CSS も奥が深いですよ。
甘く見ていた人は、精進したほうが良いかもしれません。
と、昔の自分に語りかけてから (笑)、本題に入りたいと思います。
今日のお題はズバリこれ、
「CSS のクラスは複数指定できる」
です。
使い方
次のように、空白で区切って、複数並べるだけです。
<span class="abc xyz">これは文字です</span>
もちろん、span タグだけではなく、class を指定するところではどこでも使えます。
例
使って、便利な状況は、フォームの入力値チェックなどで、正しい入力の背景は白、誤った入力の背景職は黄色などのように分ける場合です。
.invalid { background-color: yellow; }
.ok { background-color: white; }
としておき、入力チェックが失敗したところだけ、
<input type="text" class="applform invalid">
のように、クラスを追加してあげれば、元の書式を受け継ぎながら、追加の書式を設定することが出来ます。
最後に発展的な話題を一つ。 ブラウザにも依存しますが、CSS を上手に使えばこんなことも簡単にできます。
CSS で簡単にできるエレガントなボックス