スポンサーサイト 

カテゴリ:スポンサー広告

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

セレクタの組み合わせ 

カテゴリ:備忘録

セレクタとはCSSの書式においてスタイルの適用先を示す部分のことである。

HTML内の要素(いわゆるタグ)はそのままセレクタとすることが出来る。
body要素にスタイルを設定する場合にはbody{表示指定}というように記す。

HTML内にid="aho"と属性を設定しそれをスタイルの適用先とするのをidセレクタという。
スタイルシート内では#aho{表示指定}というように記す。

HTML内にclass="baka"と属性を設定しそれをスタイルの適用先とするのをクラスセレクタという。
スタイルシート内では.baka{表示指定}というように記す。

上記セレクタを半角スペースで区切って表記することで特定の適用先とすることが出来る。
これを子孫セレクタという。
例えばA B C{表示指定}と指定した場合、要素Aの中に含まれるB要素の中から要素Cにあてはまるものに対する指定ということになる。

この辺はどこでも書いてある基本なのだが、以外と陥りやすい罠もあったりするし、時にはもっと効率よく指定することができたりすることもある。

その為のルールについて


スポンサーサイト

CSSハック 

カテゴリ:備忘録

ほとんどのCSSハックはセレクタのバグを扱ったものです。以下は、ブラウザバージョンと、要素を選択するためのセレクタの開始部分を示したものです。これらのハックはブラウザのバグや欠けている機能を利用しているので、あまり知られていない、または将来登場するブラウザでは結果が異なるかもしれません。ご注意ください。
セレクタのすべては有効なCSSを使用します。

IE 6 and below (IE6以下)

* html {} 


IE 7 and below (IE7以下)

*:first-child+html {} * html {} 


IE 7 only (IE7のみ)

*:first-child+html {} 


IE 7 and modern browsers only (IE7 とモダンブラウザ)

html>body {} 


Modern browsers only (not IE 7) (IE7 以外のモダンブラウザ)

html>/**/body {} 


Recent Opera versions 9 and below (最近の Opera9 以下)

html:first-child {} 


「IE7 and below」のハックが、「IE6 and below」と「IE7 onle」の、2個の別々のセレクタであることに注意してください。両方のセレクタに、必要とするセレクタの残りを加えなければなりません。また、「IE6 and below」がセレクタを正しく解析することができなくなるので、2つのセレクタをカンマで結合することはできません。

上のセレクタはhtml要素、または body要素を選択します。これは完全なセレクタの始まりとして使用されるべきです。

例えば、あなたが必要とするセレクタが

#foo .bar


であり、それをIE7だけに適用したいのであれば、セレクタは

*:first-child+html #foo .bar


になるでしょう。

以上、http://www.koikikukan.com/archives/2006/11/17-015033.phpより抜粋引用

テンプレートカスタマイズ 

カテゴリ:テンプレート

ヘッダーのグローバルナビを設定する


newbnote、roundsilほぼ共通です。

管理画面の 「テンプレートの設定」 「HTML編集」 より、下画像のピンクに反転している部分を書き換えてください。
<li><a href="">menuXX</a></li>がワンセットでひとつのメニューになります。
上をコピーしたり削除することで数を変更できます。

【書き換え例:menu02をYahoo! JAPANへのリンクにする場合】


<a href="">menuXX</a>を<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>と書き換えます。

image3.gif

【メニュー数を変更した場合】


管理画面の 「テンプレートの設定」 「スタイルシート編集」 より、下画像の黄色に反転している部分の数値を書き換えてください。
image2_20090325234222.gif
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。