全ての要素は、表示領域を持っています。
ここでは、その制御方法について説明します。
なお、表示領域の指定方法は全般的に以下のルールがあります。
枠の上下左右を同時に指定する方法と、枠の一部だけを指定する方法です。
border-width のようなプロパティ名を使用します。
枠の上下左右を1pxで表示する場合は、以下のように記述します。
border-width: 1px;
枠の上下を1px、左右を2pxで表示する場合は、以下のように記述します。
border-width: 1px 2px;
枠の上を1px、下を2px、左右を3pxで表示する場合は、以下のように記述します(順番に注意)。
border-width: 1px 3px 2px;
枠の上を1px、下を2px、左を3px、右を4pxで表示する場合は、以下のように記述します(順番に注意)。
border-width: 1px 4px 2px 3px;
まとめると、順番は基本的に「上右下左」となります。
border-left-width のようなプロパティ名を使用します。
top / bottom / left / right がそれぞれ「上」「下」「左」「右」を表します。
枠の右を1pxで表示する場合は、以下のように記述します。
border-right-width: 1px;
以降、プロパティ名の表記は border-XXX-width のようにします。
同時指定の場合はXXXを省き、
個別指定の場合はXXXにそれぞれのキーワードを入れて表記して下さい。
表示領域の枠(border)を表示する方法を指定します。
枠の幅を指定します。
10px などの数値指定の他、thin / medium / thick というキーワードが使えます。
それぞれ「細い」「中間」「太い」を表します。
枠の色を指定します。
色指定 方法の他、transparent というキーワードが使えます。
これは枠を透明にします。
枠線の表示方法を指定します。
枠線を表示しません。
noneと同じです。
点線で表示します。
破線(長めの点線)で表示します。
一本線で表示します。これがデフォルトです。
二本線で表示します。
溝の入った線で表示します。
grooveとは逆に、真ん中が盛り上がった形の線で表示します。
キャンバスに埋め込まれたような形で枠線を表示します。
キャンバスから盛り上がったような形で枠線を表示します。
枠線の幅、色、表示方法をいっぺんに指定する方法もあります。
border: 1px solid red; border-left: dotted; border-right: dotted 2px;
パディングを指定します。
これは「borderの内側にあるスペース」の事です。
パディング幅を数値で指定します。
borderと同様、上下左右をそれぞれ個別に指定する方法と同時に指定する方法があります。
マージンを指定します。
これは「borderの外側にあるスペース」の事です。
マージン幅を数値で指定します。
borderと同様、上下左右をそれぞれ個別に指定する方法と同時に指定する方法があります。