CSS あれこれ

This category is - CSS -

すんません。前回の記事で偉そうな事書きましたが、サムネイル画像を取得するサービスで見ると崩れてるところが。いくつかチェックしたんですが。

CSS セレクタ対応表」を見つけたんですが、これから察するにIE6だと駄目みたい(?)です。せっかく頑張ったのに。。。CSSはほんとブラウザによってずれが生じるから難しい。

元、戻しますかね。。。

って事で前回の記事は「こんな方法もある!」と言う備忘録としておきます。以上、ご迷惑おかけしました!

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

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

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

  • <ul><li>~</li></ul>だけで表現する
  • <ul>~</ul>を<div>~</div>等のボックスで囲まない
  • 「id」「class」などを一切使わずHTMLタグだけで表現(CSSで装飾)

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

  1. <ul>
  2. <li><a href="http://sns.kazuking.net/" title="kazuking sns"><strong>kazuking sns</strong><br />
  3. <em>完全招待制のソーシャルネット<br />ワーキングサービス。</em></a></li>
  4. <li><a href="http://web.kazuking.net/" title="kazuking web"><strong>kazuking web</strong><br />
  5. <em>管理人が利用している無料のWEB<br />作成ツール&amp;スクリプトを紹介。</em></a></li>
  6. <li><a href="http://blog.kazuking.net/" title="kazuking blog"><strong>kazuking blog</strong><br />
  7. <em>Movable Typeで構築の徒然日記。<br />リアルタイムな情報を満載!</em></a></li>
  8. <li><a href="http://seo.kazuking.net/" title="kazuking seo"><strong>kazuking seo</strong><br />
  9. <em>実験&検証を気長にする予定。見<br />ても中身はありません。</em></a></li>
  10. </ul>

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

  1. #tabBoxIndex + ul,
  2. #tabBoxIndex + ul a {
  3. list-style: none;
  4. text-align: left;
  5. }
  6. #tabBoxIndex + ul li strong {
  7. text-decoration: underline;
  8. }
  9. #tabBoxIndex + ul li em {
  10. width: 164px;
  11. font-size: 9px;
  12. color: #000;
  13. line-height: 1.4em;
  14. }
  15. #tabBoxIndex + ul li {
  16. float: left;
  17. }
  18. #tabBoxIndex + ul li a {
  19. display: block;
  20. font-size: 12px;
  21. text-decoration: none;
  22. width: 164px;
  23. height: 60px;
  24. padding: 0 0 0 70px;
  25. }
  26. #tabBoxIndex + ul > li {
  27. background: url(../img/6045_sns.jpg) no-repeat;
  28. }
  29. #tabBoxIndex + ul > li + li   {
  30. background: url(../img/6045_web.jpg) no-repeat;
  31. }
  32. #tabBoxIndex + ul > li + li + li {
  33. background: url(../img/6045_blog.jpg) no-repeat;
  34. }
  35. #tabBoxIndex + ul > li + li + li + li {
  36. background: url(../img/6045_no.jpg) no-repeat;
  37. }

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

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

ん~~~。説明が下手&支離滅裂(汗)

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

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

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

Sponsored Link

Link

Web Tool

Banner Link

ホームページ作成 ランキング

SEO Stats

デル株式会社 

Right Relation