Webシステム用管理者画面作成マニュアル デザイン/HTML/CSS/JavaScript集
CSS

ページ制御のクリックする場所を増やす

一覧表を作成する場合、最下部にページ制御のリンクを設置することが多いと思います。
しかし、これ、数字のみにリンクがかかっており、クリックしにくいときがありませんか?私はすっごくあります。
ショッピングカートを設置した場合も、このページ制御のリンクがクリックしにくいので、文字を大きくしたりいろいろクライアントから連絡が入ることがあります。
これを解決するために、ページ制御の数字をクリックしやすくしたCSSを作成しました。
ページ制御のサンプル

見た目わかりやすいように、どの程度クリック範囲があるか色で分けました。

HTMLソースのサンプル
※数字部分のソースには、余計な改行・半角スペースを入れないほうが綺麗に出来上がります。

<!-- ページ制御 -->
<table border="0" cellpadding="0" cellspacing="0" class="page">
<tr>
<td>
<a href="#" class="next_back">&lt;&lt;前の10件</a><a href="#" class="no">1</a><a href="#" class="no">1</a><a href="#" class="no">1</a><a href="#" class="no">1</a><a href="#" class="no">1</a><a href="#" class="no">1</a><a href="#" class="no">1</a><a href="#" class="next_back">次の10件&gt;&gt;</a></td>
</tr>
</table>
<!-- //ページ制御 -->
CSSのサンプル
.page{
margin:10px auto 10px auto;
padding:0px 0px 0px 0px;
}
.no{
width: 0px;
margin:0px 1px 0px 1px;
padding:3px 5px 3px 5px;
text-align:center;
}
.next_back{
width:70px;
padding:3px 5px 3px 5px;
text-align:center;
}
▲UP
エルテ化粧品
▲「エルテ化粧品」スポンサーサイトです。
広告募集中
(c)kanri-gamen