ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1906-01-10はてなダイアリーガイド「CSSセレクタ - photoモ

CSSセレクタ - photoモジュール

セレクタは全体が「ul.hatena-photo」。

いっこいっこの画像が「ul.hatena-photo li」または「img.hatena-photo」。

画像はリンクになっているので「a img.hatena-photo」でも。リンク状態によって変える場合は

  • a img.hatena-photo
    • a:link img.hatena-photo(未訪問)
    • a:visited img.hatena-photo(未訪済み)
    • a:hover img.hatena-photo(マウスオーバー時)
    • a:active img.hatena-photo(クリック時)

応用技は、キーワード「photoモジュール」にも載っています。

ブラウザによって、画像のまわりに枠が表示されるのをやめたい時は(すべての画像で枠が表示されるのをやめたい時は『img {border: none;}』)

img.hatena-photo {
 border: none;
}

のようにします。

HTML構造概略

 <ul class="hatena_photo">
  <li><a><img class="hatena_photo"></a></li>
  <li>同上</li>
  <li>同上</li>
  <li>同上</li>
 </ul>
 | 

ホームページ制作