前回の記事では背景の色を変えたり画像を挿入したりする方法を解説しました。今回の記事ではひとまとまりのブロックのサイズを指定し、どのように配置するかを解説していきます。
widthとheight -要素のサイズを指定する-
widthとheightというプロパティを使用することで要素の幅と高さを指定することができます。そうすることで、要素をブロックとして表現することができるようになります。ちなみにwidthですが、英語の発音としては「ウィドゥス」とか「ウィッズ」が近いのですが、日本では「ワイズ」と読むことも多いです。周りの人がどのように読んでいるかを察知しながら使い分けてみてください。widthで幅を、heightで高さを調整します。
div{
background-color:yellowgreen;
width:500px;
height:300px;
}
このようにブロックを作成することができますが、<a>タグや<soan>タグなどのインライン要素には使用できないので気を付けてください。また、widthは値を「%」で指定することも可能です。その場合その要素をかこっている親要素に対する比率で幅が決まります。
絶対単位と相対単位
上記のようにCSSでサイズを指定する方法として、絶対単位と相対単位という2種類の考え方があります。
絶対単位
ブラウザの表示領域やほかの要素などを基準に相対的に算出される単位で、基準にするサイズによって大きさが変化します。相対単位には以下のようなものがあります。
％：親要素を基準としたときの割合をパーセンテージで表したものです。
em：フォントサイズに指定されることが多く、親要素のフォントサイズが16pxだとしたら、1emは16pxとなります。
rem：<body>タグで何もタグ付けしなかったときのフォントサイズを基準とした割合を指します。
vw：「viewport width」の略。ブラウザでWebサイトを表示している時の表示領域「ビューポート」の幅に対しての割合です。
vh：「viewport height」の略。ビューポートの高さを基準とした割合です。
絶対単位
親要素やブラウザの表示領域に影響されることなく、指定したサイズのままで表示される単位のこと。
px：Web上で使用される最も一般的な単位。他の要素の影響を受けないため必ず指定のサイズで表示することができます。一方、デバイスのサイズにかかわらず同じサイズで表示されるなど、柔軟性には欠けます。
margin -要素の外側に余白を作る-
<margin>プロパティを使用することで、要素の外側に余白を作ることができます。四方を「margin-top」「margin-right」「margin-bottom」「margin-left」として指定し、余白を設定することができます。
div{
background-color:yellowgreen;
margin-top: 30px;
margin-left: 100px;
}
また、一行で「margin: 30px 0 0 100px」と表現することも可能で、順番に「上、右、下、左」を指します。
padding -要素の内側に余白を作る-
要素の内側に対して余白を取ることも可能です。
div{
background-color:yellowgreen;
padding: 40px;
}
<padding>プロパティは、指定する値の数によって、反映される範囲が変わります。
1つ指定 → 「上、下、左、右」
2つ指定 → 1つ目の値：「上、下」 2つ目の値：「左、右」
3つ指定 → 1つ目の値「上」 2つ目の値「左、右」 3つ目の値「下」
4つ指定 → 1つ目の値：「上」 2つ目の値：「右」 3つ目の値：「下」 4つ目の値：「左」
まとめ
要素の内外に余白を取ることで、見た目が随分変わったことをご確認いただけたかと思います。次回はタグの中に記述することのできる「id」属性と「class」属性について解説します。
コメント