制作者の活動(PR)。

堀北真希うさぎ(うさ耳女子大生)
主な作品

堀北真希うさぎ(うさ耳女子大生)のソフトコンタクト装着場面を描いたイラストと仮想CM動画〜平成一桁頃のボシュロム『オプティマ』CM風に〜

ボックスの概念とプロパティ。

ボックスの概念とプロパティ・目次。

ボックスの概念。

CSSで高度なレイアウトを実現するに欠かせない概念としてボックスがあります。

全てのHTML要素はボックスと呼ばれる枠に入れられていると考えます。そして、そのボックスの位置や大きさなどを変えるのがCSSにおけるレイアウトと言う訳です。

ボーダ(枠線・border)

要素の内容を囲む枠線をボーダ(border)と呼びます。

パディング(padding)

要素の内容とボーダの間に入る隙間をパディング(padding)と呼びます。

マージン(margin)

隣接する他の要素から離す余白をマージン(margin)と呼びます。

ブロックレヴェル要素とインライン要素におけるボックスの違い。

さて、ボックスはブロックレヴェル要素とインライン要素で大きく異なります。

ブロックレヴェル要素
ブロックレヴェル要素の場合、ブロックの横幅は特に指定されない場合画面一杯に広がりますが、変更する事が出来ます。また、複数行に跨ったり折返しが生じた場合、高さもその分広げられます。
インライン要素
インライン要素の場合、ブロックの横幅は内容に合わせたものとなり、変更できません。また、ブロックの高さは一行の高さとなり、改行や折返しが生じた場合はブロックも改行ないし折返しとなります。

置換インライン要素について。

画像, マルティメディア及び入力フォームの入力欄・ボタンなどは、可能ならテキスト以外のもので置き換えられて表示されます。

このようにテキスト以外のものに置き換えられる可能性のあるインライン要素を置換インライン要素と呼びます。

置換インライン要素の場合、横幅や高さなどが置換えとなるものにより定まるため、一般のインライン要素と若干異なった挙動となるプロパティがあります。

CSSにおけるブロックレヴェル/インラインの概念に関する注意事項。

尚、実際にはプロパティ操作で、インライン要素のスタイルをブロックレヴェル式にできますし、その逆も可能です(ネットスケープ 4.x及びインターネットエクスプローラ 4.xでは出来ませんが)。

その為、以下のプロパティの説明では例えば「ブロックレヴェル要素云々」と書くべきところを「ブロックレヴェル式スタイル云々」という書き方にします。

ボックス関連のプロパティ。

それでは、ボックス関連のプロパティを挙げておきます。

displayプロパティ…ボックスの表示方式の変更。

displayプロパティは表示形式を指定するプロパティです。

ブロックレヴェル要素をインライン式に表示させたい(前後の改行を無くしたい)とか、インライン要素をブロックレヴェル式に表示したい(前後で改行させたい，横幅を定めたい…など)場合にはdisplayプロパティで表示方式を変更できます。

また、視覚障碍者向けの案内など、通常の視覚系ブラウザでは表示する必要のない要素を、このプロパティで非表示にする事も出来ます。

値には、主に以下のものが使えます。

none

非表示にします。表示上この値を当てられた要素は存在しないものとされます。

inline
インライン式の表示にします。前後での改行がなされません。
block
ブロックレヴェル式の表示にします。前後で強制改行されます。
list-item
リストアイテム式の表示にします。基本的にはブロックレヴェル式の表示と同じですが、専用のプロパティで要素の先頭にマーカを付けることが出来るようになります(<li>要素のデフォルト表示形式)。

display: none;プロパティに関する注意事項。

PCでは非表示でも問題無いものの、音声ブラウザや携帯端末でのアクセスには有用なアンカーなどを「display: none;」プロパティで非表示にする事が考えられますが、もっとも普及している音声ブラウザ『ホームページリーダ』では、この方法では折角のコンテンツが読み上げられない事があります。

このため、オフ・レフトと呼ばれるテクニックが考案されております。

表(テーブル)関連の要素に関してdisplayプロパティを当てる場合の注意事項。

実際にはこの他にも表(テーブル)関連要素など向けの独自のプロパティ値が定義されておりますが、実際には現在も殆どのブラウザで実装されておりません。

このため、多くのブラウザでは表(テーブル)関連要素に一回でもdisplayプロパティを当ててしまうとdisplayプロパティの値を元に戻せなくなり、その結果表(テーブル)が表(テーブル)の形に表示出来なくなってしまいます。

表関連要素にdisplayプロパティを当てる場合はその記述をしたスタイル定義ファイルを当てたHTML文書内で表を表示する事は不可能になると承知した上で行いましょう。

widthプロパティ…ボックスの横幅。(平成17年 9月 6日 更新)

heightプロパティ…ボックスの高さ。(平成17年 9月 6日 更新)

widthプロパティ及びheightプロパティは、それぞれボックスの横幅及び高さを指定します。

widthプロパティとheightプロパティの対象となる要素は主に以下のものがあります。

ブロックレヴェル式の要素

要素の大きさをwidthプロパティとheightプロパティで指定する事が出来ます。

尚、ブロックレヴェル式の要素の場合、横幅を省略した場合は、上位要素の幅に左右マージン等をとった状態で最大に取れる幅(100%の幅)となります。

置換インライン要素

置換インライン要素の場合、置換されるものが持つ固有の幅と高さを自動的に適用しますが、widthプロパティやheightプロパティにより、この大きさを変更する事も可能です。

尚、実際の幅/高さと異なるwidthプロパティ/heightプロパティを当てた場合、ウェブブラウザは多くの場合適宜拡大縮小します。

値は主に以下の単位を用います。

%

上位要素の幅/高さに対する比率です。

px
ピクセル数です。
em
文字数です。

この他、幅・高さを状況に合わせて適宜決める「auto」値もあります。

widthプロパティ及びheightプロパティについての注意事項。

画像などにwidth/heightプロパティを当てた場合。

画像などの置換インライン要素にwidthプロパティかheightプロパティのうち、どちらか片方だけを指定した場合は、もう片方もそれに合わせて拡大縮小するブラウザが殆どですが、そのような挙動を規定されている訳では無いので、指定するのなら双方ともきちんと指定しておきましょう。

max-widthプロパティ…ボックスの最大幅。

min-widthプロパティ…ボックスの最小幅。

max-heightプロパティ…ボックスの最大高さ。

min-heightプロパティ…ボックスの最小高さ。

max-widthプロパティ, min-widthプロパティ, max-heightプロパティ及びmin-heightプロパティはボックスの幅及び高さの最大値及び最小値を指定します。

具体的には

  1. まず、幅または高さが指定されていない場合の値を計算します。
  2. その結果最大値が指定されていてそれより大きくなる場合はそれより小さくなるように計算し直します。
  3. 更に最小値が指定されていてそれより小さくなる場合はそれより大きくなるように計算し直します。

尚、最大値と最小値の大小関係が逆になっている場合は事前に入れ替えて考えます(例えば片方の単位が「%」でもう片方が「em」と言うような場合には大小関係が意図的で無くても逆転する可能性があります)。

ボックス系プロパティでの値の指定方法。

今後このページで紹介されるプロパティは、値の指定方法は共通となります。

プロパティ名: 値;
上下左右全てに値を当てます。
プロパティ名: 値1 値2;
上下に値1、左右に値2を当てます。
プロパティ名: 値1 値2 値3;
上に値1, 左右に値2, 下に値3を当てます。
プロパティ名: 値1 値2 値3 値4;

値1から順に上，右，下，左の値を当てます。

プロパティ名-top: 値;
上の値を当てます。その他の値は定めません。
プロパティ名-bottom: 値;
下の値を当てます。その他の値は定めません。
プロパティ名-left: 値;
左の値を当てます。その他の値は定めません。
プロパティ名-right: 値;
右の値を当てます。その他の値は定めません。
ボックス系プロパティでの注意事項。

