第9回

Transcription

1 第 9 回 2016 年 7 月 16 日 情 報 教 育 演 習 II 第 9 回 (1) CSS(4) (1) 今 回 の 課 題 (2) リストの 記 号 や 番 号 の 設 定 (2) クラスの 利 用 (2) クラスとは (2) クラスを 使 った 設 定 (3) CSSファイルでの 設 定 (3) HTMLファイルでの 利 用 (3) クラスの 利 用 例 (1) (3) クラスの 利 用 例 (1) (4) クラスとdiv span 要 素 の 利 用 (5) div 要 素 とspan 要 素 の 機 能 (5) div span 要 素 とクラスの 組 み 合 わせ (5) 課 題 : ネット 上 の 記 事 へのコメントでHTMLファイルを 書 く (6) 1. インターネット 上 の 記 事 にコメントをする (6) (1) 情 報 を 集 める (6) (2) 情 報 にコメントをつける (6) 2. HTMLファイルの 作 成 (6) (1) ファイルの 作 成 (7) (2) コメントの 追 加 目 次 の 更 新 (7) 3. CSSを 使 用 するための 設 定 (9) 4. CSSファイルの 作 成 (9) 提 出 方 法 (10) 提 出 期 限 (10) 情 報 教 育 演 習 II 第 9 回 CSS(4) CSS(4) 前 回 に 引 き 続 き Webページの 表 現 を 設 定 する CSS について 実 習 をします また クラス という 新 しい 概 念 を 学 習 をします 1. リストの 記 号 や 番 号 の 設 定 2. クラスの 利 用 3. クラスとdiv span 要 素 の 利 用 第 9 回 - 1

