【6日でできるHTML入門】サイズ指定とCSSによる枠線
Webページのレイアウトづくりでは 「要素のサイズ」 と 「枠線（ボーダー）」 のコントロールが欠かせません。サイズを固定することでコンテンツの収まりを安定させ、枠線を使うことで視覚的な区切りや強調を与えられます。本稿では width / height で行うサイズ指定と、border ファミリで行う枠線指定の基本から応用までを、サンプルコードとともに体系的に解説します。
１．サイズ指定の基礎
1.1. width と height
要素の横幅・高さは width と height で指定します。値には
- 絶対値（px, cm など）
- 相対値（%、vw/vh など）
を使えます。
.box {
width: 320px; /* 絶対値 */
height: 180px;
}
.banner {
width: 80%; /* 親要素の 80 % */
height: auto; /* 高さは縦横比を維持して自動 */
}1.2. ボックスモデルとの関係
width / height で得られる領域は content-box（デフォルト）です。box-sizing: border-box; を指定すると枠線と内側余白も含めた総幅・総高で計算できます。
1.3. 最小・最大サイズ
min-width / max-width や min-height / max-height を組み合わせると、レスポンシブでも崩れにくいデザインになります。
２．枠線（ボーダー）の基礎
2.1. border 一括指定
構文は 線種 line-style｜太さ line-width｜色 color の順。
.card {
border: solid 3px #0066cc; /* 実線・3 px・青 */
}2.2. 線種バリエーション
| 値 | 線の種類 |
|---|---|
| none | 線を描かない（配置計算は行う） |
| hidden | 非表示（テーブル要素専用、他の枠線を上書き） |
| solid | 実線 |
| double | 二重線 |
| dashed | 破線 |
| dotted | 点線 |
| groove | 溝のような立体線 |
| ridge | 山型の立体線 |
| inset | 凹んだ立体線 |
| outset | 盛り上がった立体線 |
2.3. 太さと色
太さは thin | medium | thick か数値、色はキーワード・RGB・HSL など。
３．枠線を部位ごとに指定
3.1. 個別プロパティ
| プロパティ | 対象 |
|---|---|
| border-top | 上 |
| border-right | 右 |
| border-bottom | 下 |
| border-left | 左 |
3.2. 応用例
.note {
border-top: dashed 4px #e53935; /* 上だけ破線 */
border-bottom: dashed 4px #e53935; /* 下だけ破線 */
border-left: solid 4px #ffb300; /* 左は強調線 */
}４．画像と図形のサイズ／枠線
画像は <img> タグの width / height 属性、または CSS で制御します。両方指定：強制リサイズ／一方だけ指定：縦横比維持。SVG などの図形は viewBox + CSS で柔軟に。
５．サンプルコード
素材のダウンロード
以下のリンクから画像素材をダウンロードできます。
| 山の写真 |
|---|
 |
サンプル 1）段落の固定サイズ
ファイル名： lesson14-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>📐 固定サイズの段落</title>
<style>
p.message{
background:#02796c;color:#fff;
width:300px;height:160px;
padding:8px;box-sizing:border-box;
}
</style>
</head>
<body>
<p class="message">
富士山は日本最高峰であり、四季折々に違った表情を見せます。
</p>
</body>
</html>ブラウザの出力例
表示結果：背景付きの段落が 300 × 160 px に収まり、文字がはみ出す場合はオーバーフロー。
サンプル 2）画像の横幅だけ指定
ファイル名： lesson14-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>🖼️ 画像のリサイズ</title>
<style>
img.thumb{width:280px;height:auto;border:solid 2px #333;}
</style>
</head>
<body>
<img src="mountain.png" alt="山の写真" class="thumb">
</body>
</html>ブラウザの出力例
表示結果：横幅 280 px、縦は比率維持。外枠 2 px 実線。
サンプル 3）線種カタログ
ファイル名： lesson14-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>🖍️ ボーダー見本帳</title>
<style>
.sample{width:140px;margin:6px;padding:4px;}
.solid {border:solid 4px #444;}
.double {border:double 6px #ff9800;}
.dashed {border:dashed 4px #1e88e5;}
.dotted {border:dotted 4px #43a047;}
.groove {border:groove 6px #6d4c41;}
.ridge {border:ridge 6px #6a1b9a;}
.inset {border:inset 6px #00897b;}
.outset {border:outset 6px #c2185b;}
</style>
</head>
<body>
<div class="sample solid">solid</div>
<div class="sample double">double</div>
<div class="sample dashed">dashed</div>
<div class="sample dotted">dotted</div>
<div class="sample groove">groove</div>
<div class="sample ridge">ridge</div>
<div class="sample inset">inset</div>
<div class="sample outset">outset</div>
</body>
</html>ブラウザの出力例
表示結果：8 種類の枠線を並べて比較できる。
サンプル 4）上下だけ破線、左に強調線
ファイル名： lesson14-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>📑 部位別ボーダー</title>
<style>
p.note{
width:360px;padding:8px;
border-top:dashed 4px #f44336;
border-bottom:dashed 4px #f44336;
border-left:solid 6px #ffb300;
background:#fff8e1;
}
</style>
</head>
<body>
<p class="note">このメモは重要ポイントだけを抜粋しています。</p>
</body>
</html>ブラウザの出力例
表示結果：上下は赤い破線、左だけ太い黄色実線で強調。
使用タグ一覧と解説
| タグ | 用途 | 主な属性 |
|---|---|---|
<html> | HTML 文書のルート | lang – 言語指定 |
<head> | メタデータ領域 | – |
<meta> | 文字コードなどを宣言 | charset |
<title> | タイトルバー／タブに表示 | – |
<style> | 内部 CSS を記述 | type（省略可） |
<body> | 可視コンテンツ領域 | – |
<p> | 段落を表す | class – CSS クラス |
<img> | 画像を埋め込む | src, alt, width, height |
<div> | 汎用コンテナ | class, id など |
まとめ
width と height を使ったサイズ指定は、コンテンツの見た目の安定化 に直結します。さらに border を組み合わせると、情報のグルーピングやアクセント付け が簡単に行えます。線種・太さ・色・各辺ごとの指定をマスターすれば、同じ HTML でもデザイン表現の幅が大きく広がります。まずは紹介したサンプルをブラウザで開き、数値や色を自由に書き換えながら挙動を確認してみましょう。