スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)
  5. | 人気ブログランキング
  6. | FC2 Blog Ranking
  7. | はてなブックマークに追加
  8. | Buzzurlにブックマーク
  9. | livedoor クリップに追加

a 要素の title 属性を活用する

 最近きちんとコーディングされてる Site が増えたのか、アンカーテキストにカーソルを乗せた時に、ツールチップがポップアップされる例が多くなってきました。a 要素に title 属性が記述されているからですね、素晴らしい。

 残念なのは、時々ツールチップのテキストとアンカーテキストが同一の場合があります。title 属性とは、要素内容の補足説明ですから、同一では意味がありません。無い方が良いですね。

 良い例を紹介します。


PDFファイルを別ウインドウで開くとき
通常は別ウインドウを開くとユーザビリティが低下しますが、PDF書類・WORD書類等は別ウインドウを開くほうがベターですね。そこで
例:
  <a href="example.pdf" target="_blank" 
  title="example.pdf PDF書類、別ウインドウが開き、Adobe Reader が起動します。">
  サンプルファイル
  </a>
  
このとき、【[ホームページ作成]All About】で紹介されていた属性セレクタで、スタイルシートを柔軟に! - [ホームページ作成]All About を併用すると、ツールチップとスタイルシートで注意を喚起できるため、利便性が高いです。
例:
  a[target="_blank"] { font-style: italic; }
  
ただし、IE 6 は属性セレクタに対応していない そうです。またIE 7 でも、DOCTYPE宣言がないと属性セレクタは無視される そうです。
サイトロゴ
サイトのトップページ以外のページでは、トップページへのリンクが張ってあるのが利便性が高いです。
例:
  <a href="http://www.example.co.jp/" title="サイトのトップページへ戻る。">
  <img src="images/logo.gif" alt="サンプル株式会社">
  </a>
  
ロゴのalt属性は「サイト名」(文脈上、会社名やプロジェクト名)が適切です。「サイトのトップページへ戻る。」は不適切ですね。
サイトロゴを見出しh1にしたいとき
あまりお薦めは出来ませんが、サイトロゴが見出しh1。
例:
  <h1 title="サンプル株式会社">
  <a href="http://www.example.co.jp/">
  <img src="images/logo.gif" alt="サンプル株式会社">
  </a>
  </h1>
  
悩ましいですが、a要素の title="サイトのトップページへ戻る。" は外した方がベターですね。

◆関連情報

スポンサーサイト
  1. 2007/01/29(月) 09:00:00|
  2. WebSite構築|
  3. トラックバック:0|
  4. コメント:0
  5. | 人気ブログランキング
  6. | FC2 Blog Ranking
  7. | はてなブックマークに追加
  8. | Buzzurlにブックマーク
  9. | livedoor クリップに追加
<<SEOとしてページタイトルにキーワードを大量に羅列する事への3つの疑問 | ホーム | 「SEO 対策のターゲットにはならない」Wikipedia が外部リンクに nofollow 属性を導入(MarkeZine より)>>

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://48luck.blog9.fc2.com/tb.php/242-1c67914c

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