4回目 10/17

1
コンピュータリテラシーII
(樋口担当)
4回目
10/17
日本工業大学 情報リテラシーII
本日の予定
2
Webページの作成(続き)
I.スタイルシート
II.レイアウト
III.課題
日本工業大学 情報リテラシーII
3
I.スタイルシート
日本工業大学 情報リテラシーII
1.スタイルシート
4
スタイルシート:文書のスタイルの設定が書かれているデータ
CSS:スタイルシートの書き方(言語)の一つ
Cascading Style Sheet
スタイルシートでできること
(1)フォントの設定
(2)段落にインデントを付ける
(3)文字の色の設定
(4)イメージの場所の設定
(5)文字間隔の調整
(6)行間隔の設定
日本工業大学 情報リテラシーII
2.スタイルの設定(直接指定)
5
<要素名 style=“プロパティ:プロパティ値”>
設定するプロパティの値
スタイルを指定する対象の要素
(ex)red, 40pt, serif
(ex)H1, P, DIV,
スタイル設定の種類
(ex)color, font-size, font-family
※1つの要素に複数のスタイルを設定する場合:
区切りに「
;
」セミコロンを付ける
区切りのセミコロン
(ex)
<H1 style=“color:green; font-size:40pt; font-family:serif”>
特大見出し 色は緑
フォントの種類は明朝体
フォントサイズは40pt
日本工業大学 情報リテラシーII
2.スタイルの設定(直接指定)
6
具体例
<html>
<head>
<title> なす </title>
</head>
<body>
<H1 style="color:red;font-size:40pt;font-family:serif">那須の茄子が成す</H1>
</body>
</html>
出力
日本工業大学 情報リテラシーII
3.スタイルの設定(スタイルシート)
7
セレクタ{プロパティ:プロパティ値}
設定するプロパティの値
スタイルを指定する対象の要素
(ex)red, 40pt, serif
(ex)H1, P, DIV,
スタイル設定の種類
(ex)color, font-size, font-family
※1つの要素に複数のスタイルを設定する場合:
スタイルの終わりに「
(ex)
セミコロンを
忘れずに
H1{
color:green;
font-size:40pt;
font-family:serif;
}
;
」セミコロンを付ける
特大見出し
色は緑
フォントサイズは40pt
フォントの種類は明朝体
日本工業大学 情報リテラシーII
4.スタイルシートのデータファイル作成
8
ファイル名:英語の名前.css
書き方
セレクタ{
プロパティ:プロパティ値;
プロパティ:プロパティ値;
・・・
プロパティ:プロパティ値;
}
セレクタ{
プロパティ:プロパティ値;
プロパティ:プロパティ値;
・・・
プロパティ:プロパティ値;
}
日本工業大学 情報リテラシーII
5.スタイルシートの参照
9
<LINK rel=“stylesheet” type=“text/css” href=“ファイル名.css">
参照
参照する要素の属性
参照するファイル名
参照する情報のデータ形式
これを<head>と</head>の間に記入する
日本工業大学 情報リテラシーII
6.id
10
同じ要素に対して違うスタイルを適用する方法①
CSS
要素名#id名{・・・・}
(ex) H1#id1 {color:red;font-size:40pt;font-family:serif}
html
<要素名 class=クラス名>・・・・・</要素名>
(ex) <H1 id=“id1”> ・・・・・</H1>
(注意)idは一箇所しか指定できない
同じスタイルを複数個所に利用できない
日本工業大学 情報リテラシーII
7.クラス
11
同じ要素に対して違うスタイルを適用する方法②
CSS
要素名.クラス名{・・・・}
(ex) H1.class1 {color:red;font-size:40pt;font-family:serif}
html
<要素名 class=クラス名>・・・・・</要素名>
(ex) <H1 class=class1> ・・・・・</H1>
日本工業大学 情報リテラシーII
12
II.レイアウト
日本工業大学 情報リテラシーII
13
1.ブロックレベル要素とインラインレベル要素
汎用的なブロックレベル要素
<html>
<head>
<title> なすび </title>
</head>
<body>
<DIV>
<H1>初めてのなすび体験</H1>
<P>ある日森の中<I>なすび</I>を拾った.
しかし,それは<EM>くさったなすび</EM>
だったので食べることができなかった</P>
</DIV>
</body>
</html>
ブロックレベル要素
インラインレベル要素
日本工業大学 情報リテラシーII
2.汎用的な要素
14
DIV :汎用的なブロックレベル要素
SPAN :汎用的なインラインレベル要素
要素のスタイル(文字大きさ,色,種類等)を設定する時に便利
<html>
<head>
<title> なすび </title>
</head>
<body>
<DIV>
<H1>初めてのなすび体験</H1>
<P>ある日森の中
<SPAN style="color:red">なすび</SPAN>を拾った.
しかし,それは
<SPAN style="color:blue">くさったなすび</SPAN>
だったので食べることができなかった</P>
</DIV>
</body>
</html>
日本工業大学 情報リテラシーII
3.ボックスモデル
15
ブロックボックス:
ブロックレベル要素が生成する矩形(長方形)の領域
border
padding
茄子那須成す那須成す茄子那須
成す茄子那須成す那須成す茄子
那須成す那須成す茄子成す那須
成す茄子那須成す茄子那須茄子
height
width
margin
日本工業大学 情報リテラシーII
3.float
16
スタイルを設定するプロパティの一つ
(1)意味:
回り込み(ボックスの位置の設定)をする
(2)プロパティ値(プロパティのパラメータ):
①left :左寄せ
②right :右寄せ
(3)約束事:
floatを指定したブロックには必ずwidthを指定する
日本工業大学 情報リテラシーII
4.width
17
スタイルを設定するプロパティの一つ
(1)意味:
ボックスの幅を指定する
(2)プロパティ値(プロパティのパラメータ):
①ピクセル数
:700px(不変)
②パーセンテージ :50%(Windowの幅に応じて変化)
日本工業大学 情報リテラシーII
5.border, padding, margin
18
値を1つ指定した場合:
[上下左右]がそのスタイルになる
値を2つ指定した場合:
記述した順に[上下][左右]のスタイルになる
値を3つ指定した場合:
記述した順に[上][左右][下]のスタイルになる
値を4つ指定した場合:
記述した順に[上][右][下][左]のスタイルになる
日本工業大学 情報リテラシーII
6.border-style
19
none: ボーダー非表示,太さ0,重なり合う場合は他の値が優先.
hidden:ボーダー非表示,太さ0,重なり合う場合はhiddenの値が優先.
Solid:1本線で表示.
Double:2本線で表示.
groove:立体的に窪んだ線で表示.
ridge:立体的に隆起した線で表示.
inset:上と左のボーダーが暗く、下と右のボーダーが明るく表示.
ボーダーで囲まれた領域全体が立体的に窪んだように表示.
outset:上と左のボーダーが明るく、下と右のボーダーが暗く表示.
ボーダーで囲まれた領域全体が立体的に隆起したように表示.
dashed:破線で表示されます。
dotted:点線で表示されます。
日本工業大学 情報リテラシーII
5.floatを使用したレイアウトの例
20
ページ全体
メニュー
メイン
日本工業大学 情報リテラシーII
6.例
#page{
width:800px;
}
#main{
background:silver;
width:580px;
height:500px;
padding:10px;
border:10px;
float:right;
}
#menu{
background:green;
width:170px;
height:500px;
padding:10px;
border:10px;
border-style:solid;
border-color:blue;
margin:0px 10px 0px 0px;
float:right;
}
21
<html>
<head>
<title> 茄子(メイン) </title>
<LINK rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<DIV id="page">
<DIV id="main">
<H1>茄子のメインページ</H1>
</DIV>
<DIV id="menu">
<H1>メニュー</H1>
<UL>
<LI><A href="index.html">ホーム</A>
<LI><A href="introduction.html">自己紹介</A>
</UL>
</DIV>
</DIV>
</body>
</html>
日本工業大学 情報リテラシーII
6.例
22
style.css
#page{
width:800px;
}
#menu{
background:silver;
width:170px;
height:500px;
padding:10px;
border:10px;
border-style:solid;
border-color:blue;
margin:0px 10px 0px 0px;
float:right;
}
#home{
background:green;
width:580px;
height:500px;
padding:10px;
border:10px;
float:right;
}
#introduction{
background:yellow;
width:580px;
height:500px;
padding:10px;
border:10px;
float:right;
}
日本工業大学 情報リテラシーII
6.例
23
Index.html
<html>
<head>
<title> 茄子(メイン) </title>
<LINK rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<DIV id="page">
<DIV id=“home">
<H1>茄子のメインページ</H1>
</DIV>
<DIV id="menu">
<H1>メニュー</H1>
<UL>
<LI><A href="index.html">ホーム</A>
<LI><A href="introduction.html">自己紹介</A>
</UL>
</DIV>
</DIV>
</body>
</html>
日本工業大学 情報リテラシーII
6.例
24
Introduction.html
<html>
<head>
<title> 茄子の自己紹介</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<DIV id="page">
<DIV id=“introduction">
<H1>自己紹介</H1>
</DIV>
<DIV id="menu">
<H1>メニュー</H1>
<UL>
<LI><A href="index.html">ホーム</A>
<LI><A href="introduction.html">自己紹介</A>
</UL>
</DIV>
</DIV>
</body>
</html>
日本工業大学 情報リテラシーII
6.例
25
日本工業大学 情報リテラシーII
26
V.課題
日本工業大学 情報リテラシーII
1.課題
27
自分のWebページの全世界への公開(続き)
①次の要件満たす自分のWebページのデータファイルの作成
②データファイルをWebサーバ(sstu.nit.ac.jp)にUP
提出方法:自分のホームページを見れるようにすること
先週と同じ
日本工業大学 情報リテラシーII
2.要件
28
要件1:先週作成した次のページに自作の外部CSSを読み込ませる
①トップぺージ,②自己紹介ページ
要件2:先週作成した上述の2つのページにそれぞれメニュー部分
(同じものでよい)をCSSを使って作成する
要件3:メニューの各項目に,(少なくとも)上述の2つのページ含める
要件4:上記の機能を含んだ外部CSSファイルを自作する
要件5:作成したCSSファイルを学生サーバにアップロードする
日本工業大学 情報リテラシーII
3.採点方法
29
①各ページにメニュー部分がある
②メニューをクリックするとちゃんとジャンプできる
③全ページがCSSに対応
④先週の課題が満たされていないと,先週と同様に減点
締め切り
基本的に演習時間中(次回までに)
遅れて提出する場合、Webページを作成の上,樋口まで連絡する.
ただし、その際の採点は低目の評価となる.
次週はWebページ製作の続きをする
日本工業大学 情報リテラシーII