2 今 回 の 課 題 1. HTMLファイルとCSSファイルを 作 成 する リストの 記 号 や 番 号 の 設 定 リスト( 箇 条 書 き)の 記 号 や 番 号 の 形 式 を 設 定 するには list-style-typeプロパティを 利 用 しま す list-style-type: 形 式 list-style-typeプロパティを 使 うと リストの 記 号 や 番 号 にどのような 形 式 を 使 うかを 指 定 でき ます 形 式 には 次 のようなものを 指 定 できます none: 表 示 しない disc: 塗 りつぶされた 丸 ( ) circle: 線 で 描 かれた 丸 ( ) square: 線 で 描 かれた 四 角 ( ) lower-roman: 小 文 字 のローマ 数 字 (i, ii, iii) upper-roman: 大 文 字 のローマ 数 字 (I, II, III) lower-geek: 小 文 字 のギリシャ 文 字 (α, β, γ) decimal: 算 用 数 字 (1, 2, 3) decimal-leading-zero: 最 初 に0をつけた 算 用 数 字 (01, 02, 03) lower-latin: 小 文 字 のラテン 文 字 lower-alpha: 小 文 字 のアルファベット(a, b, c) upper-latin: 大 文 字 のラテン 文 字 upper-alpha: 大 文 字 のアルファベット(A, B, C) ul{ list-style-type: lower-roman; 次 へ 進 んでください [ 目 次 へ] [ 次 へ] クラスの 利 用 クラスとは クラス (class) を 使 えば 同 じ 要 素 (タグ)に それぞれ 異 なるデザインを 設 定 することが できます たとえば 段 落 という 要 素 (p 要 素 )を 普 通 の 段 落 注 意 用 の 段 落 ワンポイン ト 用 の 段 落 のように 目 的 や 役 割 別 にデザインを 使 い 分 けたい 場 合 を 考 えてみましょう 2 - クラスの 利 用

3 このように ひとつの 要 素 に 複 数 のデザインを 設 定 したい 場 合 に クラスを 利 用 します クラス 名 normal : 普 通 の 段 落 用 デザイン 文 字 色 は 黒 背 景 色 は 白 クラス 名 notice : 注 意 の 段 落 用 デザイン 文 字 色 は 黒 背 景 色 は 薄 い 黄 色 クラス 名 one-pt : ワンポイント の 段 落 用 デザイン 文 字 色 は 赤 背 景 色 は 白 このように HTMLやCSSでは あらかじめ 用 意 されている 構 成 要 素 に 特 定 の 役 割 や 意 味 づけ を 追 加 することができます それが クラス という 考 え 方 です クラスを 使 った 設 定 クラス を 使 うと 特 定 の 要 素 やその 他 の 要 素 に 特 定 のスタイルを 設 定 することができま す CSSファイルでの 設 定 クラスを 設 定 するときには CSSファイルで 次 のように 設 定 します 要 素 名.クラス 名 {.クラス 名 { 要 素 名.クラス と 指 定 すると 指 定 した 要 素 に 対 してクラスを 設 定 することができます. クラス と 指 定 すると そのクラスを 指 定 したすべての 要 素 に 対 してスタイルを 設 定 することが できます クラス 名 に 使 える 文 字 には 次 の 制 限 があります アルファベット( 大 文 字 小 文 字 の 区 別 あり) ひと 文 字 めはアルファベット 数 字 (0 9) 記 号 (ハイフン - アンダースコア _ コロン : ピリオド. ) HTMLファイルでの 利 用 設 定 したクラスを 使 用 するには HTMLファイルで 次 のように 設 定 します < 要 素 名 class=" クラス 名 "> クラスの 利 用 例 (1) たとえば 最 初 に 説 明 した 段 落 の 説 明 では 次 のようにクラスを 設 定 することができます 第 9 回 - 3

4 p.normal { color: #000000; #ffffff; p.notice { color: #000000; #ffff66; p.one-pt { color: #ff0000; #ffffff; HTML 文 書 では 次 のように 利 用 することができます <pclass=" normal "> それでは 見 出 しのタグについて 説 明 しましょう <br> </p> <pclass=" notice "> 次 のことに 注 意 しましょう <br> </p> <pclass=" one-pt "> ワンポイント:h1 h6の 使 い 方 </p> クラスの 利 用 例 (1) また 複 数 の 要 素 で 同 じクラスを 利 用 することもできます たとえば 特 定 のタグを 指 定 しない 次 のようなクラスを 設 定 しておきます.example { color: #000000; #ffff66; そしてHTML 文 書 では 次 のようにして h2 要 素 とp 要 素 に 設 定 したクラスを 利 用 することがで きます <h2class=" example "> 見 出 しのタグの 例 </h2> <pclass=" example "> まず 見 出 し1を 利 用 してみましょう <br> </p> 次 へ 進 んでください [ 前 へ] [ 目 次 へ] [ 次 へ] 4 - クラスの 利 用

5 クラスとdiv span 要 素 の 利 用 div 要 素 とspan 要 素 の 機 能 div 要 素 を 使 うと 複 数 の 要 素 をまとめてグループ 化 することができます また クラスと 組 み 合 わせれば オリジナルの 要 素 ( 意 味 づけ)ができます div 要 素 は ブロックレベル 要 素 なので ひとつのブロックを 作 ることができます <h1> 第 1 章 </h1> <divclass="section1"> <h2> 第 1 節 </h2> <p></p> <p></p> </div> <divclass="section2> <h2> 第 2 節 </h2> <p></p> <p></p> </div> span 要 素 を 使 うと 文 章 中 に HTMLには 用 意 されていない オリジナルの 要 素 ( 意 味 づけ)が できます span 要 素 は インラインレベル 要 素 なので 指 定 した 部 分 は 改 行 されません <p> これからは<span class="note"> Webカメラによる 授 業 参 <span> 観 ができるかもしれません </p> div span 要 素 とクラスの 組 み 合 わせ 上 の 例 にはすでに 書 かれていますが div 要 素 やspan 要 素 にクラスを 指 定 することで HTMLの 構 成 要 素 として 定 義 されていない( 定 義 できない) 部 分 に 対 しても スタイルを 設 定 すること ができます div 要 素 にクラスを 指 定 すれば 複 数 の 要 素 に 対 してまとめてスタイルを 設 定 することができ ます span 要 素 にクラスを 指 定 すれば 特 定 の 部 分 にだけスタイルを 設 定 することができます たとえば 上 記 のdiv 要 素 とspanをを 使 った 例 に 次 のようなスタイルを 指 定 することができま す 第 9 回 - 5

6 .section1 { #ffeeee; color: #ff0000;.section2 { #ffeeee; color: #ff00ff;.note { color: #ff0000; #ffff00; 次 へ 進 んでください [ 前 へ] [ 目 次 へ] [ 次 へ] 課 題 : ネット 上 の 記 事 へのコメントでHTMLファイルを 書 く 前 回 までと 同 様 に インターネット 上 のあらゆる 記 事 へのコメント を 作 成 します 今 回 も 2つのファイルを 作 ります HTMLファイル: コメントをHTMLで 書 く CSSファイル: HTMLファイルのスタイルを 書 く 1. インターネット 上 の 記 事 にコメントをする (1) 情 報 を 集 める 自 分 が 現 在 興 味 のあるテーマについて インターネットからニュース 等 を 探 して 自 分 が 興 味 を 持 った 記 事 を1つ 集 めなさい やり 方 は 第 3 回 の 課 題 と 同 じです 第 3 回 の 課 題 の 説 明 を 見 てください (2) 情 報 にコメントをつける 記 事 を 探 したら 次 の 順 にコメントを 作 りなさい なお 文 字 数 は 200 文 字 以 上 とします が 内 容 はささいなことでかまいません やり 方 は 第 3 回 の 課 題 と 同 じです 第 3 回 の 課 題 の 説 明 を 見 てください 2. HTMLファイルの 作 成 第 8 回 の 課 題 で 作 成 したファイルをもとに 今 回 の 課 題 を 作 成 します 6 - 課 題 : ネット 上 の 記 事 へのコメントでHTMLファイルを 書 く

7 (1) ファイルの 作 成 第 8 回 の 課 題 のHTMLファイルを 開 いたあとに 次 のようにして 名 前 をつけて 別 のファイルを 作 ります メニューから ファイル 名 前 をつけて 保 存 ファイルを 次 のようにつけて 保 存 学 籍 番 号 +.html ( 半 角 文 字 で!) ( 学 籍 番 号 がC の 場 合 ファイル 名 は 0615c html ) (2) コメントの 追 加 目 次 の 更 新 次 のようなレイアウトになるように 今 回 作 ったコメントを 追 加 して 目 次 の 部 分 を 更 新 しま す 第 2 回 第 4 回 までの HTMLの 技 術 を 使 って 作 成 してください 作 成 するときには 第 4 回 の 課 題 での 注 意 点 を 参 考 に 今 回 分 のコメントと 目 次 へのリンクを 作 成 します ページのレイアウトの 例 ページのタイトル 目 次 第 9 回 のコメントへのリンク 第 8 回 のコメントへのリンク ( 途 中 省 略 ) 第 3 回 のコメントへのリンク 第 2 回 のコメントへのリンク プロフィール --- 第 9 回 の 課 題 のコメント [トップへ 戻 る] 第 8 回 の 課 題 のコメント [トップへ 戻 る] ( 途 中 省 略 ) 第 3 回 の 課 題 のコメント [トップへ 戻 る] 第 9 回 - 7

8 第 2 回 の 課 題 のコメント [トップへ 戻 る] プロフィール [トップへ 戻 る] --- 連 絡 先 著 作 権 の 情 報 作 成 するときの 注 意 点 は 次 のとおりです トップへ 戻 る 用 に.jump_top というクラスを 設 定 し 右 揃 えの 設 定 をする HTMLファイルで 現 在 設 定 しているp 要 素 をdiv 要 素 に 書 き 換 える ( 変 更 例 ) 変 更 前 :<p><a href="#top">[トップへ 戻 る]</a></p> 変 更 後 :<divclass="jump_top"><a href="#top">[トップへ 戻 る]</a></ 目 次 用 に.toc というクラスを 設 定 して 適 当 なスタイルを 設 定 する HTMLファイルで 目 次 のh2 要 素 にクラスを 設 定 する 変 更 前 :<h2> 目 次 </h2> 変 更 後 :<h2class="toc"> 目 次 </h2> 目 次 を 更 新 する 8つのコメント( 第 2 9 回 )へジャンプできるリンクをつくる 情 報 源 へのURLは その 情 報 源 にアクセスできるようにリンクにすること コメントを 作 る それぞれのコメントの 最 後 には ページのトップ( 一 番 上 )にジャンプする トップへ 戻 る というリンクを 作 る 第 3 回 の 課 題 で 説 明 した 注 意 点 を 守 る ファイルの 最 後 にある 連 絡 先 の 更 新 日 の 日 付 を 更 新 する <address> 作 成 日 : ; 更 新 日 : <br> Copyright (C)2010 兵 庫 太 郎,Allrights reserved.<br> このページに 関 する 問 合 せ 先 :<br> . <ahref="mailto:c @ed.hyogo-dai.ac. dai.ac.jp</a> </address> 8 - 課 題 : ネット 上 の 記 事 へのコメントでHTMLファイルを 書 く

9 3. CSSを 使 用 するための 設 定 課 題 のHTMLファイルに 今 回 作 成 するCSSファイルを 使 用 するための 設 定 をします 第 6 回 の 課 題 で 追 加 したCSSに 関 する 設 定 部 分 を 下 のように 変 更 します ただし CSSファイルのファイル 名 の 部 分 は 次 の 説 明 を 読 んで 自 分 のCSSファイルの 名 前 を 設 定 してください <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> の 日 記 </title> <link rel="stylesheet" href=" CSSファイルのファイル "type="text/css"> 名 </head> 4. CSSファイルの 作 成 コメントが 書 かれたHTMLファイルに スタイルを 設 定 します 第 8 回 の 課 題 で 作 成 したファイルをもとに 作 成 します 第 8 回 の 課 題 で 作 成 したファイルを 開 いたあとに 次 のようにして 名 前 をつけて 別 のファイル を 作 ります 学 籍 番 号 +.css ( 半 角 文 字 で!) ( 学 籍 番 号 がC の 場 合 ファイル 名 は 0615c css ) CSSを 使 って HTMLファイルの 各 要 素 に 次 のような 設 定 をしてください 今 回 分 リスト( 関 連 情 報 の 部 分 )の 番 号 や 記 号 を 設 定 する(ulまたはol 要 素 ) トップへ 戻 る 用 に.jump_top というクラスを 設 定 し 右 揃 えの 設 定 をする HTMLファイルで 現 在 設 定 しているp 要 素 をdiv 要 素 に 書 き 換 える 目 次 用 に.toc というクラスを 設 定 して 適 当 なスタイルを 設 定 する HTMLファイルで 目 次 のh2 要 素 にクラスを 設 定 する 前 回 までの 分 フォントの 設 定 (すべての 要 素 で 設 定 ) スタイル 太 さ サイズなど 行 揃 えの 設 定 (h1 h6 要 素 ) リンク 部 分 の 色 の 設 定 (a 要 素 ) 行 間 の 設 定 (p 要 素 ) マージン(margin)の 設 定 (h1 h6 p blockquote address 要 素 ) まわりの 空 間 (padding)の 設 定 (h1 h6 p blockquote address 要 素 ) ページ 全 体 の 文 字 色 と 背 景 色 (body 要 素 ) 第 9 回 - 9

10 文 字 色 と 背 景 色 (h1 h6 p blockquote address 要 素 ) 枠 線 の 設 定 ( 色 太 さ 種 類 )(h1 h6 p blockquote address 要 素 ) 提 出 方 法 作 成 したファイルを 次 の 場 所 にコピーして 提 出 してください マイコンピュータ Fsの 資 料 課 題 kawano 提 出 提 出 期 限 原 則 として 平 成 22 年 6 月 22 日 9 時 までとします 期 限 以 後 は 特 別 な 理 由 がない 限 り 提 出 を 受 け 付 けません 課 題 のやりなおしは 提 出 期 限 まで 受 け 付 けます [ 前 へ] [ 目 次 へ] 10 - 課 題 : ネット 上 の 記 事 へのコメントでHTMLファイルを 書 く