Divタグなどの枠の幅を文字列の幅に合わせたい

デフォルトの動作の確認

デフォルトの状態のdivタグでは、枠の幅は画面や親の枠の領域いっぱいに表示されます。

コード

下記のコードを作成します。

display-table.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="display-table.css"/>
</head>
<body>
    <div class="Default">標準のdivタグの枠です。</div>
    <hr />
    <div class="Container">
        <div class="LeftColumn"><div class="Default">標準のdivタグの枠です。</div></div>
        <div class="RightColumn"><div class="Default">標準のdivタグの枠です。</div></div>
    </div>
</body>
</html>

display-table.css

.Default{
    background-color:#fff8cf;
    border:1px solid #ff6a00;
}
.Container{
    display:flex;
}
.LeftColumn {
    flex: 3;
}
.RightColumn {
    flex: 1;
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
div枠の幅は画面や親の領域の幅名いっぱいに表示されることが確認できます。

Divタグなどの枠の幅を文字列の幅に合わせたい:画像1
Divタグなどの枠の幅を文字列の幅に合わせたい:画像2

枠の幅を文字列の幅に合わせる方法

枠の幅を文字列の幅に合わせる場合は、displayプロパティをtableに変更します。

書式

display:table;

実装例

コード

下記のコードを作成します。

display-table.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="display-table.css"/>
</head>
<body>
    <div class="DisplayTable">DisplayプロパティがTableのdivタグの枠です。</div>
    <hr />
    <div class="Container">
        <div class="LeftColumn"><div class="DisplayTable">Tableのdivタグの枠です。</div></div>
        <div class="RightColumn"><div class="DisplayTable">Tableのdivタグの枠です。</div></div>
    </div>
</body>
</html>

display-table.css

.Container{
    display:flex;
}
.LeftColumn {
    flex: 3;
}
.RightColumn {
    flex: 1;
}
.DisplayTable {
    display: table;
    background-color: #fff8cf;
    border: 1px solid #ff6a00;
}

解説

DisplayTableクラスのdisplayプロパティをtableに設定しています。<div class="DisplayTable">タグの枠幅が文字列の幅に合わせて表示される動作になります。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。div枠の幅が文字列の幅に合わせて表示されていることが確認できます。
Divタグなどの枠の幅を文字列の幅に合わせたい:画像3

枠の幅が狭く、文字列が折り返される場合は、文字列全体を取り囲む矩形で表示されます。
Divタグなどの枠の幅を文字列の幅に合わせたい:画像4