メニュー、アクセスなどのテーブル要素

メニュー、アクセスなどで使用できるBOXを紹介。
こういった整列させた表はテーブルなどで作ることが多いが、元のテーマのCSSが邪魔することが多々あるため、BOXで作成。

CSS

*——　アクセス表　——*/
.access_box {
	margin: 0;
}
.access_box ul {
	margin: 0;
	list-style: none;
}
.access_box ul li {
	padding: 1em 0;
	border-bottom:1px dashed rgba(0,0,0,0.2);
}
.access_box ul li a {
	text-decoration: none;
	display: block;
}
.access_box-left {
	display: inline-block;
	width: 20%;
	margin-right: 10%;
	vertical-align: middle;
  text-align: center;
}
.access_box-right {
	display: inline-block;
	width: 70%;
	vertical-align: middle;
}

*——　アクセス表　——*/

.access_box {

margin: 0;

}

.access_box ul {

margin: 0;

list-style: none;

}

.access_box ul li {

padding: 1em 0;

border-bottom:1px dashed rgba(0,0,0,0.2);

}

.access_box ul li a {

text-decoration: none;

display: block;

}

.access_box-left {

display: inline-block;

width: 20%;

margin-right: 10%;

vertical-align: middle;

text-align: center;

}

.access_box-right {

display: inline-block;

width: 70%;

vertical-align: middle;

}

HTML

<div class="access_box">
<ul>
<li><span class="access_box-left">住所</span><span class="access_box-right">030-0011　青森県青森市堤町2-1-7</span></li>
<li><span class="access_box-left">電話番号</span><span class="access_box-right">017-718-3913</span></li>
<li><span class="access_box-left">交通手段</span><span class="access_box-right">青森駅　徒歩3分</span></li>
<li><span class="access_box-left">営業時間</span><span class="access_box-right">18:00 ～ 翌2:00</span></li>
<li><span class="access_box-left">定休日</span><span class="access_box-right">不定休</span></li>
</ul>
</div>

<ul>

<li>住所030-0011　青森県青森市堤町2-1-7</li>

<li>交通手段青森駅　徒歩3分</li>

<li>定休日不定休</li>

</ul>

</div>

CSS

HTML

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル