ブロックの 1 文字目のを変更するセレクタ : first-letter { 1 文字目のを指定するフォントや文字色背景色枠線などのブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt(

(1)

Web

Webプログラミング

プログラミング

プログラミング1

1

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

講義で使うフォルダ

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

演習室のPCのハードディスクには演習で作成したデータは

保管できません。

各PCの「ネットワーク接続」ショートカットからメディア情報セ

ンターのサーバーにアクセスしてください(Zドライブとして使

用できます)。

演習名演習名演習名演習名使用するフォルダ使用するフォルダ使用するフォルダ使用するフォルダ演習1 Z:¥Webプログラミング1¥20130515¥演習1¥ 演習2 Z:¥Webプログラミング1¥20130515¥演習2¥ 演習3 Z:¥Webプログラミング1¥20130515¥演習3¥ 演習4 Z:¥Webプログラミング1¥20130515¥演習4¥ 演習5 Z:¥Webプログラミング1¥20130515¥演習5¥

(

(演習

演習

演習1)

1)

1)スタイルシートで

1)

スタイルシートで

スタイルシートで1

1

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:solid20px #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)結果

結果

(2)

ブロック

ブロック1

1

1 1文字目のスタイルを変更する

文字目のスタイルを変更する

ブロックの1文字目のスタイルを変更する

ブロックの1文字目を字下げする

セレクタ: first-letter {スタイル} 機能 1文字目のスタイルを指定する値フォントや文字色、背景色、枠線などのスタイルスタイル text-indent:字下げ幅機能段落の1文字目の字下げ幅を指定する値 em(標準1em)、px(ピクセル)、pt(ポイント)、%など

(

(演習

演習

演習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: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;}

(

(演習

演習

演習2)

2)

2)結果

結果

文字の表示位置を指定する

ブロックの文字の表示位置を指定する

justyfyは日本語の場合無効

center、rightは短い文章が有効

スタイル text-align:表示位置機能文字の表示位置を指定する値 left・・・・・文字を左揃えで表示する center・・・・・文字を中央揃えで表示する right・・・・・文字を右揃えで表示する justify・・・・・文字を両端揃えで表示する

(3)

(

(演習

演習

演習3)

3)

3)文字の装飾を指定する

3)

文字の装飾を指定する

9/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍スタイルシート「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: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;}

(

(演習

演習

演習3)

3)

3)結果

結果

文字の装飾を指定する

文字の装飾を指定する(1)

(1)

太字で表示する

斜体で表示する

スタイル font-weight:文字の太さ機能文字の太さを指定する値 normal・・・・・文字を標準の太さで表示する bold・・・・・文字を太字で表示する 100～900・・・・・文字の太さを100おきの数字で表示するスタイル font-style:文字の種類機能文字を斜体で表示するかどうかを指定する値 normal・・・・・斜体にせず文字を標準で表示する italic・・・・・文字をイタリック体で表示する oblique・・・・・文字をオブリーク体で表示する

文字の装飾を指定する

文字の装飾を指定する(2)

(2)

フォントを指定して表示する

文字間を調節して表示する

スタイル font-family:フォントの種類、フォント名機能文字のフォントの種類を指定する値 serif、sans-serif、cursive、fantasy、monospaceなどスタイル letter-spacing:文字の間隔機能文字と文字の間隔を指定する値 normal・・・・・文字と文字の間隔を指定しない em(文字サイズ)、px(ピクセル数)、pt(ポイント数)などの数値・・・・・文字と文字の間隔を数値で指定する

(4)

(

(演習

演習

演習4)

4)

4)フォント関連のスタイルをまとめて指定する

フォント関連のスタイルをまとめて指定する

13/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍スタイルシート「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: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;}

(

(演習

演習

演習4)

4)

4)結果

結果

（演習3と同じ）

フォント関連のプロパティの一括指定

font : 斜体

太さ

文字サイズ/行間

フォントの種類

スタイル font:斜体文字の太さ大きさ/行間フォント機能フォント関連のプロパティを一括で指定する値 font-style／font-weight／font-size／line-height／font-familyと同じ

font-stylefont-weight font-size line-height font-family

(

(演習

演習

演習5

5

5 5-

-

-1)

1)

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)

(

(演習

演習

演習5

5

5 5-

-

-1)

1)

1)結果

結果

（演習4と同じ）

(

(演習

演習

演習5

5

5 5-

-

-2)

2)

2)複数の要素にまとめてスタイルを指定する

複数の要素にまとめてスタイルを指定する

18/21 湘南工科大学講義資料Webプログラミング1(2013) 阿倍スタイルシート「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: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;} .shoukai{border-left:solid20px #ccc;margin:1em 0;}

(

(演習

演習

演習5

演習

5

5 5-

-

-2)

2)結果

2)

結果

複数の要素をまとめて扱う

<div>

<h2> ～

</h2>

<p> ～

</p>

</div>

<div>

～

</div>

機能

複数の要素をまとめて扱う

(6)

HTML+CSS(4)

HTML+CSS(4)まとめ

まとめ

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

演習演習演習演習内容内容内容内容作成ファイル作成ファイル作成ファイル作成ファイル演習１スタイルシートで1文字目を変更する shuuhen.html tsujido.css 演習２文字の表示位置を指定する shuuhen.html tsujido.css 演習３文字の修飾を指定する shuuhen.html index.html tsujido.css 演習４フォント関連のスタイルをまとめて指定する shuuhen.html tsujido.css 演習５複数の要素にまとめてスタイルを指定する shuuhen.html tsujido.css