html・cssでページの横幅(width)の設定をしよう

htmlの横幅の設定

こんにちわ、ゆう。です(^^)/ カラーチャート作りがひと段落したので、またcssの紹介をしていきますね(^^♪

以前にも説明したようにwebページには、ヘッダー・メインコンテンツ・フッターのそれぞれの領域があります。 このページでは、webページのそれぞれの領域の表示幅(横幅)の設定方法を紹介します。

目次
widthプロパティの使い方
widthを使ってwebページの表示幅(横幅)を設定しよう

widthプロパティの使い方

webページの表示幅(横幅)を設定する時は、width(ウィズ)プロパティを使います。 widthプロパティは、htmlファイルに記述しても良いですが、管理が大変になるので基本的にはcssファイルに記述するようにしましょう!

#example{
  width:800px;
}
widthの使い方と意味の説明

widthプロパティの使い方は簡単で、上のように「width:表示幅(横幅);」のように書くだけです。

#exampleの部分には、横幅を設定したい部分を記述して下さい。 上の場合でいえば、#exampleの横幅を800pxにするという意味になります。 ちなみにwidthプロパティは<TABLE><img><div>など、ブロック要素と置換要素の表示幅(横幅)を指定する時に使えます。

※ブロック要素については「divタグとhtmlのブロックレベル要素の使い方」をご覧ください。
簡単に言うとdivやhタグなどがブロック要素、spanなどがインライン要素となります。 置換要素というのは、imgやinputなどのことです。 正直、こういうのを覚えなくてもwidthを設定して反映されなければ、「あー、これには使えないんだな」って感じで最初は良いと思いますw

そしてwidthはpxで指定する以外にも、「auto」「パーセンテージ(%)」などで指定することもできます。

指定する値 意味
auto 表示幅(横幅)が内容に合わせて自動で設定される。(初期値)
数値で指定 数値にpxなどの単位を付けて指定する。
パーセンテージ(%) 「%」で指定する。表示幅(横幅)は、親要素に対する割合となる。
<div><img~></div>という様な感じであれば、親要素はdiv。

ちなみにパーセンテージ(%)は、スマホサイトを作る時やレスポンシブwebデザインにする時によく使います。 では、それぞれの使い方を紹介しますね。

widthを使ってwebページの表示幅(横幅)を設定しよう

pxなどの数値でwidthを指定する場合は、下の画像のように入力した数値がそのまま反映されます。 ですが、左寄せされていて右側に隙間ができていますよね。 例えばホームページ全体の横幅を設定したい場合、これでは右側に隙間ができてしまいます。

なのでこういう場合は、左右のmarginをautoにする事で要素(ホームページ全体)を中央にセンタリングさせることができます。

widthの使用例 widthを使ったセンタリング
#wrap{
  width:800px;
  margin-right:auto;
  margin-left:auto;
}

#wrapの部分はホームページの幅を指定している部分になります。 あなたのホームページが#exampleという名前で幅を設定しているなら、#wrapではなくて#example{~という感じになります。

他にも「table」でwidthを使う機会も多いです。

table{
  width:100%;
}
td{
  width:30%;
  background:aliceblue;
}
td+td{
  width:70%;
  background:lightskyblue;
}
/* td+tdで隣接してるtdに適用 */

td+tdでtdの隣のtdに適用されます。 ここでいうと、2つ目のtdにのみ適用されるということになります。

<table>
<tr>
<td>widthが30%の部分</td>
<td>widthが70%の部分</td>
</tr>
</table>
表示例
widthが30%の部分 widthが70%の部分

この場合tableのwidthは100%なので、親要素の表示幅いっぱいにtableは表示されます。 そして一つ目のtdのwidthは30%なので、tableの横幅30%分のみ表示されます。 2つ目のtdも同じようにtableの横幅70%分のみ表示されるというわけです。

widthは、こんな感じで使えます。

それとスマホサイトを作る時は、サイト全体のwidthをpxで固定してしまうとスマホの画面の幅によってははみ出してしまったり デザインが崩れる場合があります。 なのでスマホの場合は基本的には%を使うようにしましょうね。

※レスポンシブデザイン、スマホサイトのwidthについては別ページで紹介します。

以上「widthの使い方とhtmlの横幅の設定について」でしたー(#^^#)

頂いたコメント

  1. 彩羽 より:

    見やすいブログですね(*/ω\*)♡
    今コメント回りしながら、
    ブログの構成を勉強中なのですが、
    見やすいブログは好感が持てます☆
    応援完了です。また覗かせていただきます♪

    • ゆう。 より:

      彩羽さん、こんにちわ(^^)/

      ほんとですか!!(^^♪
      そういって貰えると超うれしいです(#^^#)

      ちょっとは見やすくなるように頑張ってみて良かったです(^-^)

      応援ありがとうございます!
      ぜひまた、覗いてみて下さい(^^)/