CSS: 要素の大きさ - width, height

概略 (2024/03)

HTML のタグ (要素) には CSS の display の値で主に 1) inline のタグ、 2) inline-block のタグ、 3) block のタグがあります。 inline-block や block のタグでは width (幅) や height (高さ) で大きさを指定することができます。 inline のタグでは大きさを指定することができません。
CSS display: inline, block など

display の値     width, height の指定   要素(タグ)の例
-------------------------------------------------------------
inline           できない               span, a, b, strong など
inline-block     可                     img など
block            可                     div, p, h1, ul, dl など

• MDN: width
• MDN: height

値の単位

要素の大きさを指定するときに px、%, em, rem, vw, vh などさまざまな単位があります。 単位は主に 1) 絶対値の単位、2) 相対値の単位 に分類できます。

絶対値の単位
px       ピクセル、画素数。

相対値の単位
em, rem  文字サイズに対する割合の大きさ。
%        親要素の大きさに対する割合。
vw, vh   ビューポートの大きさに対する割合。
など

• MDN: CSS の値と単位

はじめて HTML や CSS を眺める人だと絶対値の px 指定の方が分かりやすいですが、 画面サイズによってページや要素の幅が変わる HTML では % や rem などの相対値指定を多用した方が便利な話も多いです。

• TestCSS_padding_em01.html
  padding (内側の余白) を単位 em で指定するサンプル。 em は基準になるフォントサイズに連動して大きさが変わります。
  CSS: 要素の余白 - padding, margin

em に関連する単位で rem もあります。 rem はルート要素 (body) のフォントサイズに対して相対値で指定します。 em 指定は親要素のフォントサイズに連動して大きさがどんどん変わるので、 末端の要素になるほどフォントサイズが分かりづらくなる欠点があります。 rem だとルート要素のフォントサイズだけ気にすればよいので em よりも見通しが良くなります。

width と height のサンプル (2024/03)

width

• MDN: width

height

• MDN: height

CSS overflow (2024/03)

div などの大きさを指定すると div 内のテキストが div 領域に収まらない場合にどうするか？ の話が出てきます。CSS の overflow でスクロールバーを付けるなどの指定が必要になります。
CSS: スクロール

CSS text-overflow

目次などのタグでテキストが枠からあふれるときに、 文字列を改行せず末尾を「・・・」に置き換えたいことがあります。 このような場合は CSS の text-overflow: ellipsis; を設定します。

• MDN: text-overflow

span タグに大きさを持たせる

span タグや a タグや b タグなど初期設定がインラインの要素も display: inline-block; を指定することで大きさを持たせることができます。 img タグと同じ感覚で扱えます。
インライン要素をブロック要素に変更する

要素の大きさを手動操作で変更する (2024/03)

• CSS resize: 要素の大きさを手動操作で変更する

要素の大きさを画面に合わせて変更する (2024/03)

• CSS: 要素の大きさを画面に合わせて変える

関連

• CSS: 要素の余白 - padding, margin
• CSS: 要素の大きさを画面に合わせて変える
• CSS resize: 要素の大きさを手動操作で変更する
• CSS: スクロール
• CSS display: inline, inline-block, block など