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. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

  3. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

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

    CSS

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

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

  5. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

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

    CSS

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

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

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP