枠線

Home »  枠線

枠線の太さは border-width プロパティで指定します。単位を付けて具体的な太さを指定するか 、「thin(細)」 「medium (中) 」 「thick (太) 」 のキーワードを指定します。サンプルでは、 border-styleプロパティdashedborder-color プロパティを blue に設定した枠線の幅を10ピクセルに設定しています。

1つの要素について、上下左右の枠線のそれぞれに別の 太さを設定するこができます。 border-widthプロパティに値を 1 つだけ設定すると、上下左右の枠線の太さがみな同じになりますが、値を 2つ、3つ、4つの場合でそれぞれ異なる設定ができます。値を4つ列挙( それぞれの値の間は半角スペースを空ける) すると、先頭から順に上、 右、下、左の太さを指定します。値を3つ列挙した場合は、 上、左右、下、 2 つ列挙した場合は上下、左右の太さの設定になります。

borderプロパティで スタイル・色・太さを指定

枠線のスタイル、色、太さはまとめて指定する ことができます。枠線全体の場合は borderプロパティに、スタイル、色、太さを表す値を列挙します。また、スタイル、色、太さすべてを指定する必要も ありません( スタイルは指定する必要がありま す) 。サンプルではスタイルを 「double」、色 を「#00ff00、太さを 「1opx」に指定してい ます。なお、下衰のプロパティを使用して上・下・ 左・右の枠線のスタイル・色・太さをまとめて 指定することもできます。

マージンを指定する

周囲の要素との聞に取る余自のことをマージン といいます。 「margin-top」「magin-bottom」「margin-left」「margin-right」の4 つのプロパティ がそれぞれ上下左右のマージンを指定するプロ パティです。それぞれ、単位を付けて具体的 な長さを指定することができます 。注意すべきことは、垂直方向のマージンは上の要素の下マージンと下の要素の上マージンの合 計値ではなく、両者の内大きいほうになるとい うことです (左右のマージンは左の要素の右 マージンと右の要素の左マージンの合計値になる)。

パディングとは直訳すれば「詰め物」のことで、ある要素内に含まれる文字などの内容物の外周 (border プロパティなどで枠線を付けたときは その内側の線) からのことをいいます。 「padding-top」「padding-bottom」「padding-left」「padding-right 」がそれぞれ上下左右のパディングを指定するプロパティです。それぞれ、単位を付けて具体的な長さを指定することができます。

ボックスモデルとはその名の通り、各要素の配置を箱を 置いておくようなイメージでとらえるものです。意図したレイアウトにならないときは、このボックスモデルの理解が不十分なことに原因がある場合があります。 まず、基本となるのが、テキストや画像など、ブラウザ上に表示すべき実体である内容物( コンテント content) の 領域です。この領域はwidthプロパティ・ heightプロパ ティを使って、幅、高さを指定することができます。

このコンテント領域の周囲にバディング、ボーダー、マージンの領域を指定できます。それぞれの領域を指定する ことで、 1つの要素が構成する箱の大きさは大きくなり ます。マージンの要素との余白と説明しましたが、 実際にはマージンを設定した要素に属するもので、透明な箱をイメージするとよいでしょう。つまり、 width・ height プロパティで指定した幅・高さにさらにこれらの 幅・高さを付け加えたものがその要素が構成するボックスの帽・高さになります。

Comments are closed.