社会と情報

第３章第２節
ネットワークを活用した
情報の収集・発信（３）
５表現方法の工夫
情報Cプレゼン用資料（座学34）
担当早苗雅史
1
５表現方法の工夫
１表現方法の工夫

①スタイルの統一
 要素によって異なるスタイル
 表現方法の工夫

部分的に文字色を変える

下線をつけ重要な部分を強調する

文字の大きさや色使い

画像のサイズや表示範囲に配慮する
みんなが自分と同じ条件でWebページを見るとは限らない
2
５表現方法の工夫
２ HTMLとスタイルシート

②スタイルシート
文字の大きさや色などをまとめて指定する方法
③CSS
 スタイルシートをどこに記述するか
 内部スタイルシート
headの中に④<style>・・・</style>で指定
 外部スタイルシート
<LINK rel="stylesheet" href="style01.css"
type="text/css">
3
５表現方法の工夫
スタイルシートの表現方法
 スタイルシートの表現方法（問１）
セレクタ｛種別：指定値；｝
 何に対してスタイルを設定できるか
タグ，クラス，ID
4
５表現方法の工夫
スタイルシートの利点（問２）
 凝ったレイアウトの作成
 スタイルシートを変えるだけで見栄えを変化
 共通のスタイルシートを使った，複数HTML
ファイルに統一したデザインの適用
5
５表現方法の工夫
スタイルシート① （問２）
body{
background-color : #baf0fe;
}
h1{
color : #0000ff;
padding : 5px; 内のり幅
background-color : #4de88e;
border : solid #9888d7 5px;
}
背景色
太線枠の色と幅
6
５表現方法の工夫
スタイルシート② （問２）
h2{
color : #cc00ff;
border-bottom : double #ffc0c0 5px;
二重線枠の色と幅
}
p{
margin-left : 30px;
右マージン幅
color : #8000ff;
}
7
５表現方法の工夫
スタイルシート③ （問２）
img{
margin-right : 40px;
float : right;
左寄せ
}
8

Download Report