4回目 10/17

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

Download Report