第３章 第２節 ネットワークを活用した 情報の収集・発信（３） ５ 表現方法の工夫

Presentation on theme: "第３章 第２節 ネットワークを活用した 情報の収集・発信（３） ５ 表現方法の工夫"— Presentation transcript:

1 第３章 第２節 ネットワークを活用した 情報の収集・発信（３） ５ 表現方法の工夫
第3章　第2節　ネットワークを活用した情報の収集・発信(4) 第３章　第２節 　ネットワークを活用した 　　　　　　情報の収集・発信（３） 　　５　表現方法の工夫 情報Cプレゼン用資料（座学34） 担当　早苗雅史 C34

2 みんなが自分と同じ条件でWebページを見るとは限らない
５　表現方法の工夫 １　表現方法の工夫 ①スタイルの統一 要素によって異なるスタイル 表現方法の工夫 部分的に文字色を変える 下線をつけ重要な部分を強調する 文字の大きさや色使い 画像のサイズや表示範囲に配慮する みんなが自分と同じ条件でWebページを見るとは限らない

3 ２ HTMLとスタイルシート ②スタイルシート 文字の大きさや色などをまとめて指定する方法 ③CSS スタイルシートをどこに記述するか
５　表現方法の工夫 ２　HTMLとスタイルシート ②スタイルシート 文字の大きさや色などをまとめて指定する方法 ③CSS スタイルシートをどこに記述するか 内部スタイルシート headの中に④<style>・・・</style>で指定 外部スタイルシート <LINK rel="stylesheet" href="style01.css" type="text/css">

4 スタイルシートの表現方法 スタイルシートの表現方法 （問１） セレクタ ｛ 種別 ： 指定値 ； ｝ 何に対してスタイルを設定できるか
５　表現方法の工夫 スタイルシートの表現方法 スタイルシートの表現方法　（問１） 　　　　セレクタ　｛　種別　：　指定値　；　｝ 何に対してスタイルを設定できるか タグ，クラス，ID

5 スタイルシートの利点 （問２） 凝ったレイアウトの作成 スタイルシートを変えるだけで見栄えを変化
５　表現方法の工夫 スタイルシートの利点　（問２） 凝ったレイアウトの作成 スタイルシートを変えるだけで見栄えを変化 共通のスタイルシートを使った，複数HTML ファイルに統一したデザインの適用

6 スタイルシート① （問２） body{ background-color : #baf0fe; } h1{ color : #0000ff;
５　表現方法の工夫 スタイルシート①　（問２） body{ background-color : #baf0fe; } h1{ color : #0000ff; padding : 5px; background-color : #4de88e; border : solid #9888d7 5px; 背景色 内のり幅 太線枠の色と幅

7 スタイルシート② （問２） h2{ color : #cc00ff; border-bottom : double #ffc0c0 5px;
５　表現方法の工夫 スタイルシート②　（問２） h2{ color : #cc00ff; border-bottom : double #ffc0c0 5px; } p{ margin-left : 30px; color : #8000ff; 二重線枠の色と幅 右マージン幅

8 ５　表現方法の工夫 スタイルシート③　（問２） img{ margin-right : 40px; float : right; } 左寄せ