このページの本文へ
ナビゲーション

サンプルダウンロード

トップページ > サンプルダウンロード > 法則64 クリック領域を大きくしてユーザビリティを高める

法則64 クリック領域を大きくしてユーザビリティを高める

XHTMLソース

<ul class="special">
 <li><a href="#"> 特集記事タイトル</a></li>
 <li><a href="#"> 特集記事タイトル</a></li>
 <li><a href="#"> 特集記事タイトル</a></li>
 <li><a href="#"> 特集記事タイトル</a></li>
 <li><a href="#"> 特集記事タイトル</a></li>
</ul>

CSSソース【1】

ul.special li a {
     display: block;
     width: 146px;
     padding-left: 18px;
     background: url(../img/list.gif) no-repeat 0em .2em;
}

CSSソース【2】

a {
     padding: 0 5px;
}

第4章 ユーザビリティを向上させるCSSデザインの法則 一覧

  1. 法則60 CSSのみでロールオーバー効果を実現する
  2. 法則61 パンくずリストは階層構造を考えて作る
  3. 法則62 文書構造が明確にわかる縦並びのメニューを作成する
  4. 法則63 CSSのみでドロップダウン型メニューを作る
  5. 法則64 クリック領域を大きくしてユーザビリティを高める
  6. 法則65 リンク先のファイルタイプを利用者に明示する
  7. 法則66 リンク先が新規ウィンドウで開くことを明示する
  8. 法則67 CSSで擬似フレームを作成する
  9. 法則68 代替スタイルシートを利用して複数のスタイルシートを切り替える
  10. 法則69 印刷に適した印刷用スタイルシートを作成する
  11. 法則70 フィードにCSSを適用してユーザビリティを向上させる

このページのトップへ


取り扱いオンラインショップ
  • インプレスダイレクト
  • Amazon
  • 楽天ブックス
  • Kinokuniya BookWeb
  • 7&Y セブンアンドワイ
  • livedoor BOOKS