Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web プログラミング 1 20130508 演習 1 演習 2 Z: Web プログラミング 1 20130508 演習 2 演習 3 Z: Web プログラミング 1 20130508 演習 3 演習 4 Z: Web プログラミング 1 20130508 演習 4 演習 5 Z: Web プログラミング 1 20130508 演習 5 演習 6 Z: Web プログラミング 1 20130508 演習 6 講義で使うフォルダ 1/23 2/23 前回の演習 3 で作成した body{background-color:#fff8e0; background-color:#060;color:#fff; font-size:2em;.head{background-color:#fff;.contents{background-color:#fc6; ( 演習 1) シートで文字の大きさを指定 ( 演習 1) 結果 3/23 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 4/23
文字の大きさ指定 font-size : 文字の大きさ 文字の大きさを指定する 数 (% em pxなど ) % 標準の文字サイズを 100% とした割合 em 親要素の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定 文字の大きさの指定 body{background-color:#fff8e0; padding:0.5em;.head{background-color:#fff;padding:3em;.contents{background-color:#fc6;padding:0.5em; ( 演習 2) シートで文字の周囲の余白を指定 5/23 6/23 文字の周囲の余白の指定 padding : 間隔 文字と周囲との間隔を指定する % em px などの数 % 親要素の横幅を 100% とした割合 em 要素内の文字サイズを 1em とした比 px ピクセル数で指定 pt ポイント数で指定 ( 演習 2) 結果 文字の周囲の余白の指定 7/23 8/23
body{background-color:#fff8e0;margin:0;.head{background-color:#fff;padding:3em;margin:0;.contents{background-color:#fc6; ( 演習 3) シートでブロックの周囲の余白を指定 ( 演習 3) 結果 9/23 10/23 ブロックの周囲の余白の指定 margin : 余白の量 ブロック枠の周囲との間隔を指定する % em px などの数 auto 自動的に調整する % 親要素の横幅を 100% とした割合 em px pt 要素内の文字サイズを 1em とした比 ピクセル数で指定 ポイント数で指定 ブロックの周囲の余白の指定 body{background-color:#fff8e0;margin:0; border-style:solid;border-width:20px;border-color:#030;.head{background-color:#fff;padding:3em;margin:0;.contents{background-color:#fc6; ( 演習 4) シートで文字の周囲に枠線を引く 11/23 12/23
文字の周囲に枠線を引く border-style : 枠の種類 枠線の種類を指定する solid 枠を 1 本線で表示する dotted 枠を点線で表示する dashed 枠を破線で表示する double 枠を二重線で表示する groove 枠をへこませて表示する ridge 枠を出っぱって表示する inset 枠の内側をへこませて表示する outset 枠を内側を出っぱって表示する none 枠を表示しない ( 演習 4) 結果 文字の周囲に枠線を引く 13/23 14/23 body{background-color:#fff8e0;margin:0; border-left : solid 20px #030;.head{background-color:#fff;padding:3em;margin:0;.contents{background-color:#fc6; ( 演習 5) シートで文字の上下左右の一方にだけ枠線を引く ( 演習 5) 結果 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 15/23 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 16/23
文字の上下左右の一方に枠線を引く border-top border-right border-bottom border-left border-left : 枠の種類太さ色 要素の左側に引く枠の種類 太さ 色を指定する border-style border-width border-color 枠線 ( 上部 ) の種類 太さ 色を指定する 枠線 ( 右部 ) の種類 太さ 色を指定する 枠線 ( 下部 ) の種類 太さ 色を指定する 枠線 ( 左部 ) の種類 太さ 色を指定する 文字の上下左右の一方に枠線を引く 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 body{background-color:#fff8e0;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;.honbun{background-color:#fff;line-height:1.5;padding:0.8em; ( 演習 6-1) 結果 ( 演習 6-2) シートで行間を指定する 湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 19/23 20/23
行間を指定する line-height : 行間 複数行から構成されるブロック (<p> など ) の行間を指定する 数 フォントの大きさに対する比 % em などの数 行の高さ normal ブラウザによる自動調整 ( 演習 6-2) 結果 行間を指定する 21/23 22/23 本日の演習内容について復習してください 演習 内容 HTML+CSS(3) まとめ 作成ファイル 演習 1 シートで文字の大きさを指定 index.html 演習 2 シートで文字の周囲の余白を指定 index.html 演習 3 シートでブロックの周囲の余白を指定 index.html 演習 4 シートで文字の周囲に枠線を引く index.html 演習 5 シートで文字の上下左右の一方にだけ枠線を引く index.html 演習 6 シートで行間を指定する shuuhen.html 23/23