【HTML/CSS】widthの指定方法(派生事項も解説)

「HTMLを学習し始めたけど、widthについて詳しく知りたい …」と思ったことはありませんか？

今回は、基本的なwidthの設定方法とそれにまつわる派生事項について解説していきます。

width(横幅)を設定する方法を、「HTMLでのwidthの指定方法」と「HTMLでのwidthの指定方法」の場合に分けて説明します。

それではみていきましょう。

HTMLでのwidthの指定方法

まずは、HTMLのみで「width(横幅)」を設定する方法を説明します。

結論から言うと、width属性を使います。

コードは例えば、以下のように書きます。

<div class="block" width="300"></div>

ちなみに、width属性の値の数値の単位は「px(ピクセル)」になります。

※「height属性」もあります。height属性では高さを設定します。上記コードでは、width属性しか書きませんでしたが、基本的にwidth属性と同時に使います。

ただし、width属性やheight属性を使うことは少ないかもしれません。

次に紹介するCSSの「widthプロパティ」を使うことが多いからです。

次の章でCSSでのwidthの指定方法を見ていきましょう。

CSSでのwidthの指定方法

CSSのwidthプロパティに関して解説していきます。

コードは例えば以下のように書きます。

<div class="block"></div>

.block {
  height: 100px;
  width: 200px;
  background-color: #80e2cd;
}

※高さが0だと、「background-colorプロパティ」で背景色を設定しているのが見えないので、heightプロパティで高さも指定します。

出力すると以下のようになります。

widthが200px(heightが100px)の四角形が表示されました。

上記コードでは、pxで横幅を決めましたが、「%」でも指定することができます。

%は親要素に対しての割合になります。

親要素が画面の横幅と一致しているときや、親要素がないときは、画面の幅に対しての割合になります。

例えば、画面横幅いっぱいに画像を表示したいとき、「width: 100%;」と指定したりします(ヘッダー画像でありがちなデザインです)。

また、%で横幅を指定するとレスポンシブのWebページをつくりやすいです。

レスポンシブとは、画面の大きさが変わったときにそれに応じて表示が最適化されるという状態のことです(レスポンシブだとPC画面とスマホ画面で別の画面が表示されます)。

%指定は基準に対する割合で大きさを決めるので、画面の大きさが変わると、それに応じて長さが変化してくれます(※画面の横幅が割合の基準になっている場合、もしくは親要素の幅も相対指定している場合)。

逆にpxで絶対的に長さを決めている横幅は、画面の大きさが変わっても、そのまま変わりません。

ちなみに、%等で相対的な大きさを決めるような指定を「相対指定」といい、px等で絶対的に大きさを決める指定を「絶対指定」といいます。

※相対指定では%のほかにemやremが存在します。

絶対指定と相対指定は、うまく使い分けるようにしましょう(どちらかが優れているというものではありません)。

以上、CSSでwidthの設定をする方法でした。

(補足)ブロック要素とインライン要素

さいごに、補足としてブロック要素とインライン要素について触れておきます。

なぜこのテーマに触れるのかというと、上記の内、インライン要素ではwidthが効かないからです。

ブロック要素とインライン要素の説明をします。

ブロック要素は、ざっくりいうと、「中に色々なものを入れるためのブロックをつくる要素」です。

ブロック要素の中には、さらにブロック要素を入れることができます。

ブロック要素をつくるタグの例→divタグ, hタグ, pタグなど

インライン要素は、ざっくりいうと「文の途中に挿入するための要素」です。

インライン要素をつくるタグの例としては、spanタグ、aタグ、imgタグなどがあります。

注意しなければいけない点は、インライン要素はwidth(ついでにheightも)が設定されないという点です。

インライン要素を指定して、「width: ○○;」とコードを書いても、表示が変わらないということです。

ただし、一部インライン要素をつくるタグでも、widthとheightを設定できるタグがあります。

よく使うタグでいうとimgタグの場合は、widthとheightを設定することができます。

一部のタグの場合を除いて、インライン要素はwidthが設定されないのでwidthを指定するときは、widthを設定するときは効くかどうか考えて設定しましょう。

以上、widthとブロック要素/インライン要素との関連でした。

まとめ

いかがでしたか？

HTML/CSSのwidthの設定の仕方に関して理解が深まったことでしょう。

width(横幅)は、HTMLのwidth属性か、CSSのwidthプロパティで設定することができます。

ぜひ今回説明した事項を、コードを書いてブラウザに表示し、確認してみてください。

今回の知識が役に立てば幸いです。