borderプロパティ群…ボーダの指定。

borderプロパティ群は、ボーダに関する指定を行います。

実際にはボーダに関しては幅，色，形の違いや上下左右での扱いがバラバラに決められる事から様々なプロパティがあります。

border-styleプロパティ…ボーダのスタイルの指定。

border-styleプロパティは、ボーダのスタイルを指定するプロパティです。

border-styleプロパティが取れる値には主に以下のものがあります。但し、ブラウザに依っては実装されていないものもありますので注意して下さい(その場合はsolid(実線表示)になることが多いです)。

none
非表示にします。
solid
実線表示にします。
dash
破線表示にします。線が引かれない部分は透明になります。
dotted
点線表示にします。点が打たれない部分は透明になります。
double
二重実線表示にします。二本線の間は透明になります。
inset
左上が暗く、右下が明るい立体的な表示になります。
outset
左上が明るく、右下が暗い立体的な表示になります。
groove
枠が溝を掘った様に表示される。
ridge
枠が浮び上がっている様に表示される。
border-styleプロパティを用いる上での注意事項。

border-widthプロパティ…ボーダの幅の指定。

border-widthプロパティは、ボーダの幅を指定するプロパティです。

border-widthプロパティの値の単位には主に以下のものがとれます。いずれも0以上となります。

%
親要素の幅に対する比率です。
px
ピクセル数です。
em
文字の大きさに対する比率です。
border-widthプロパティで使えるキーワード。

また、border-widthプロパティでは、具体的な値の代わりに以下のキーワードで太さを指定する事も出来ます。

thin
細い枠線になります。
medium
中くらいの太さの枠線になります。
thick
太い枠線になります。

border-colorプロパティ…ボーダの色の指定。

border-colorプロパティは、ボーダの色を指定するプロパティです。

border-colorプロパティの値は文字などに適用する色と同じです。

尚、ボーダの色をプロパティで指定しない場合は当該要素に当てられている前景色が適用されます。

border-colorプロパティを用いる上での注意事項。

borderプロパティ…ボーダのスタイル・幅・色の一括指定。

borderプロパティはボーダ関連のプロパティ群を一括して指定するものです。

borderプロパティでは、必要な値を空白で区切って任意の順番で並べて行きます。

例えば、以下のようなプロパティ定義があったとします。

p.note {
    border-width: 2px;
    border-color: #0c0;
    border-style: solid;
    }

これは、borderプロパティを用いる事で、以下の様に略記できます。

p.note {
    border: 2px #0c0 solid;
    }
borderプロパティを用いる上での注意事項。
borderプロパティのヴァリエーション。

同じプロパティの値を複数並べて、上下左右の値を個別に指定することはできません。以下の指定法のみとなります。

border:
上下左右全てのボーダを決めます。
border-top: 値;
上のボーダを決めます。その他のボーダは定めません。
border-bottom: 値;
下のボーダを決めます。その他のボーダは定めません。
border-left: 値;
左のボーダを決めます。その他のボーダは定めません。
border-right: 値;
右のボーダを決めます。その他のボーダは定めません。

paddingプロパティ…パディングの幅の指定。

paddingプロパティはパディングの幅を指定します。

paddingプロパティの値の単位には主に以下のものがとれます。いずれも0以上となります。

%
親要素の幅に対する比率です。
px
ピクセル数です。
em
文字の大きさに対する比率です。

paddingプロパティを用いる上での注意事項。

marginプロパティ…マージンの幅の指定。

marginプロパティはマージンの幅を指定します。

marginプロパティの値の単位には主に以下のものがとれます。値はマイナスでも構いませんがその場合隣接する他の要素と重なる事になります。

%
親要素の幅に対する比率です。
px
ピクセル数です。
em
文字の大きさに対する比率です。
auto

ボックスの幅に合わせて適宜調整します。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com