Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 1/23
演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111019 演習 1 演習 2 Z: Web データ管理 20111019 演習 2 演習 3 Z: Web データ管理 20111019 演習 3 演習 4 Z: Web データ管理 20111019 演習 4 演習 5 Z: Web データ管理 20111019 演習 5 演習 6 Z: Web データ管理 20111019 演習 6 講義で使うフォルダ 2/23
前回作成したスタイルシート 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
( 演習 1) 結果 4/23
文字の大きさ指定 スタイル font-size : 文字の大きさ 機能 文字の大きさを指定する 値 数値 (% em pxなど ) % 標準の文字サイズを 100% とした割合 em 親要素の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定 文字の大きさの指定 5/23
スタイルシート 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
( 演習 2) 結果 7/23
文字の周囲の余白の指定 スタイル 機能 値 padding : 間隔 文字と周囲との間隔を指定する % em px などの数値 % 親要素の横幅を 100% とした割合 em 要素内の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定 文字の周囲の余白の指定 8/23
スタイルシート 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
( 演習 3) 結果 10/23
ブロックの周囲の余白の指定 スタイル 機能 値 margin : 余白の量 ブロック枠の周囲との間隔を指定する % em px などの数値 auto 自動的に調整する % 親要素の横幅を 100% とした割合 em 要素内の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定 ブロックの周囲の余白の指定 11/23
スタイルシート 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
( 演習 4) 結果 13/23
文字の周囲に枠線を引く スタイル 機能 値 border-style : 枠の種類 枠線の種類を指定する solid 枠を 1 本線で表示する dotted 枠を点線で表示する dashed 枠を破線で表示する double 枠を二重線で表示する groove 枠をへこませて表示する ridge 枠を出っぱって表示する inset 枠の内側をへこませて表示する outset 枠を内側を出っぱって表示する none 枠を表示しない 文字の周囲に枠線を引く 14/23
スタイルシート 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
( 演習 5) 結果 16/23
文字の上下左右の一方に枠線を引く スタイル 機能 値 border-left : 枠の種類太さ色 要素の左側に引く枠の種類 太さ 色を指定する border-style border-width border-color border-top border-right border-bottom border-left 枠線 ( 上部 ) の種類 太さ 色を指定する枠線 ( 右部 ) の種類 太さ 色を指定する枠線 ( 下部 ) の種類 太さ 色を指定する枠線 ( 左部 ) の種類 太さ 色を指定する 文字の上下左右の一方に枠線を引く 17/23
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
( 演習 6-1) 結果 19/23
スタイルシート 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
( 演習 6-2) 結果 21/23
行間を指定する スタイル 機能 値 line-height : 行間 複数行から構成されるブロック (<p> など ) の行間を指定する 数値 フォントの大きさに対する比 % em などの数値 行の高さ normal ブラウザによる自動調整 行間を指定する 22/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