Webデータ管理
HTML+CSS (3) (2章) 2011/10/19(水)
講義で使うフォルダ
演習室の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¥(演習1)スタイルシートで文字の大きさを指定
前回作成したスタイルシート「tsujido.css」を開き、下記の通
り修正してください
body{background-color:#fff8e0;} h1{ background-color:#060;color:#fff; font-size:2em; } .head{background-color:#fff;} .contents{background-color:#fc6;}文字の大きさの指定
文字の大きさ指定
スタイル font-size : 文字の大きさ 機能 文字の大きさを指定する 値 数値 (%、em、pxなど) % 標準の文字サイズを「100%」とした割合 em 親要素の文字サイズを「1em」とした比 px ピクセル数で指定 pt ポイント数で指定(演習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;}文字の周囲の余白の指定
文字の周囲の余白の指定
スタイル padding : 間隔 機能 文字と周囲との間隔を指定する 値 %、em、pxなどの数値 % 親要素の横幅を「100%」とした割合 em 要素内の文字サイズを「1em」とした比 px ピクセル数で指定 pt ポイント数で指定(演習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;}ブロックの周囲の余白の指定
ブロックの周囲の余白の指定
スタイル margin : 余白の量 機能 ブロック枠の周囲との間隔を指定する 値 %、em、pxなどの数値 auto・・・自動的に調整する % 親要素の横幅を「100%」とした割合 em 要素内の文字サイズを「1em」とした比 px ピクセル数で指定 pt ポイント数で指定(演習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;}文字の周囲に枠線を引く
文字の周囲に枠線を引く
スタイル border-style : 枠の種類 機能 枠線の種類を指定する 値 solid・・・枠を1本線で表示する dotted・・・枠を点線で表示する dashed・・・枠を破線で表示する double・・・枠を二重線で表示する groove・・・枠をへこませて表示する ridge・・・枠を出っぱって表示する inset・・・枠の内側をへこませて表示する outset・・・枠を内側を出っぱって表示する none・・・枠を表示しない(演習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;}文字の上下左右の一方に枠線を引く
文字の上下左右の一方に枠線を引く
スタイル border-left : 枠の種類 太さ 色
機能 要素の左側に引く枠の種類、太さ、色を指 定する
値 border-style border-width border-color
border-top 枠線(上部)の種類、太さ、色を指定する border-right 枠線(右部)の種類、太さ、色を指定する border-bottom 枠線(下部)の種類、太さ、色を指定する border-left 枠線(左部)の種類、太さ、色を指定する
