 |
【中古】1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本） 価格:747円 |
前回はCSSを使用して背景の画像を変える方法を紹介しました。
今回はCSSを使用してのレイアウトの幅と高さの変え方を紹介したいと思います。
まずレイアウトを作る時に文字を入力する箱のようなグループを作ります。その箱の幅と高さを変える時に使用するプロパティを紹介します。
サイズを指定する『width』,『height』プロパティ
widthプロパティは『幅』をheightプロパティは『高さ』を指定する要素になります。
ここで気をつけてもらいたいのは<a>、<span>タグのようなインライン要素と呼ばれるタグにはサイズを変えることができません。（インライン要素については後日記事にします。）
幅や高さを指定する単位は様々あります。一つずつ紹介していきます。
幅を『auto』で指定
div{width: auto;}
上のように指定すると要素に指定されている幅いっぱいに広がります。また、こちらは初期値であるためwidthプロパティを指定しない場合でも自動で指定されます。
そのため下の画像の通り、幅1000pxの箱があればwidthプロパティにautoを指定するか記入しないかを行うとその要素は1000pxになります。
幅を『％』で指定
div{width: 50%;}
上のように指定するとその要素を中に入れている箱の大きさ幅の半分（50％）のサイズになるように指定されます。
そのため1000pxであれば、500pxの幅の箱が指定されます。
web上で使用する単位について
単位には２種類あり『相対単位』と『絶対単位』があります。
それぞれ紹介したいと思います。
絶対単位
絶対とは「何物にも比較されないこと」という意味です。そのためブラウザーの表示の大きさや親要素の大きさに影響されず、指定したサイズそのままに表示される単位です。
ではその単位を紹介します。
px：一番使用される単位であり、絶対単位で指定する場合はこのpxをすることがほとんどです。柔軟性がないため要素同士の間隔や線の幅など値を変えたくない場合に使用します。
相対単位
相対とは「他の概念と相関する」という意味です。そのため他の要素で指定したサイズやブラウザーの表示の大きさに左右される単位のことを相対単位と言います。上で紹介した『％』も相対単位です。では下より別の単位も紹介します。
em：エムと呼ばれる単位です。フォントサイズで使用する事が多い単位です。デフォルトで決まっているフォントサイズの16pxが1em になります。
rem：レムと呼ばれる単位です。emとの違いが難しいですがhtmlタグにフォントサイズを指定する事があるのですが、この時指定された単位に左右されます。そのためhtmlタグに16pxと指定されていれば16px＝1remとなります。
vw：「viewport width」の略になります。ビューポート幅とよばれビューポート幅とは閲覧しているデバイスに左右される幅のことを言います。そのためブラウザの幅が1200pxだった場合、50w指定していれば600pxになります。（スマホ端末であれば幅が小さくなりますがその幅に自動で調節されます。）
vh：「viewport height」の略になります。ビューポート高さと呼ばれ上記のビューポート幅と同じようにデバイスの高さに左右される指定になります。
以上がレイアウトの幅と高さの変え方になります。
次回はこれまた難しい余白の調整について記事にしたいと思います。
