CSSで文字数により背景自動拡張を行う方法

CSS

ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。

HTMLコード

<div class=”box”>
    <span class=”left”></span>
    <span class=”center”>メ</span>
    <span class=”right”></span>
</div>

<div class=”box”>
    <span class=”left”></span>
    <span class=”center”>メニ</span>
    <span class=”right”></span>
</div>

<div class=”box”>
    <span class=”left”></span>
    <span class=”center”>メニュ</span>
    <span class=”right”></span>
</div>

<div class=”box”>
    <span class=”left”></span>
    <span class=”center”>メニュー</span>
    <span class=”right”></span>
</div>

CSSコード

<style>
.box {
    height: 36px;
    display: inline-block;
    background: #f00;
    line-height: 40px;
}

span {
    float: left;
    height: 40px;
}

.left, .right{
    width: 25px;
}
.left {
    background: url(images/sprite-menu.jpg) left 0px;
}

.right {
    background: url(images/sprite-menu.jpg) right 0px;
}

.center {
    background: url(images/sprite-menu.jpg) center 0px;
}

</style>

タイトルとURLをコピーしました