webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


スポンサーサイト

Category:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加

Sponsored Links

Comment : -

Comment Form

Track Back : -

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/19-01af85d0

トラックバック一覧

タグに複数のclassを同時指定する方法。

Category:Web

タグに複数のclassを同時指定。

もしかしてあまり知られてない様な…。自分の周りだけ?
と言うことで、実はタグに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とかブログとかの基本テンプレート使いまわし系には結構役立つ方法かもしんないですね。
機会があったら試してみて下さい。

このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 0

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/19-01af85d0

トラックバック一覧

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。