Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

Size: px

Start display at page:

Download "Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23"

ゆりないちぞの
6 years ago
Views:

1 Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 1/23

2 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理演習 1 演習 2 Z: Web データ管理演習 2 演習 3 Z: Web データ管理演習 3 演習 4 Z: Web データ管理演習 4 演習 5 Z: Web データ管理演習 5 演習 6 Z: Web データ管理演習 6 講義で使うフォルダ 2/23

3 前回作成したスタイルシート tsujido.css を開き下記の通り修正してください body{background-color:#fff8e0;} h1{ background-color:#060;color:#fff; font-size:2em; }.head{background-color:#fff;}.contents{background-color:#fc6;} ( 演習 1) スタイルシートで文字の大きさを指定 3/23

4 ( 演習 1) 結果 4/23

5 文字の大きさ指定スタイル font-size : 文字の大きさ機能文字の大きさを指定する値数値 (% em pxなど ) % 標準の文字サイズを 100% とした割合 em 親要素の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定文字の大きさの指定 5/23

6 スタイルシート tsujido.css を開き下記の通り修正してください body{background-color:#fff8e0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em; }.head{background-color:#fff;padding:3em;}.contents{background-color:#fc6;padding:0.5em;} ( 演習 2) スタイルシートで文字の周囲の余白を指定 6/23

7 ( 演習 2) 結果 7/23

8 文字の周囲の余白の指定スタイル機能値 padding : 間隔文字と周囲との間隔を指定する % em px などの数値 % 親要素の横幅を 100% とした割合 em 要素内の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定文字の周囲の余白の指定 8/23

9 スタイルシート tsujido.css を開き下記の通り修正してください body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; }.head{background-color:#fff;padding:3em;margin:0;}.contents{background-color:#fc6;padding:0.5em;margin:0;} ( 演習 3) スタイルシートでブロックの周囲の余白を指定 9/23

10 ( 演習 3) 結果 10/23

11 ブロックの周囲の余白の指定スタイル機能値 margin : 余白の量ブロック枠の周囲との間隔を指定する % em px などの数値 auto 自動的に調整する % 親要素の横幅を 100% とした割合 em 要素内の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定ブロックの周囲の余白の指定 11/23

12 スタイルシート tsujido.css を開き下記の通り修正してください body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-style:solid;border-width:20px;border-color:#030; }.head{background-color:#fff;padding:3em;margin:0;}.contents{background-color:#fc6;padding:0.5em;margin:0;} ( 演習 4) スタイルシートで文字の周囲に枠線を引く 12/23

13 ( 演習 4) 結果 13/23

14 文字の周囲に枠線を引くスタイル機能値 border-style : 枠の種類枠線の種類を指定する solid 枠を 1 本線で表示する dotted 枠を点線で表示する dashed 枠を破線で表示する double 枠を二重線で表示する groove 枠をへこませて表示する ridge 枠を出っぱって表示する inset 枠の内側をへこませて表示する outset 枠を内側を出っぱって表示する none 枠を表示しない文字の周囲に枠線を引く 14/23

15 スタイルシート tsujido.css を開き下記の通り修正してください body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left : solid 20px #030; }.head{background-color:#fff;padding:3em;margin:0;}.contents{background-color:#fc6;padding:0.5em;margin:0;} ( 演習 5) スタイルシートで文字の上下左右の一方にだけ枠線を引く 15/23

16 ( 演習 5) 結果 16/23

17 文字の上下左右の一方に枠線を引くスタイル機能値 border-left : 枠の種類太さ色要素の左側に引く枠の種類太さ色を指定する border-style border-width border-color border-top border-right border-bottom border-left 枠線 ( 上部 ) の種類太さ色を指定する枠線 ( 右部 ) の種類太さ色を指定する枠線 ( 下部 ) の種類太さ色を指定する枠線 ( 左部 ) の種類太さ色を指定する文字の上下左右の一方に枠線を引く 17/23

18 HTML ファイル index.html を開き下記の通り修正して shuuhen.html で保存してください前略 <title> 辻堂周辺 </title> </head> <body> <h1> 辻堂の周辺にあるもの </h1> <h2> 辻堂駅 </h2> <p class= honbun > 辻堂駅は大正 5 年 12 月 1 日に開業した JR 東日本東海道線の駅です出口は北口南口西口の 3 つがあります </p> <h2> 湘南工科大学 </h2> <p class= honbun > 湘南工科大学は 1963 年に創立した工学部のみの単科大学で機械工学科電気電子工学科情報工学科コンピュータ応用学科コンピュータデザイン学科人間環境学科の 6 学科から構成されます </p> </body> </html> ( 演習 6-1) スタイルシートで行間を指定する 18/23

19 ( 演習 6-1) 結果 19/23

20 スタイルシート tsujido.css を開き下記の通り修正してください body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left:solid 20px #030; } h2{background-color:#fc6;font-size:1.2em;padding:0.5em;}.head{background-color:#fff;padding:3em;margin:0;}.contents{background-color:#fc6;padding:0.5em;margin:0;}.honbun{background-color:#fff;line-height:1.5;padding:0.8em;} ( 演習 6-2) スタイルシートで行間を指定する 20/23

21 ( 演習 6-2) 結果 21/23

22 行間を指定するスタイル機能値 line-height : 行間複数行から構成されるブロック (<p> など ) の行間を指定する数値フォントの大きさに対する比 % em などの数値行の高さ normal ブラウザによる自動調整行間を指定する 22/23

23 本日の演習内容について復習してください演習内容作成ファイル演習 1 スタイルシートで文字の大きさを指定 index.html tsujido.css 演習 2 スタイルシートで文字の周囲の余白を指定 index.html tsujido.css 演習 3 スタイルシートでブロックの周囲の余白を指定 index.html tsujido.css 演習 4 スタイルシートで文字の周囲に枠線を引く index.html tsujido.css 演習 5 スタイルシートで文字の上下左右の一方にだけ枠線を引く HTML+CSS(3) まとめ index.html tsujido.css 演習 6 スタイルシートで行間を指定する shuuhen.html tsujido.css 23/23

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

padding( パディング ) padding プロパティでボックスの内側の余白を指定しますこの部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定しますボーダーには色太さ線の種類を指定できます画像で 1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスですこのボックスに色を付けたりボックスにテキスト ( 文字 ) や画像を入れてボックスを移動回転 2D 変形 3D 変形してアニメーションを作りますでは先ずボックスを作ってみましょう基本的なボックスは下の四角形のようなものです