padding( パディング ) padding プロパティでボックスの内側の余白を指定しますこの部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定しますボーダーには色太さ線の種類を指定できます画像で

(1)

1111 基本のボックス（margin, width, height, border, background）

CSS3 アニメーション（およびトランジション）の基本はボックスです。このボックスに色を付けたり、ボックスにテキスト（文字）や画像を入れて、ボックスを移動・回転・２Ｄ変形・３Ｄ変形してアニメーションを作ります。では先ずボックスを作ってみましょう。基本的なボックスは下の四角形のようなものです。ボックスを作るときには、ボックスをどんな風に描きたいのかを CSS3 のプロパティ（適用するスタイルの種類）を使って指定します。〔ボックス〕〔ボックスについて〕 HTML の要素（div、p、span、img など）にはボックスと呼ばれる領域が作られます。ボックスは図のような構造になっています。HTML を書いたことがある方でしたら、お馴染みの図でしょう。〔CSS ボックスモデル〕 margin padding content border top left bottom right content edge padding edge border edge margin edge ボックスはつぎの部分から成り立っています。・content（内容） width プロパティと height プロパティで大きさを指定します。この部分にはテキスト（文字）や画像を表示できます。

(2)

© 2016 電脳 Papa 2 ・padding（パディング） padding プロパティでボックスの内側の余白を指定します。この部分の内側には背景（背景色や背景画像）を表示できます。・border（ボーダー） border プロパティでボックスの境界線を指定します。ボーダーには色、太さ、線の種類を指定できます。画像で境界線を描くこともできます。・margin（マージン） margin プロパティでボックスの外側の余白を指定します。周囲の要素との余白になります。この部分には背景は表示できません。〔ボックスに指定するプロパティの書き方〕ボックスに指定するプロパティは CSS の基本書式に基づいて記述します。たとえば div 要素の大きさを幅 100px、高さ 50px、背景色をピンク色、ボーダーを幅 1px、線種を solid、線色を赤色で指定したい場合はつぎのように指定します。基本的にはセレクタ { プロパティ名: 値; } という書き方をします。・セレクタセレクタ（selector）とはスタイルシートでスタイルを適用する対象のことです。要素（div、p、span、img など）や id、class などがあります。後章で詳しく説明します。・プロパティ名プロパティ（property）とは適用するスタイルのことです。・値適用するプロパティの値（value）です。「{」と「}」を括弧と呼びます。「:」をコロン、「;」セミコロンと呼びます。 { ～ }で囲んだ全体を宣言ブロック（declaration block）、「プロパティ名: 値;」の部分をスタイル宣言（declaration）と呼びます。 div { width: 100px; height: 50px; background-color: pink; border-width: 1px; border-type: solid; border-color: red; }

(3)

ボックスに指定するプロパティには次のようなものがあります。

■

margin, margin-top, margin-right, margin-bottom,

margin-left

マージン（外側の余白）を指定します。値説　　　　　明数値＋単位数値＋pxなどの単位を付けて指定パーセント（%） auto 自動設定（初期値）親ボックスの幅を基準とした割合をパーセント（%）で指定（上下マージンも親ボックスの幅を基準とする） margin は、上下左右のマージンをまとめて指定するときに使用します。 margin: 10px; と記述すると、上下左右すべて 10px。 margin: 10px 20px; と記述すると、上下 10px・左右 20px。 margin: 10px 0px 20px; と記述すると、上 10px・左右 0px・下 20px。 margin: 10px 0px 10px 20px; と記述すると、上 10px・右 0px・下 10px・左 20px。（margin に指定する値は、記述する順番が決まっています。値を４つ記述するときは、 “時計周り（右回り）”と覚えましょう。）上下左右のマージンをそれぞれ個別に、margin-top、margin-bottom、margin-left、 margin-right で指定することもできます。 ◎ margin の持つ次の特徴は、アニメーション（およびトランジション）を作るときに役立つので、覚えておきましょう。・数値、パーセントはマイナスの値も指定できます。この場合、親ボックスよりはみ出して表示されることになります。 ■

width, height

コンテント（content）の四角形の幅（width）と高さ（height）を指定します。値説　　　　　明数値＋単位数値（正の数値）＋pxなどの単位を付けて指定パーセント（%） auto 自動設定（初期値）親ボックスの幅を基準とした割合をパーセント（%）で指定 width: 100px;、height: 50px; のように記述します。

div 要素などのボックス要素に width と height を指定すると、指定された width と height の大きさの content が描画されます。padding や border を指定すると、content の外周に描かれます。

(4)

■

border, border-top, border-right, border-bottom,

border-left

ボーダーのスタイル・幅・色を指定します。値説　　　　　明 border-styleの値ボーダーのスタイル border-widthの値ボーダーの幅 border-colorの値ボーダーの色 border は、上下左右のボーダーをまとめて指定するときに使用します。

border: solid 10px red; や border: 10px dotted #FF0000; のように記述します。 border に指定する border-style の値、border-width の値、border-color の値は、記述する順番は自由です。

上下左右のボーダーをそれぞれ個別に、border-top、border-bottom、border-left、 border-right で指定することもできます。

■

border-style, border-top-style, border-right-style,

border-bottom-style, border-left-style

ボーダーのスタイルを指定します。値説　　　　　明 solid 実線 dashed 破線 dotted 点線 double 二重線 groove ボーダーが立体的にへこんで見える線 ridge ボーダーが立体的に隆起して見える線 inset ボーダーで囲まれた内部が立体的にへこんで見える線 outset ボーダーで囲まれた内部が立体的に隆起して見える線 hidden ボーダー非表示 none ボーダーなし（初期値） border-style は、上下左右のボーダーのスタイルをまとめて指定するときに使用します。 border-style: solid; と記述すると、上下左右すべて実線。

border-style: dashed solid; と記述すると、上下破線・左右実線。

border-style: dotted solid dashed; と記述すると、上点線・左右実線・下破線。 border-style: solid dotted double dashed; と記述すると、上実線・右点線・下二重線・左破線。（border-style に指定する値は、記述する順番が決まっています。値を４つ記述するときは、“時計周り（右回り）”と覚えましょう。）上下左右のボーダーのスタイルをそれぞれ個別に、border-top-style、border-bottom- style、border-left-style、border-right-style で指定することもできます。 ◎border-style は、W3C の CSS3 仕様ではアニメーション（およびトランジション）に指

(5)

定できるプロパティではないので、アニメーション（およびトランジション）でゆっくり変化させることはできません。アニメーション（およびトランジション）に指定しても、アニメーション（およびトランジション）が始まると瞬時に切り替わります。

■

border-width, border-top-width, border-right-width,

border-bottom-width, border-left-width

ボーダーの幅を指定します。値説　　　　　明数値＋単位数値（正の数値）＋pxなどの単位を付けて指定 thin 細いボーダー medium 中程度のボーダー（初期値） thick 太いボーダー border-width は、上下左右のボーダーの幅をまとめて指定するときに使用します。 border-width: 10px; と記述すると、上下左右すべて 10px。 border-width: 10px 20px; と記述すると、上下 10px・左右 20px。 border-width: 10px 0px 20px; と記述すると、上 10px・左右 0px・下 20px。 border-width: 10px 0px 10px 20px; と記述すると、上 10px・右 0px・下 10px・左 20px。（border-width に指定する値は、記述する順番が決まっています。値を４つ記述するときは、“時計周り（右回り）”と覚えましょう。）上下左右のボーダーのスタイルをそれぞれ個別に、 border-top-width 、 border-bottom-width、border-left-width、border-right-width で指定することもできます。

■

border-color, border-top-color, border-right-color,

border-bottom-color, border-left-color

ボーダーの色を指定します。値説　　　　　明色 transparent 透明、親要素の背景が透けて見える（初期値）カラーネームや#RRGGBB またはrgba(R数値, G数値, B数値, 透明度数値)で指定 border-color は、上下左右のボーダーの色をまとめて指定するときに使用します。 border-color: red; と記述すると、上下左右すべて赤。

border-color: red blue; と記述すると、上下赤・左右青。

border-color: yellow red green; と記述すると、上黄・左右赤・下緑。

border-color: red #FFFF00 green rgba(0, 0, 255, 1.0) ; と記述すると、上赤・右黄・下緑・左青。

（border-color に指定する値は、記述する順番が決まっています。値を４つ記述するときは、“時計周り（右回り）”と覚えましょう。）

(6)

上下左右のボーダーのスタイルをそれぞれ個別に、border-top-color、border-bottom- color、border-left-color、border-right-color で指定することもできます。

■ padding, padding-top, padding-right, padding-bottom,

padding-left

パディング（border の内側の余白）を指定します。値説　　　　　明数値＋単位数値＋pxなどの単位を付けて指定パーセント（%）親ボックスの幅を基準とした割合をパーセント（%）で指定（上下パディングも親ボックスの幅を基準とする） padding は、上下左右のマージンをまとめて指定するときに使用します。 padding: 10px; と記述すると、上下左右すべて 10px。 padding: 10px 20px; と記述すると、上下 10px・左右 20px。 padding: 10px 0px 20px; と記述すると、上 10px・左右 0px・下 20px。 padding: 10px 0px 10px 20px; と記述すると、上 10px・右 0px・下 10px・左 20px。（padding に指定する値は、記述する順番が決まっています。値を４つ記述するときは、 “時計周り（右回り）”と覚えましょう。）上下左右のマージンをそれぞれ個別に、padding-top、padding-bottom、padding-left、 padding-right で指定することもできます。 ◎ padding は持つ次の特徴は、次のような特徴を持ちます。・パディングで指定した余白には、背景（background プロパティ）で指定した色や画像が表示されます。・数値、パーセントにマイナスの値を指定することはできません。・ <tr>、<thead>、<tbody>、<tfoot>、<col>、<colgroup>要素にはパディングはありません。 ■

