CSSで文字の長さに合わせる

CSS

CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介します。RWDにも対応できるので何気に覚えておくと便利だなーと思いました。これにより文字の長さに合わせたbackgroundやborderを表示させることが可能になります。

display:inline-blockを使う

例えばこのようなHTMLを記述したとします。

<div class="sample">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>

そしてCSSで背景を指定します。

.sample {
    background: #ccc;
}

するとwidthを指定していないので普通は以下のように背景色がテキストの長さを超えて表示されます。

背景色がテキストの長さを超える

これをテキストの長さに合わせるためにはCSSを以下のように設定します。

.sample {
    background: #ccc;
    display: inline-block;
}

「display:inline-block」を追加することで以下のように横幅をテキストの長さに合わせることができます。

横幅をテキストの長さに合わせる

これを応用するとこんな感じでリストを入れたりといったことができます。一番文字の長いところに自動で幅を合わせてくれるので管理もしやすいです。

応用してみる

以下は上記のHTMLとCSSになります。

HTML↓

<div class="sample">
<p>サンプルテキスト</p>
<ul>
    <li>サンプルテキストサンプルテキスト</li>
    <li>サンプルテキスト</li>
    <li>サンプルテキストサンプルテキストサンプルテキスト</li>
</ul>
</div>

CSS↓

.sample {
    background: #eee;
    border: 1px solid #999;
    padding: 20px;
    display: inline-block;
}

.sample p {
    font-weight: bold;
}

 .sample ul {
    margin-bottom: 0;
    list-style-position: inside;
}

.sample li {
    margin-bottom: 5px;
}

というわけでブロック要素を文字の長さに合わせた横幅にするやり方でした。とりあえずいくつか試してみたところこれが一番シンプルで簡単でした。

littleboxCSSだけで作られたシンプルで可愛いアイコンセット「littlebox」前のページ

シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」次のページradialIndicator

関連記事

  1. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  2. Animated Transition Effects
  3. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  4. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  5. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  6. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP