ホーム(記事一覧)へ

htmlやCSSで幅(width)を文字数など中身に合わせる方法

divで文字を囲っても文字数に関係なく横幅いっぱいになってしまいます。

「右のスペースが無駄だから文字数に合わせて幅を狭くしたい!」

htmlやCSSで幅(width)を文字数など中身に合わせる方法を解説します。

【結論】display: inline-block

display: inline-blockを指定すると文字数など中身に合わせた最小の横幅になります。

中身の文字

もう少し多いテキスト

中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい
<style>
.example{
    /*コレ*/display: inline-block;
    border: 1px solid #333;
    padding: 5px;
    background: #f2f2f2;
    margin: 5px 0;
}
</style>
<div class="example">中身の文字</div><br>
<div class="example">もう少し多いテキスト</div><br>
<div class="example">中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい中身が文章などで長文のときは横幅いっぱい</div>

inline-blockはblock要素とinline要素の両方の特徴をもった要素です。

要素が連続で並んだり、中身に合わせて幅が決まるという点はinlineの特徴です。そのため改行にはbrなどが必要です。

inlineのままだとうまく効かないpaddingやmarginなど指定できるのはblockの特徴です。

CSS displayについて詳しくはこちら↓

【htmlだけ】table

table,tdも文字数など中身に合わせた最小の横幅になります。

中身の文字
<table border="1">
    <tr>
        <td>中身の文字</td>
    </tr>
</table>

基本的にtableは表でしか使ってはいけないため非推奨です。

WordPressなどのCMS内でクラスを付けるのが難しく、なんとかしたいときの苦肉の策です。

【まとめ】幅を文字数に合わせる方法

display: inline-blockを指定しましょう。

以上、htmlやCSSで幅(width)を文字数など中身に合わせる方法でした。

関連記事