background

背景の色や背景に表示する画像の表示方法を指定します。値説　　　　　明 background-colorの値 background-imageの値背景に表示する画像を指定 background-repeatの値背景に表示する画像の繰り返し方法を指定 background-attachmentの値背景に表示する画像のスクロール・固定を指定 background-positionの値背景に表示する画像の表示位置を指定カラーネームや#RRGGBB またはrgba(R数値, G数値, B数値, 透明度数値)で指定 background は、背景の表示方法をまとめて指定するときに使用します。

background: yellow url("backImage.png"); や background: url("backImage.png") repeat-y fixed; のように記述します。

(7)

-repeat の値、background-attachment の値、background-position の値は、記述する順番は自由です。 ■

background-color

背景の色を指定します。値説　　　　　明色 transparent 透明、親要素の背景が透けて見える（初期値）カラーネームや#RRGGBB またはrgba(R数値, G数値, B数値, 透明度数値)で指定

background-color: gray;、background-color: #808080;、background-color: rgba(128, 128, 128, 1.0); のように記述します。 ■

background-image

背景に表示する画像を指定します。値説　　　　　明 URI none 背景に画像を表示しない（初期値） URI（URL）で画像ファイルを指定 html ファイルと同じ階層にある images という名称のフォルダの中の画像ファイル backImage.png を指定する場合には background-image: url("images/backImage.png"); のように記述します。 ■

background-repeat

背景に表示する画像の繰り返し表示方法を指定します。値説　　　　　明 repeat repeat-x 横方向に繰り返して表示する repeat-y 縦方向に繰り返して表示する no-repeat 繰り返し表示をしない縦横方向に画像を繰り返して表示し敷き詰める（初期値） background-repeat: repeat-y; のように記述します。 ■

background-position

背景に表示する画像の表示位置を指定します。値説　　　　　明数値＋単位パーセント（%） left, center, right top, center, bottom

表示するボックスの左上端からの横位置、縦位置の距離を数値＋pxなどの単位を付けて指定表示するボックスのどの位置に表示するか横位置、縦位置をパーセント（%）で指定表示するボックスの左上端からの横位置を 0%、50%、100% と指定したのと同じ表示するボックスの左上端からの縦位置を 0%、50%、100% と指定したのと同じ

(8)

background-position: 100px 50px;、background-position:50% 80%;、 background- position: right top;のように記述します。

数値で指定する場合は、background-position: 100px 50px;は表示するボックスの左上端と表示する画像の左上端との横方向の距離（100px）と縦方向の距離（50px）となります。パーセントで指定する場合は、次のようになります。 background-position:0% 0%; 表示するボックスと画像の左上端が揃う。 background-position:50% 50%; 表示するボックスと画像の中心が揃う。 background-position:100% 100%; 表示するボックスと画像の右下端が揃う。数値、パーセントには、マイナスの値も指定できます。それでは、つぎのような基本のボックスを作成してブラウザに表示してみましょう。【DivBox の説明】〔HTML の記述（DivBox.html）〕 HTML 文書の<head>タグ内に適用する CSS のファイル名を記述します。 <link rel="stylesheet" type="text/css" href="DivBox.css">

次に div 要素に id 属性を使用して box1 という属性名を付けます。div 要素に id 属性で属性名を付けて識別できるようにしておくと、div 要素を複数記述するときにそれぞれの div 要素に異なった id 名を付けて識別できるので便利です。 <div id="box1"></div> サンプルＣＳＳ <!DOCTYPE html> <html> <head> <title>DivBox</title> <meta charset="UTF-8">

(9)

つぎに基本のボックス（div 要素）に適用するスタイルを CSS に記述します。

〔CSS の記述（DivBox.css）〕

先ず CSS に id セレクタ（selector）「#」で#box1 という id 名を付けて div 要素に適用するスタイルを記述します。

適用するスタイルの種類のことをプロパティ（property）と言い、#box1 セレクタには margin プロパティを上 30px・左 50px の値で指定し、width プロパティを 100px、height プロパティを 100px、background-color プロパティを lightgray、border プロパティをボーダースタイル solid・幅 5px・色 gray で指定します。

それでは DivBox.html をブラウザで表示してみましょう。中身が lightgray で周辺が gray のボックスが表示されましたか。もしうまく表示されない場合には、タイプした文字が違っていたり、「#」や「:」、「;」、「-」が無かったり、「{」、「｝」の向きが違っていたりするのでよく見てください。 #box1 { margin: 30px 0px 0px 50px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; }

<p>■基本のボックスを表示する。</p> <div id="box1"></div>

</body> </html>