Webデータ管理
HTML+CSS (4) (2章) 2011/10/26(水)
講義で使うフォルダ
演習室のPCのハードディスクには演習で作成したデータは
保管できません。
各PCの「ネットワーク接続」ショートカットからメディア情報セ
ンターのサーバーにアクセスしてください(Zドライブとして使
用できます)。
演習名 使用するフォルダ 演習1 Z:¥Webデータ管理¥20111026¥演習1¥ 演習2 Z:¥Webデータ管理¥20111026¥演習2¥ 演習3 Z:¥Webデータ管理¥20111026¥演習3¥ 演習4 Z:¥Webデータ管理¥20111026¥演習4¥ 演習5 Z:¥Webデータ管理¥20111026¥演習5¥(演習1)スタイルシートで1文字目を変更する
スタイルシート「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:first-letter {color:#060;font-size:1.2em;} 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; text-indent:1em;}ブロック1文字目のスタイルを変更する
ブロックの1文字目のスタイルを変更する
ブロックの1文字目を字下げする
セレクタ: first-letter {スタイル} 機能 1文字目のスタイルを指定する 値 フォントや文字色、背景色、枠線などのスタイル スタイル text-indent:字下げ幅 機能 段落の1文字目の字下げ幅を指定する 値 em(標準1em)、px(ピクセル)、pt(ポイント)、%など(演習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:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;} h2{background-color:#fc6;font-size:1.2em;padding:0.5em; text-align:center;} .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;text-indent:1em;}文字の表示位置を指定する
ブロックの文字の表示位置を指定する
justyfyは日本語の場合無効
center、rightは短い文章が有効
スタイル text-align:表示位置 機能 文字の表示位置を指定する 値 left・・・・・文字を左揃えで表示する center・・・・・文字を中央揃えで表示する right・・・・・文字を右揃えで表示する justify・・・・・文字を両端揃えで表示する(演習3)文字の装飾を指定する
スタイルシート「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:first-letter {color:#060;font-size:1.2em;font-style:italic;} h2{background-color:#fc6;font-size:1.2em;padding:0.5em;text-align:center;letter-spacing:0.5em;font-family:”ＭＳ Ｐ明 朝”,”HiraMinProN-W3”;} .head{background-color:#fff;padding:3em;margin:0;font-weight:bold;} .contents{background-color:#fc6;padding:0.5em;margin:0;} .honbun{background-color:#fff;line-height:1.5;padding:0.8em;text-indent:1em;}
文字の装飾を指定する(1)
太字で表示する
斜体で表示する
スタイル font-weight:文字の太さ 機能 文字の太さを指定する 値 normal・・・・・文字を標準の太さで表示する bold・・・・・文字を太字で表示する 100～900・・・・・文字の太さを100おきの数字で表示する スタイル font-style:文字の種類 機能 文字を斜体で表示するかどうかを指定する 値 normal・・・・・斜体にせず文字を標準で表示する italic・・・・・文字をイタリック体で表示する oblique・・・・・文字をオブリーク体で表示する文字の装飾を指定する(2)
フォントを指定して表示する
文字間を調節して表示する
スタイル font-family:フォントの種類、フォント名 機能 文字のフォントの種類を指定する 値 serif、sans-serif、cursive、fantasy、monospaceなど スタイル letter-spacing:文字の間隔 機能 文字と文字の間隔を指定する 値 normal・・・・・文字と文字の間隔を指定しない em(文字サイズ)、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-left:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;font-style:italic;} h2{background-color:#fc6; padding:0.5em;text-align:center;letter-spacing:0.5em;font:bold 1.2em ”ＭＳ Ｐ明朝”,”HiraMinProN-W3”;} .head{background-color:#fff;padding:3em;margin:0;font-weight:bold;} .contents{background-color:#fc6;padding:0.5em;margin:0;}.honbun{background-color:#fff;line-height:1.5;padding:0.8em;text-indent:1em;}
フォント関連のプロパティの一括指定
フォント関連のプロパティの一括指定
font : 斜体 太さ 文字サイズ/行間 フォントの種類
スタイル font:斜体 文字の太さ 大きさ/行間 フォント 機能 フォント関連のプロパティを一括で指定する 値 font-style／font-weight／font-size／line-height／font-familyと同じ(演習5-1)複数の要素にまとめてスタイルを指定する
HTMLファイル「shuuhen.html」を開き、下記の通り修正してください 前略 <title>辻堂周辺</title> </head> <body> <h1>辻堂の周辺にあるもの</h1> <div class=“shoukai”> <h2>辻堂駅</h2> <p class=“honbun”>辻堂駅は大正5年12月1日に開業したJR東日本東海道線の 駅です。出口は、北口、南口、西口の3つがあります。</p> </div> <div class=“shoukai”> <h2>湘南工科大学</h2> <p class=“honbun”>湘南工科大学は1963年に創立した工学部のみの単科大学 で、機械工学科、電気電子工学科、情報工学科、コンピュータ応用学科、コン ピュータデザイン学科、人間環境学科の6学科から構成されます。</p> </div> </body> </html>(演習5-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:solid 20px #030; } h2:first-letter {color:#060;font-size:1.2em;font-style:italic;}h2{background-color:#fc6;padding:0.5em;text-align:center;letter-spacing:0.5em;font:bold 1.2em ”ＭＳ Ｐ明朝”,”HiraMinProN-W3”;margin:0;} .head{background-color:#fff;padding:3em;margin:0;font-weight:bold;}
.contents{background-color:#fc6;padding:0.5em;margin:0;}
.honbun{background-color:#fff;line-height:1.5;padding:0.8em;text-indent:1em;margin:0;}
