トップ  »  東京Webデザイナー日記リターンズ  »  MT4LP5+Movable Typeプロフェッショナルスタイル  »  読者からの質問その1:class属性の複数の値に関して

読者からの質問その1:class属性の複数の値に関して

かなり時間がたってしまい恐縮なのですが、読者の方よりこのようなご質問をいただいておりました。

「mirai003」の「entry_list.mtml」において、

<body class="<mt:IfCategory name="最新情報">individualPageNews<mt:Else>individualPage</mt:IfCategory>
<mt:TopLevelParent> <mt:CategoryBaseName /></mt:TopLevelParent>">
という部分がございますが、この最後の<mt:TopLevelParent> <mt:CategoryBaseName /></mt:TopLevelParent>
は、どのように効いているのでしょうか?

、と申しますのは、style.cssでは、
* 2.wireframe において、例えば、
body.individualPageNews div#mainContent {
といった感じで、individualPageNewかindividualPageまでしか規定していないので、<mt:TopLevelParent> <mt:CategoryBaseName /></mt:TopLevelParent>
がくっついてしまうと、スタイルが適用されなくなってしまうような気がしてならないのですが・・・?

このご質問に関しまして、一段階ずつ考えてみたいと思います。

まず、<mt:TopLevelParent> <mt:CategoryBaseName /></mt:TopLevelParent>の部分ですが、「(そのブログ記事リストの)最上位の親カテゴリの出力ファイル/フォルダ名」を出力させています。

たとえば、以下のページのbody要素をご覧ください。
タイムマシン|製品とサービス|未来合成株式会社

<body class="individualPage products_services">

と出力されています。

「タイムマシン」は、「製品とサービス」のサブカテゴリですので、この部分には最上位の親カテゴリである「製品とサービス」の出力ファイル/フォルダ名=「products_services」が出力されているわけです。

さて、このbody要素のclass属性の値には、「individualPage」と「products_services」という二つの値が半角スペースを挟んで入っています。このように、class属性の値には、半角スペースで区切って複数の値を入れることができます。

参考ページ

CSS2.1(仮)- セレクタ(The Web KANZAKI)

上記ページの*23が、参考になるかと思います。(神崎先生のWebサイトは、本当に本当に勉強になりますので、おすすめです!)

さて、この二つのclass属性値をCSS内の記述で利用する際には、

body.individualPage div#mainContent {
body.products_services div#mainContent div.h1wrapper {

などというように、どちらか片方のclass属性値だけを使って指定することも可能なのです。

簡単な説明ではありますが、お分かりいただけましたでしょうか?

またご感想などお寄せいただければ幸いです。

[2008年6月17日]   はてなブックマーク - 読者からの質問その1:class属性の複数の値に関して

トラックバック(0)

このブログ記事に対するトラックバックURL

http://cremadesign.jp/mt401/mt/mt-tb.cgi/809

コメントする

このページの先頭へ

東京ナイロンガールズ

比較的人気の記事

crema design menu