Divタグなどの枠の幅を文字列の幅に合わせたい - CSS
DivタグなどのBlock属性の枠の幅を文字列の幅に合わせて表示する方法を紹介します。
デフォルトの動作の確認
デフォルトの状態のdivタグでは、枠の幅は画面や親の枠の領域いっぱいに表示されます。
コード
下記のコードを作成します。
<!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>
.Default{
background-color:#fff8cf;
border:1px solid #ff6a00;
}
.Container{
display:flex;
}
.LeftColumn {
flex: 3;
}
.RightColumn {
flex: 1;
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
div枠の幅は画面や親の領域の幅名いっぱいに表示されることが確認できます。
枠の幅を文字列の幅に合わせる方法
枠の幅を文字列の幅に合わせる場合は、displayプロパティを
tableに変更します。
書式
実装例
コード
下記のコードを作成します。
<!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>
.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枠の幅が文字列の幅に合わせて表示されていることが確認できます。
枠の幅が狭く、文字列が折り返される場合は、文字列全体を取り囲む矩形で表示されます。
プログラム例
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
