LINEで現役エンジニアに直接質問してみよう!登録無料

CSSのwidth(幅)を理解して要素を指定した位置配置できるようになろう

HTMLの基礎知識

widthについて学習する前に、HTMLについておさらいしましょう!

HTMLには<~></~>のような文字たくさん並んでいます。これらの文字を「タグ」と言います。

このタグでリンクや画像を作ったり挟み込んだりするのが一番基本的な使い方です。

タグは2つの部品からできています。

  1. 開始タグ
  2. 終了タグ

です。

そして、この2つの部品(タグ)で囲まれた全体を「要素」と言います。

タグは入れ子に出来ます。

例えばこの画像の様な場合<div><p>の親要素であり、<p><div>の子要素です。

CSSのwidthとは?

CSSのwidthとは、要素の幅を決めるものです。

アキ

最近はスマホに対応したレスポンシブデザイン(PCにもスマホにも対応したデザインやページ)が主流になったので、横幅に%を設定して使う機会がグンと増えましたね。

widthの設定方法

widthの設定できる値は主に3つあります。

  • width: auto;(初期値)
  • width: 〇〇px;
  • width: 〇〇%;

順番に解説してきます。

width:auto(初期値)で指定する

width:autoは、ブロック要素(ブロックレベル要素)で特にCSSで変更しない限り始めから設定されている値です。

この値を設定されていると、親要素の幅いっぱいにひろがります

<body>直下に要素を設置すると、ブラウザの幅いっぱいになりますし、

親要素内で使えば、親要素いっぱいの幅まで広がります。

親要素が500pxの幅なら、それ以上大きくなることはありません。

width:〇〇pxで指定する

次にwidthをpxで指定する方法を紹介します。

この方法を使うと、親要素の幅に関係なく要素の幅を指定することができます。

例えば、親要素が600pxの時でも、その子要素を400pxにしてそれぞれの要素でサイズを調節できます。

先程の例では親要素よりも子要素の幅の方が小さくなるように設定していましたが、逆に子要素の方を大きな幅に設定することも可能です。

注意

但し、親要素よりも大きな横幅で設定することは、まず無いと思っておきましょう。技術的には可能ですが、この方法を実際のWebページで使うのは絶対にやめましょう

現在では、レスポンスデザインというPCにもスマホにも対応したWebページを作成するのが主流です。

この手法を使ってしまうと、部品の一部がはみ出したりしてデザインが崩れる原因になってしまいます。

width: 〇〇%;

親要素の幅の割合で子要素の幅を設定します。親要素の幅次第で子要素の幅も変わるので、レスポンシブデザイン(PCにもスマホにも対応したデザインやページ)によく使われます。

幅が600pxの要素があります。この中にwidth: 50%を入れるとどうなるでしょうか?

親要素600pxの50%は300pxです。ですので、子要素の幅は300px(50%)になります。

この状態で親要素を400pxに変えます。すると、子要素もそれに合わせて幅が再計算されます。

親要素は400pxなので、子要素はその50%の200pxに変わります。

width:autowidth: 100%の違い

cssのwidth:autowidth: 100%はどちらも親要素の幅に合わせるという点で似ているため、どちらを使えばいいのか迷ってしまうでしょう。
この2つの違いは、paddingborderを指定した場合に現れます

親要素の中に子要素を作りpadding: 10pxを設定したとしましょう。

width:autoの場合は、左右のpaddingを含めて横幅が100%になります。

width: 100%の場合は、左右のpaddingを含めずに横幅が100%になります。

paddingやborderを使う時にwidth: 100%を使うと、レイアウトが崩れてしまうので、width:autoを主に使っていくようにしましょう!

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。