Web プログラミング 1 HTML+CSS (3) (2 章 ) 2013/5/8( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用で

(1)

Web

Webプログラミング

プログラミング

プログラミング1

1

HTML+CSS (3)(2章) 2013/5/8(水) 1/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

講義で使うフォルダ

2/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

演習室の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)

1)

1)スタイルシートで文字の大きさを指定

1)

スタイルシートで文字の大きさを指定

前回の演習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)

1)

1)結果

結果

(2)

文字の大きさの指定

文字の大きさ指定

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

(

(演習

演習

演習2)

2)

2)スタイルシートで文字の周囲の余白を

スタイルシートで文字の周囲の余白を

指定

スタイルシート「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)

2)

2)結果

結果

文字の周囲の余白の指定

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

(3)

(

(演習

演習

演習3)

3)

3)スタイルシートでブロックの周囲の余白

3)

スタイルシートでブロックの周囲の余白

を指定

スタイルシート「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)

3)

3)結果

結果

ブロックの周囲の余白の指定

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

(

(演習

演習

演習4)

4)

4)スタイルシートで文字の周囲に枠線を

スタイルシートで文字の周囲に枠線を

引く

スタイルシート「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)

(

(演習

演習

演習4)

4)

4)結果

結果

文字の周囲に枠線を引く

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

(

(演習

演習

演習5)

5)

5)スタイルシートで文字の上下左右の一

5)

スタイルシートで文字の上下左右の一

方にだけ枠線を引く

スタイルシート「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)

5)

5)結果

結果

(5)

文字の上下左右の一方に枠線を引く

スタイル border-left : 枠の種類太さ色機能要素の左側に引く枠の種類、太さ、色を指定する

値 border-style border-width border-color

border-top 枠線(上部)の種類、太さ、色を指定する border-right 枠線(右部)の種類、太さ、色を指定する border-bottom 枠線(下部)の種類、太さ、色を指定する border-left 枠線(左部)の種類、太さ、色を指定する

(

(演習

演習

演習6

6

6 6-

-

-1)

1)

1)スタイルシートで行間を指定する

スタイルシートで行間を指定する

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

6

6 6-

-1)

-

1)

1)結果

結果

(演習

(

演習

演習6

6

6 6-

-2)

-

2)

2)スタイルシートで行間を指定する

スタイルシートで行間を指定する

スタイルシート「tsujido.css」を開き、下記の通り修正してくだ

さい

body{background-color:#fff8e0;margin:0;} h1{ background-color:#060;color:#fff;font-size:2em; padding:0.5em;margin:0; border-left:solid20px #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)

(

(演習

演習

演習6

6

6 6-

-

-2)

2)

2)結果

結果

行間を指定する

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

HTML+CSS(3)

HTML+CSS(3)まとめ

まとめ

本日の演習内容について復習してください

演習演習演習演習内容内容内容内容作成ファイル作成ファイル作成ファイル作成ファイル演習１スタイルシートで文字の大きさを指定 index.html tsujido.css 演習２スタイルシートで文字の周囲の余白を指定 index.html tsujido.css 演習３スタイルシートでブロックの周囲の余白を指定 index.html tsujido.css 演習４スタイルシートで文字の周囲に枠線を引く index.html tsujido.css 演習５スタイルシートで文字の上下左右の一方にだけ枠線を引く index.html tsujido.css 演習６スタイルシートで行間を指定する shuuhen.html tsujido.css