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

Transcription

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

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

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 に指定する値は 記述する順番が決まっています 値を4つ記述するときは 時計周り ( 右回り ) と覚えましょう ) 上下左右のマージンをそれぞれ個別に 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 の外周 に描かれます 3

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 に指定する値は 記述する順番が決まっています 値を4つ記述すると きは 時計周り ( 右回り ) と覚えましょう ) 上下左右のボーダーのスタイルをそれぞれ個別に border-top-style border-bottomstyle border-left-style border-right-style で指定することもできます border-style は W3C の CSS3 仕様ではアニメーション ( およびトランジション ) に指 4

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 に指定する値は 記述する順番が決まっています 値を 4 つ記述すると きは 時計周り ( 右回り ) と覚えましょう ) 上下左右のボーダーのスタイルをそれぞれ個別に 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 に指定する値は 記述する順番が決まっています 値を 4 つ記述すると きは 時計周り ( 右回り ) と覚えましょう ) 5

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 に指定する値は 記述する順番が決まっています 値を 4 つ記述するときは 時計周り ( 右回り ) と覚えましょう ) 上下左右のマージンをそれぞれ個別に padding-top padding-bottom padding-left padding-right で指定することもできます padding は持つ次の特徴は 次のような特徴を持ちます パディングで指定した余白には 背景 (background プロパティ ) で指定した色や 画像が表示されます 数値 パーセントにマイナスの値を指定することはできません <tr> <thead> <tbody> <tfoot> <col> <colgroup> 要素にはパディングはあ りません background 背景の色や背景に表示する画像の表示方法を指定します background-colorの値 background-imageの値 カラーネームや #RRGGBB またはrgba(R 数値, G 数値, B 数値, 透明度数値 ) で指定背景に表示する画像を指定 background-repeatの値 背景に表示する画像の繰り返し方法を指定 background-attachmentの値 背景に表示する画像のスクロール 固定を指定 background-positionの値 背景に表示する画像の表示位置を指定 background は 背景の表示方法をまとめて指定するときに使用します background: yellow url("backimage.png"); や repeat-y fixed; のように記述します 6 background: url("backimage.png") background に指定する background-color の値 background-image の値 background

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% と指定したのと同じ 7

8 background-position: 100px 50px; background-position:50% 80%; backgroundposition: right top; のように記述します 数値で指定する場合は background-position: 100px 50px; は表示するボックスの左上端と表示する画像の左上端との横方向の距離 (100px) と縦方向の距離 (50px) となります パーセントで指定する場合は 次のようになります background-position:0% 0%; 表示するボックスと画像の左上端が揃う background-position:50% 50%; 表示するボックスと画像の中心が揃う background-position:100% 100%; 表示するボックスと画像の右下端が揃う 数値 パーセントには マイナスの値も指定できます サンプル CSS それでは つぎのような基本のボックスを作成してブラウザに表示してみましょう 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"> <link rel="stylesheet" type="text/css" href="divbox.css"> </head> <body> 8

9 <p> 基本のボックスを表示する </p> <div id="box1"></div> </body> </html> つぎに基本のボックス (div 要素 ) に適用するスタイルを CSS に記述します CSS の記述 (DivBox.css) 先ず CSS に id セレクタ (selector) # で #box1 という id 名を付けて div 要素に適用す るスタイルを記述します #box1 { margin: 30px 0px 0px 50px; width: 100px; height: 100px; background-color: lightgray; border: solid 5px gray; } 適用するスタイルの種類のことをプロパティ (property) と言い #box1 セレクタには margin プロパティを上 30px 左 50px の値で指定し width プロパティを 100px height プロパティを 100px background-color プロパティを lightgray border プロパティをボーダースタイル solid 幅 5px 色 gray で指定します それでは DivBox.html をブラウザで表示してみましょう 中身が lightgray で周辺が gray のボックスが表示されましたか もしうまく表示されない場合には タイプした文字が違っていたり # や : ; - が無かったり { } の向きが違っていたりするのでよく見てください 9