意外と知られていない。 だけど、知っていると超便利な 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 で簡単にできるエレガントなボックス