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;
}

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

関連記事

  1. Media Queriesの@media
  2. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  3. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  4. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  5. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  6. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP