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を使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  2. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  3. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

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

    CSS

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

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

  5. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  6. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP