さくらのレンタルサーバーであれこれやってます。

kazuking searchトップページのCSSを若干書き直してみたんですが、少し今までとは違った記述の仕方に専念してみました。理由は「勉強ついで」なんですが出来る限りHTMLを簡素化してみたいと考えたからです。「class」とか「id」をどの程度減らせるかなと思い･･･。

まぁ、検索エンジンのクローラーがHTML「だけ」を読み込んでるとした場合、無駄な記述は限りなく少なくしておいたほうが何となく「検索エンジンに優しい」感じがしたからです。ここでは一例としてトップページの「画像リンク」の部分。ソース見ればすぐなんですけどね（笑）

トップページにはこんな画像リンクがあって、その下の広告に合わせてみてます。画像１枚のサイズは（width:"234" height="60"）でそれが４種類あるって事です。この画像リンクを表現する方法は様々あるわけですが今回の考え方は、

と言う事です。逆にCSSは複雑になり気味ですがそれも又一興。と言うよりこっちのが多分ですが楽です。でもってそれがSEO対策にも繋がる！とか勝手に妄想してます。結局はW3Cがある種の法律なんじゃないかと、これまた勝手に妄想しております。そんなわけで出来たのが下記です。

ちょっと「<br />」が無駄に多いのは置いといて。取りあえず「class」や「id」などを一切使わずにそれぞれの画像（背景）を入れ替えてみました。この手法は何となく知ってたんですが実践してみたのは「３日前」です。ちょっと感激でした。でもってCSSはこんな感じです。

独学なんで記述の仕方が正しいかは不明ですがCSSって便利だなと思いました。「+」とか「>」なんか使いませんでしたので今まで･･･。これを簡単に説明すると、<ul>～</ul>で括られた画像リンクの直前には「#tabBoxIndex」というボックスがあるんです。画面上部の「タブ切り替え」の部分ですね。

その次に<ul>～</ul>ってボックスがあるんですが、それを表現すると「#tabBoxIndex + ul」となるようです。「隣接セレクタ」とか言って直後の要素にマッチするようです。でもって「ul > li」と書くと<ul>～</ul>内の直後の要素にマッチするとの事。

ん～～～。説明が下手＆支離滅裂（汗）

CSS1とかCSS2とか何が何だか知りませんが、こういう記述方法をしておけば結構スリムなHTMLに出来そうですね。便利です。それにしても「XHTML + CSS」は頭にスムーズに入ってくるのに「PHP or Perl or JavaScript」とか動的な言語はさっぱりです･･･。

やっぱ好き好きってあるのかもですね。取りあえずネタがなかったので暇な更新してみました。でわ。

※IE6では使えない手法のようです。。翌日気付きました（悲）