HTML+CSS(2)

演習室のPCのハードディスクには演習で作成した
データは保管できません。
各PCの「ネットワーク接続」ショートカットからメディ
ア情報センターのサーバーにアクセスしてください
(Zドライブとして使用できます)。
Webプログラミング
Webプログラミング1
プログラミング1
HTML+CSS (2) (2章)
2013/4/24(水)
演習名
演習1
演習2
演習3
使用するフォルダ
Z:¥Webプログラミング1¥20130424¥演習1¥
Z:¥Webプログラミング1¥20130424¥演習2¥
Z:¥Webプログラミング1¥20130424¥演習3¥
講義で使うフォルダ
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 1/15
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 2/15
「メモ帳」で前回作成した「hinagata.html」を開き、内容を下記
の通り更新し、「index.html」として保存してください
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“ja”>
<head>
<meta http-equiv=“Content-Type” content=“text/html;
charset=Shift_JIS”>
<title>辻堂案内</title>
修正する行
</head>
<body>
<h1>辻堂案内にようこそ</h1>
<p>辻堂案内は辻堂周辺を紹介するサイトです。</p>
<p>辻堂周辺・・・辻堂駅と湘南工科大学・辻堂の歴史・作者について</p>
</body>
</html>
(演習1)
演習1)トップページを作成しよう
1)トップページを作成しよう
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 3/15
(演習1)
演習1)結果
1)結果
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 4/15
「index.html」と同じフォルダにスタイルシート「tsujido.css」を
作成し、「index.html」を下記の通り修正してください
<p>～</p>
段落の範囲を示す
<h1> <h2> <h3> <h4> <h5> <h6>～</h1～h6>
h1～h6で、見出しの高さを指定する
body{background-color:#fff8e0;}
h1{
background-color:#060;color:#fff;
}
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=“ja”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<meta http-equiv=“Content-Style-Type” content=“text/css”>
<link rel=“stylesheet” href=“tsujido.css” type=“text/css”>
<title>辻堂案内</title>
</head>
後略
本文作成に関するタグ
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 5/15
(演習2)
演習2)スタイルシートを作ろう
2)スタイルシートを作ろう
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 6/15
<mata http-equiv=“Content-Style-Type”
content=“text/css”>
使用するスタイルシートがCSSであることを宣言する
<link rel=“stylesheet” href=CSSファイル名
type=“text/css”>
CSSファイル名で指定したCSSファイルを、HTMLの表示に
使うように指定する
(演習2)
演習2)結果
2)結果
スタイルシートの指定
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 7/15
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 8/15
スタイルシートの基本的な記述方法
背景色の指定
スタイル
background-color : 色
セレクタ {プロパティ:値}
機能
背景色を指定する
値
数値または色名にて指定
プロパティ宣言
プロパティ宣言
body { background-color : #fff8e0 }
セレクタ
プロパティ
文字色の指定
値
スタイル
color : 色
複数のスタイルはセミコロンでつなぐ
機能
文字の色を指定する
値
数値または色名にて指定
セレクタ { プロパティ : 値 ; プロパティ : 値 }
スタイルシートの書き方
背景色・文字色の指定
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 9/15
6桁の16進数で色を指定
# ff 99 33
R G B
R,G,B毎に「00」色が弱い～「ff」色が強い(256段階)
にて指定
#000000 black #800000 maroon #008000 green
#c0c0c0 silver #ff0000
#808080 gray
#ffffff
red
#800080 purple
white #ff00ff
#00ff00
lime
#808000 olive
fuchsia #ffff00
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 10/15
スタイルシート「tsujido.css」、「index.html」を下記の通り修正
してください
body{background-color:#fff8e0;}
h1{
background-color:#060;color:#fff;
}
.head{background-color:#fff;}
.contents{background-color:#fc6;}
#000080 navy
#0000ff
blue
#008080 teal
yellow #00ffff
aqua
スタイルシートでの色の指定
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 11/15
前略
<body>
<h1>辻堂案内にようこそ</h1>
<p class=“head”>辻堂案内は辻堂周辺を紹介するサイトです。</p>
<p class=“contents”>辻堂周辺・・・辻堂駅と湘南工科大学・辻堂の歴史・作者について</p>
</body>
</html>
(演習3)
演習3)同じタグで異なるスタイルを指定
3)同じタグで異なるスタイルを指定
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 12/15
<要素名 class=“クラス名”>
要素に「クラス名」で指定されたスタイルを使用する
(演習3)
演習3)結果
3)結果
クラスによる指定
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 13/15
本日の演習内容について復習してください
演習
内容
作成ファイル
演習１
トップページを作成しよう
index.html
演習２
スタイルシートを作ろう
index.html
tsujido.css
演習３
同じタグで異なるスタイルを指定
index.html
tsujido.css
HTML+CSS(2)まとめ
HTML+CSS(2)まとめ
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 15/15
湘南工科大学講義資料 Webプログラミング1(2013) 阿倍 14/15

Download Report