[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
リストのマス目でロールオーバーボタンを作ると？
「リストでマス目を作る その３」のリスト項目の内容領域をロールオーバー風のボタンにしたサンプルをご紹介します。特に目新しいテクニックではありませんが、入れる中身や使う場面によっては意外に活用できるかも知れません。
完成例（３行３列 縦方向）
分かりやすくするために、枠の幅を太めに20ピクセルとし、内容領域は一辺が80ピクセルの正方形に設定しました。リスト項目は「リストでマス目を作る その３」と同様に縦方向に並んでいます。
ＨＴＭＬサンプルコード
マス目１行毎に１つのＵＬ要素を使い、３列になるようにＬＩ要素を３つ入れてあります。マス目を作るスタイルシートの詳細については、「リストでマス目を作る その１」をご覧ください。
<div id="mesh">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
<ul>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
</ul>
<ul>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
</ul>
</div>
リンク要素はインラインレベル要素なので、幅を指定するためにディスプレイプロパティでブロックレベル要素に変換した上で、領域をマス目の中身と同じにして、擬似クラスを設定してロールオーバー化しています。
