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. Media Queriesの@media
  2. (cs)spinner

    CSS

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

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

  3. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

  4. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  5. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  6. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP