6日でできる 新HTML入門｜サイズ指定とCSSによる枠線

サイズを整え、枠線で区切る。CSSの基本指定で、見やすくまとまりのあるWebページを作ろう。

Webページを作るとき、文字や画像をただ並べるだけでは、見た目が不安定になりやすくなります。段落の幅が広すぎたり、画像が大きく表示されすぎたり、どこからどこまでが1つの情報なのか分かりにくくなったりすることがあります。

そこで大切になるのが、要素のサイズ指定と枠線の指定です。CSSでは、widthで横幅、heightで高さを指定できます。さらに、borderを使うことで、要素の周囲に線を付けたり、一部分だけを強調したりできます。

サイズ指定は、レイアウトを整えるための土台です。たとえば、カード型のデザインでは横幅をそろえることで、複数の情報をきれいに並べられます。画像では横幅だけを指定し、高さをautoにすることで、縦横比を保ったまま自然に縮小できます。

枠線は、情報を見やすく整理するために役立ちます。実線、破線、点線、二重線などを使い分けることで、注意、補足、見出し、カードなどの役割を視覚的に伝えられます。Webページの見やすさを高めるには、サイズと枠線をセットで考えることがとても大切です。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

dimensions-borders-cssダウンロード
mountain-view.png

要素のサイズを指定する基本

CSSで要素の横幅を指定するときはwidth、高さを指定するときはheightを使います。段落、画像、ボックス、カードなど、さまざまな要素に対してサイズを指定できます。

たとえば、次のように書くと、横幅が320px、高さが180pxのボックスになります。

.box {
  width: 320px;
  height: 180px;
}

widthとheightには、pxのような固定値だけでなく、%やvw、vhなどの相対的な値も使えます。

サイズ指定でよく使う単位

単位説明使いやすい場面
px画面上のピクセル単位で指定する固定サイズのボックスや画像
%親要素を基準に割合で指定する画面幅に合わせたいレイアウト
vw画面の横幅を基準に指定する画面幅に応じて広がる要素
vh画面の高さを基準に指定するファーストビューなど高さを意識する部分
auto自動計算させる画像の縦横比を保ちたい場合

pxはサイズをはっきり固定したいときに便利です。一方、%を使うと親要素の大きさに合わせて変化するため、レスポンシブデザインでよく使われます。

画像では、widthだけを指定してheightをautoにする使い方がよく使われます。これにより、画像の横幅だけを調整し、高さは元の比率に合わせて自動的に決まります。

図1：widthとheightで要素のサイズを整える

この図から分かること

widthは要素の横幅、heightは要素の高さを指定するためのCSSです。pxを使うと固定された大きさになり、%を使うと親要素の幅に合わせて変化します。サイズ指定を使うことで、段落やカード、画像などの見た目を整えやすくなります。

widthとheightで固定サイズの段落を作る

最初に、段落に幅と高さを指定する例を見ていきましょう。段落は通常、内容に応じて高さが変わりますが、widthとheightを指定すると、決められた大きさの箱の中に文章を表示できます。

ファイル名： Lesson14-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>固定サイズの案内ボックス</title>
  <style>
    p.info-box {
      background-color: #00695C;
      color: white;
      width: 320px;
      height: 170px;
      padding: 12px;
      box-sizing: border-box;
      line-height: 1.7;
    }
  </style>
</head>
<body>
  <p class="info-box">
    高原の展望台では、朝と夕方でまったく違う景色を楽しめます。
    晴れた日には遠くの山並みまで見渡せます。
  </p>
</body>
</html>

ブラウザの表示例

この例では、p要素にinfo-boxというclassを付け、CSSで横幅と高さを指定しています。width: 320px;によって横幅を320pxにし、height: 170px;によって高さを170pxにしています。

paddingは、文字とボックスの内側の余白です。余白がないと、文字がボックスの端に近づきすぎて読みにくくなります。そのため、文章を見やすくするにはpaddingを合わせて指定するのがおすすめです。

ここで重要なのがbox-sizing: border-box;です。通常、widthやheightは内容部分の大きさとして計算されます。そこにpaddingやborderが加わると、実際に表示される全体サイズは指定した数値より大きくなります。

box-sizing: border-box;を指定すると、paddingやborderを含めてwidthやheightの中に収めることができます。つまり、レイアウトの計算がしやすくなります。

ボックスモデルとbox-sizingの考え方

HTMLの要素は、目に見えない箱のような構造で表示されます。この考え方をボックスモデルと呼びます。

ボックスモデルは、主に次の4つで構成されます。

部分内容
content文字や画像などの中身
paddingcontentとborderの間にある内側の余白
border要素の周囲に表示される枠線
margin他の要素との外側の余白

widthとheightは、初期状態ではcontent部分のサイズとして扱われます。そのため、paddingやborderを指定すると、見た目の全体サイズはwidthやheightより大きくなります。

box-sizingの違い

指定サイズ計算の考え方
box-sizing: content-box;widthとheightはcontent部分だけを表す
box-sizing: border-box;widthとheightにpaddingとborderも含める

Webページのレイアウトでは、box-sizing: border-box;を使うと扱いやすくなります。カードやボックスを並べるときに、指定した幅の中に余白や枠線も含まれるため、横幅の計算が分かりやすくなるからです。

最小サイズと最大サイズを指定する

画面サイズが変わるWebページでは、要素の大きさを完全に固定すると、狭い画面でははみ出したり、広い画面では間延びしたりすることがあります。

そのようなときに便利なのが、min-width、max-width、min-height、max-heightです。

最小サイズと最大サイズの主な指定

CSS役割
min-width最小の横幅を指定する
max-width最大の横幅を指定する
min-height最小の高さを指定する
max-height最大の高さを指定する

たとえば、本文エリアにmax-widthを指定すると、画面が広くなっても文章が横に広がりすぎません。

.content {
  width: 90%;
  max-width: 760px;
}

この指定では、基本的には親要素の90%の幅で表示されますが、最大でも760pxまでに制限されます。文章の読みやすさを保つためによく使われる指定です。

画像のサイズをCSSで調整する

画像はimg要素で表示します。画像サイズは、HTMLのwidth属性やheight属性で指定することもできますが、デザインとして調整する場合はCSSで指定する方法がよく使われます。

画像の横幅だけを指定し、高さをautoにすると、元画像の縦横比を保ったまま表示できます。

ファイル名： Lesson14-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>写真ギャラリーの画像サイズ</title>
  <style>
    body {
      font-family: sans-serif;
    }

    img.photo-thumb {
      width: 300px;
      height: auto;
      border: solid 3px #444444;
    }
  </style>
</head>
<body>
  <h1>旅の写真ギャラリー</h1>
  <img src="mountain-view.png" alt="山の展望写真" class="photo-thumb">
</body>
</html>

ブラウザの表示例

このHTMLでは、img要素にphoto-thumbというclassを付けています。CSSでは、width: 300px;によって画像の横幅を300pxにしています。height: auto;を指定しているため、高さは画像の比率に合わせて自動的に決まります。

画像の縦横比を保つには、widthとheightの両方を無理に固定しないことが大切です。両方を固定すると、画像が横に伸びたり縦につぶれたりして、不自然に見えることがあります。

また、この例ではborder: solid 3px #444444;を指定して、画像の周囲に枠線を付けています。画像に枠線を付けると、背景との境界が分かりやすくなり、写真カードのような見た目になります。

枠線を指定する基本

CSSで枠線を付けるときはborderを使います。borderは、線の種類、太さ、色をまとめて指定できます。

基本の書き方は次の通りです。

.card {
  border: solid 3px #0066CC;
}

この指定では、実線、3px、青色の枠線が付きます。

borderは、情報を区切ったり、重要な部分を目立たせたりするために便利です。カード型のレイアウト、注意書き、画像の枠、入力フォームなど、さまざまな場面で使われます。

borderで指定する3つの要素

指定内容例説明
線の種類solid実線、破線、点線など
線の太さ3px枠線の幅
線の色#0066CC枠線の色

borderは、一括で指定できるため、短く分かりやすく書けます。ただし、線の種類だけ、太さだけ、色だけを個別に指定することもできます。

図2：borderで枠線の種類・太さ・色を指定する

この図から分かること

borderでは、線の種類、太さ、色をまとめて指定できます。たとえばsolid 3px #0066CCと指定すると、実線で3pxの青い枠線になります。枠線を使うと、要素の範囲がはっきりし、ページ内の情報を見やすく整理できます。

枠線の種類を比較する

borderでは、さまざまな線の種類を指定できます。よく使うのはsolid、dashed、dotted、doubleです。ほかにも立体的に見えるgroove、ridge、inset、outsetなどがあります。

border-styleの主な値

値線の種類
none枠線を表示しない
hidden枠線を非表示にする
solid実線
double二重線
dashed破線
dotted点線
groove溝のように見える立体的な線
ridge山のように見える立体的な線
inset内側にへこんだように見える線
outset外側に盛り上がったように見える線

ファイル名： Lesson14-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボーダー見本カード</title>
  <style>
    body {
      font-family: sans-serif;
    }

    .sample {
      width: 180px;
      margin: 10px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #FAFAFA;
    }

    .solid {
      border: solid 4px #444444;
    }

    .double {
      border: double 6px #F57C00;
    }

    .dashed {
      border: dashed 4px #1976D2;
    }

    .dotted {
      border: dotted 4px #388E3C;
    }

    .groove {
      border: groove 6px #6D4C41;
    }

    .ridge {
      border: ridge 6px #7B1FA2;
    }

    .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>

ブラウザの表示例

この例では、div要素を使って8種類の枠線を並べています。それぞれのdivにsampleという共通のclassを付け、さらにsolidやdoubleなどのclassを追加しています。

sampleでは、幅、余白、内側の余白、背景色などを共通で指定しています。各線種のclassでは、borderだけを変えています。このように共通部分と個別部分を分けると、CSSが整理しやすくなります。

実際のWebページでは、solidはカードや画像枠、dashedは注意書きや補足、dottedは軽い区切り、doubleは少し装飾的な見出しなどに使えます。立体的な線は強い印象になるため、使いどころを絞ると自然に見えます。

枠線を部位ごとに指定する

borderは要素の四辺すべてに枠線を付けます。しかし、デザインによっては上だけ、下だけ、左だけに線を付けたいこともあります。

その場合は、border-top、border-right、border-bottom、border-leftを使います。

部位ごとのborder指定

CSS対象
border-top上の枠線
border-right右の枠線
border-bottom下の枠線
border-left左の枠線

たとえば、左側だけに太い線を付けると、メモや注意書きのようなデザインになります。上下だけに破線を付けると、区切り線のような表現ができます。

ファイル名： Lesson14-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>重要メモの部位別ボーダー</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #FAFAFA;
    }

    p.point-note {
      width: 380px;
      padding: 12px;
      line-height: 1.7;
      background-color: #FFF8E1;
      border-top: dashed 4px #E53935;
      border-bottom: dashed 4px #E53935;
      border-left: solid 7px #FFB300;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <p class="point-note">
    このメモでは、サイズ指定と枠線指定で特に大切なポイントを整理しています。
  </p>
</body>
</html>

ブラウザの表示例

このHTMLでは、p要素にpoint-noteというclassを付け、部位ごとに違う枠線を指定しています。

border-topとborder-bottomには赤い破線を指定しています。これにより、メモの上下に区切りができます。border-leftには黄色の太い実線を指定し、左側に強調線を作っています。

このようなデザインは、注意書き、補足説明、重要ポイント、引用風のボックスなどでよく使われます。四辺すべてに枠線を付けるよりも、左だけに線を付けるほうが軽く見えるため、本文の流れを邪魔しにくいのも特徴です。

図3：border-top、border-bottom、border-leftで部分的に強調する

この図から分かること

枠線は四辺まとめて指定するだけでなく、上、右、下、左を個別に指定できます。border-leftを使って左だけ太くすると、重要メモや補足欄のようなデザインを作れます。border-topやborder-bottomを組み合わせると、内容を上下から区切る表現もできます。

borderの太さと色を調整する

枠線の太さは、pxで指定する方法がよく使われます。1pxや2pxなら細く控えめな線になり、5px以上にすると強調された印象になります。

.notice {
  border: solid 2px #333333;
}

枠線の色は、色名、16進数、rgb、hslなどで指定できます。背景色や文字色とのバランスを見ながら決めると、ページ全体の印象が整います。

太さによる印象の違い

太さ印象
1px控えめでシンプル
2pxから3px見やすく使いやすい
4pxから6px強調感が出る
7px以上装飾やアクセントとして目立つ

枠線を目立たせたい場合は太くする方法もありますが、色を変えるだけでも十分に強調できます。すべてを太くすると画面が重く見えるため、重要な部分だけに使うと効果的です。

画像と枠線を組み合わせる

画像に枠線を付けると、写真やイラストの範囲がはっきりします。特に背景が白いページに白っぽい画像を置く場合、枠線があると画像の境界が分かりやすくなります。

画像サイズを調整するときは、widthとheightの指定方法に注意します。

指定方法表示結果
widthだけ指定、heightはauto縦横比を保って表示される
widthとheightを両方指定指定サイズに強制的に変形される場合がある
max-width: 100%;親要素より大きくならない
height: auto;画像の比率に合わせて高さが決まる

レスポンシブな画像では、次のような指定もよく使われます。

img {
  max-width: 100%;
  height: auto;
}

この指定をしておくと、画像が親要素の幅を超えてはみ出すのを防げます。スマートフォンやタブレットなど、画面幅が変わる環境でも扱いやすくなります。

使用タグ一覧と解説

この学習で登場した主なHTMLタグを整理しておきます。

タグ用途主な属性
<html>HTML文書全体を表すlang
<head>文字コードやタイトルなどの情報を書くなし
<meta>文字コードなどのメタ情報を指定するcharset
<title>ブラウザのタブに表示されるタイトルを指定するなし
<style>HTML内にCSSを書くなし
<body>ブラウザに表示される内容を書くなし
<p>段落を表すclass
<img>画像を表示するsrc、alt、width、height、class
<div>汎用的なまとまりを作るclass、id

pは文章のまとまりを作るときに使います。今回のようにclassを付けることで、特定の段落だけにサイズや枠線を指定できます。

imgは画像を表示するためのタグです。srcには画像ファイル名、altには画像が表示されない場合や音声読み上げで使われる代替テキストを指定します。画像の見た目を整えるときは、classを付けてCSSでサイズや枠線を指定すると管理しやすくなります。

divは意味を持たない汎用的なコンテナです。複数の要素をまとめたり、カード型の見た目を作ったりするときに使えます。CSSと組み合わせることで、レイアウト調整に役立ちます。

サイズ指定と枠線指定で意識したいこと

サイズ指定では、固定したい部分と画面に合わせたい部分を分けて考えることが大切です。たとえば、ボタンや小さなカードはpxで固定すると扱いやすくなります。一方、本文エリアや画像は%やmax-widthを使うと、画面サイズに合わせて自然に表示できます。

枠線指定では、すべての要素を囲むのではなく、必要な場所だけに使うのがポイントです。カードの外枠、画像の境界、注意書きの左線、見出しの下線など、目的に合わせて使うと、ページ全体がすっきり見えます。

サイズと枠線は、どちらもWebページの見た目を整えるための基本です。width、height、box-sizing、border、border-top、border-leftなどを組み合わせることで、シンプルなHTMLでも見やすく整理されたデザインを作れるようになります。