webruary

もしかしてあまり知られてない様な…。自分の周りだけ？
と言うことで、実はタグにclassを複数同時指定出来るというお話。
トップ絵に意味はありません。単なるイメージです。

今回は初めてデモページを作ってみました。親切丁寧を目標に。
サンプルとこの記事を書いたきっかけは続きから。

ここから続き

タグにclassを複数同時指定するデモページ

気をつける点といったら、cssで記述する順番くらいですかね。
あたり前ながら、「相殺したい値」より後に「相殺する為の値」を記述します。
追加だったら問題ないんですが。

ちなみに、自分がこの方法を知ったのはまだcss駆け出しの頃。2年くらい前？
海外のcssギャラリーサイトでたまたま見つけたイイ感じのサイトの、たまたまソースを見たときに『class="hoge hoge"』ってなってるのを見つけて、コリャなんじゃ(ﾟДﾟ )？と思ってcssファイルを見たら2つのclassが指定されてる模様。
へぇ～。よくこんなやり方思いつくねぇ～。さすが海外。とか思ってたのを覚えてます。

なんで今更記事にしたかと言うと、会社の同じWebサイト制作担当の人が知らなかったから…。
実はマニアックな方法なんじゃね？って思ったからです。 まぁ、ただ単にやる機会が無いからダレもやってないだけかもしんないんですけど。

そんな自分も実際そんなに使ってないです。
と言いつつもこのブログのテンプレートには使ってたりしますが。

#contents.permanent div.entry{
  padding-bottom:15px;
}

#contents.permanent div.entry div.article p.article-continue{
  color:#777;
  margin-top:25px;
}

つまりは、記事の個別ページのときだけ「<div class="entry">」と「<p class="article-continue">」のpaddingとmarginを変更してます。
トップページとかは基本<div id="contents">ですが、個別ページのときだけ同時にclass="permanent"も出力されるように設定してます。

こぉ考えると、CMSとかブログとかの基本テンプレート使いまわし系には結構役立つ方法かもしんないですね。
機会があったら試してみて下さい。