CSSでメニューテーブルを装飾

丸ポチでメニューがリンクだとわかりやすく
テーブルで表示サイズを固定し横スクロール

丸ポチでメニューがリンクだとわかりやすく

その１

その２

その３

その４

こんな感じの丸ポチを作るには、以下のように。
※「>」が丸ポチからずれてしまう場合は、CSSの「.circle p {}」のbottomや他(right,left,top)などで調整してください。[span]の中に[p]を入れるのは良くないかもしれないので、そこらへんはご自身で工夫してください。

HTML



<table class="table">
<tr>
<td><span>その１</span><span class="circle"><p>></p></span></td>
<td>その２<span class="circle"><p>></p></span></td>
</tr>
<tr>
<td>その３<span class="circle"><p>></p></span></td>
<td>その４<span class="circle"><p>></p></span></td>
</tr>
</table>

あとは、spanとpをcssで微調整。

CSS




table td{
    border: 1px solid black;
    line-height: 40px;
}

.circle {
	margin: 10px 10px  10px auto;
 	/* サイズ指定 */ 
	width: 20px;
	height: 20px;
	/* 背景色 */
	background-color:#dd33cc;
	/* 角を丸くする */
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	display: inline-block;
	float: right;
	/* 文字の位置 */
	text-align:center;
 	vertical-align: bottom;
}
.circle p {
  color:#000000;
  position: relative;
  bottom:50%;
  font-size:0.7em;
}

テーブルで表示サイズを固定し横スクロール

HTML



<div class="scroll">
<table class="table">
<tbody>
<tr>

<?php for($i = 0;$i < 30;++$i): ?>
<td style="border: none;width:30px;">
<div class="hover"><img src="hogehoge.jpeg" style="max-width:100px;border-style:none"></div>
</td>
<?php endfor; ?>
</tr>
</tbody>
</table>
</div>

ポイントは、クラスで指定したtableとscrollです。

レコードを30枚並べてみました。重なって表示されてしまっていますが、<td>に指定しているwidthのサイズと画像のサイズを合わせれば重ならずに表示されます。

imgのstyleにmax-widthを使用しているのはPCとスマホの画面にレスポンシブ対応させるためです。

画像のブロック<div>にz-indexを使っているのでカーソルを置くとそのレコードが１番上に表示されます。今回は全て同じレーベルのレコードを並べてしまっているので面白くはありませんが..

※＜？PHP for…はphpプログラムのループ処理です。(30回繰り返しています。)

CSS



.table{
	table-layout: fixed;
}

.scroll{
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}


.scroll::-webkit-scrollbar{/*tableにスクロールバーを追加*/
	height: 5px;
}

.scroll::-webkit-scrollbar-track{/*tableにスクロールバーを追加*/
	background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {/*tableにスクロールバーを追加*/
	background: #BCBCBC;
}

.hover:hover{
	position:relative;
	z-index:1;
}