2016 年 度 メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 ~ CSS と Web アクセシビリティ 立 命 館 大 学 情 報 理 工 学 部 メディア 情 報 学 科 進 捗 が 遅 れている 場 合 に 限 り,テキスト 中 で 省 略 可 マークのついた 節 は 省 略 してもよい. 1 はじめに 本 演 習 ではこれまで, 様 々なタグを 用 いた 基 礎 的 な Web ページの 作 成 方 法 レイアウト 方 法 について 学 んできました.ここで,タグは 本 来, Web ページ 上 の 文 章 構 造 を 決 定 するために 用 い るものでまた,タグでレイアウトを 決 定 す ると,HTML 文 章 の 構 造 が 複 雑 になり,Web ペ ージの 運 用 保 守 が 非 常 に 困 難 となりまそ のため,Web ページのレイアウトに 関 しては, Cascading Style Sheets(カスケーディング スタ イル シート:CSS)を 用 いてそれを 実 現 する ことが 推 奨 されてきました. そこで 発 展 編 2 では,CSS の 基 礎 とその 記 述 方 法 を 説 明 し,CSS を 用 いた Web ページ 作 成 に ついて 理 解 を 深 めることを 目 標 としままた, 世 界 中 の 人 々が 分 け 隔 てなく 情 報 資 源 にアクセ スできるようにすることを 目 的 とした,Web ア クセシビリティの 考 え 方 についても 学 びま 2 Cascading Style Sheets CSS は, 基 本 的 には, 各 タグで 囲 まれた 文 章 をどのように 表 示 するかを 決 定 しまCSS を 用 いる 際 には, 必 ず 以 下 の 記 述 が 必 要 となりま タグ 機 能 <meta http-equiv= Content-Style-type content= text/css > CSSを 使 用 することを 宣 言 しま (sample30.html) <meta http-equiv= Content-Style-type content= text/css > なお,ページ 幅 の 都 合 上 改 行 してありますが, 改 行 はしなくて 結 構 でしかし,この 改 行 部 分 に 相 当 するところに, 半 角 スペースを 入 力 し てください. 3 CSS の 記 述 方 法 3.1 CSS の 書 式 CSS は, 基 本 的 には, 以 下 の 書 式 をとりま セレクタプロパティ: 値 ; ここで,セレクタは 適 用 範 囲,プロパティは 何 を 指 定 するか( 文 字 の 色, 形 など), 値 は 具 体 的 な 内 容 ( 赤,MS 明 朝 など)を 指 定 しま また,セレクタに 示 した 適 用 範 囲 に 複 数 の 指 定 ( 文 字 の 色 と 形 の 両 方 など)をしたい 場 合 は, ; で 区 切 りまこのとき, ; で 区 切 った 後 に 改 行 すると 見 やすい 場 合 がありま 3.2 CSS の 3 つの 実 現 方 法 CSS には 以 下 に 示 す 3 つの 実 現 方 法 がありま style 属 性 を 使 う 方 法 HTML ファイルの ~ 間 に CSS を 記 述 する 方 法 CSS のみを 記 述 した 別 ファイル(***.css)を 用 意 し,HTML ファイルからリンクを 貼 る 方 法 style 属 性 を 使 う 場 合 は 以 下 のように 記 述 しま タグ < 要 素 名 style= プロパティ: 値 > 機 能 要 素 のスタイルを 指 定 しま (sample31.html) <p style="color:#ff0000"> 赤 い 文 字 </p> 次 に,HTML ファイルの ~ 間 に CSS を 記 述 する 場 合 は, 以 下 のように 記 述 しま タグ 機 能 (sample32.html) <style type= text/css > ~ </style> CSS を HTML ファイルの 中 で 記 述 します -16-
メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 <style <!-- pcolor:#ff0000 --> </style> <p> 赤 い 文 字 </p> ここで,<!-- -->は,CSS に 対 応 していないブ ラウザで 閲 覧 したときに,この 中 の 部 分 がその ままテキストとして 表 示 されないようにするた めの 配 慮 で 最 後 に,CSS のみを 記 述 した 別 ファイルを 用 意 し,HTML ファイルからリンクを 貼 る 場 合 は, 以 下 のように 記 述 しま タグ <link rel= stylesheet href= ***.css type= text/css > 機 能 ***.css ファイル 内 で 記 述 した CSS を, HTML ファイルの 中 で 使 用 しま (sample33.html) <link rel="stylesheet" href="sample1.css" <p> 赤 い 文 字 </p> (sample1.css) pcolor:#ff0000 なお, 一 般 に CSS を 別 ファイルに 記 述 する 方 法 が 推 奨 されていまこれは, 複 数 の HTML ファイルから CSS を 参 照 できるようにすること で,HTML 作 成 保 守 運 用 を 簡 単 にするため で 本 資 料 でも,CSS を 別 ファイルに 記 述 す る 方 法 に 的 を 絞 って 説 明 して 行 きま 3.3 Class これまで, 指 定 した 要 素 にのみ 適 用 可 能 なス タイルの 指 定 方 法 について 説 明 してきました. しかしながら CSS では,class(クラス)と 呼 ば れるものを 用 いて 好 きな 名 前 でスタイルを 指 定 することが 出 来 まこれにより, 異 なる 要 素 に 対 して 共 通 のスタイルの 指 定,また, 同 じ 要 素 に 対 して 異 なるスタイルの 指 定 などが 可 能 に なりままず,クラスを 用 いた CSS を 適 用 す る 際 の HTML タグの 記 述 方 法 は 以 下 のようにな りま タグ < 要 素 名 class= クラス 名 > 機 能 要 素 にクラス 名 で 指 定 されたスタイルを 適 用 なお,クラス 名 の 後 にスペースを 空 けてその 他 のクラス 名 を 記 述 することにより,2 つのス タイルを 1 つの 要 素 に 適 用 することが 出 来 ま 次 に,CSS 側 は, 以 下 のような 指 定 方 法 になり ま.クラス 名 ( 任 意 に 決 定 )プロパティ: 値 ; 要 素 名.クラス 名 ( 任 意 に 決 定 )プロパティ: 値 ; ここで, 前 者 は 要 素 を 指 定 していないので, どのような 要 素 にも 適 用 させることが 可 能 で また, 後 者 は, 指 定 された 要 素 の 一 部 にのみ, 適 用 させることが 可 能 となりま 定 義 したクラスを html ファイルに 適 用 する 方 法 は,sample38.html のとおりでただし,<p class= red it >のように 複 数 のクラスを 適 用 する 場 合 は,クラス 名 とクラス 名 の 間 にスペースを 入 れま (sample34.html) <link rel="stylesheet" href="sample2.css" <p class="red"> 赤 い 文 字 </p> <p class="red it"> 赤 いイタリック 文 字 </p> <h1 class="blue"> 青 い 文 字 </h1> <p class="blue"> 青 くない 文 字 </p> (sample2.css).redcolor:#ff0000.itfont-style:italic h1.bluecolor:#0000ff -17-
4 CSS の 例 以 下 に, 代 表 的 な CSS について 説 明 しま なお,これら 以 外 にも 様 々な CSS が 存 在 しま また,それぞれの 値 の 指 定 方 法 についても,こ れ 以 外 のものが 沢 山 在 りまそれらを 勉 強 す る 際 には,http://htmlhelp.com/ja/reference/css/ が 良 い 参 考 ページとして 役 立 つと 思 いま 4.1 CSS の 例 1 タグの 範 囲 の 背 景 色 を 指 定 CSS background-color: 色 機 能 背 景 色 を 指 定 値 数 値 16 進 数 で 色 を 指 定 色 名 色 名 で 色 を 指 定 タグの 範 囲 の 文 字 色 を 指 定 CSS color: 色 機 能 文 字 色 を 指 定 値 数 値 16 進 数 で 色 を 指 定 色 名 色 名 で 色 を 指 定 文 字 の 大 きさを 指 定 CSS font-size: 文 字 の 大 きさ 機 能 文 字 の 大 きさを 指 定 値 %, em, px, pt などで 指 定 備 考 %: 標 準 文 字 サイズを 100%とした 割 合 em: 親 要 素 の 文 字 サイズを 1 em としたと きの 比 px:ピクセル 数 で 指 定 pt:ポイント 数 で 指 定 文 字 の 太 さを 指 定 CSS font-weight: 文 字 の 太 さ 機 能 文 字 の 太 さを 指 定 値 bold, normal 文 字 の 斜 体 を 指 定 CSS font-style: 文 字 の 種 類 機 能 斜 体 とするかしないかを 指 定 値 italic 斜 体 normal 標 準 の 文 体 文 字 のフォントを 指 定 CSS font-family:フォント 名 or 文 字 の 種 類 名 機 能 フォント 名 や 種 類 名 を 指 定 値 文 字 の 種 類 名 serif 文 字 の 先 端 にはねがある. sans-serif 文 字 の 先 端 にはねが 無 い cursive 筆 記 体 monospace 幅 が 全 て 同 じフォント フォント 名 フォント 名 には 様 々なものがありま 皆 さんで 調 べてみてください. 行 間 を 指 定 CSS line-height: 行 間 機 能 複 数 行 にわたるブロックの 行 間 を 指 定 値 %, em, px などの 数 値 文 字 の 表 示 位 置 を 指 定 CSS text-align: 表 示 位 置 機 能 文 字 の 表 示 位 置 を 指 定 値 left 左 揃 え center 中 央 揃 え right 右 揃 え justify 両 端 揃 え( 半 角 のみ) (sample35.html) <link rel="stylesheet" href="sample3.css" <p class="sec"> 章 用 スタイル</p><br> <p class="subsec"> 節 用 スタイル</p><br> <p class="text"> 本 文 用 スタイル 本 文 用 スタイル 本 文 用 スタイル<br> 本 文 用 スタイル 本 文 用 スタイル 本 文 用 スタイル </p> <p>スタイル 適 用 していない 本 文 ( 上 と 行 間 を 比 べてみてください)<br> スタイル 適 用 していない 本 文 ( 上 と 行 間 を 比 べて みてください)</p> <h1 class="center"> 中 央 寄 せ: 文 字 色 赤 : 背 景 黒 (sample3.css).sec font-size:16pt;.subsec font-size:14pt;.text font-size:12pt; font-family:"ms P 明 朝 "; line-height:1.5em; -18-
メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 h1.center text-align:center; 基 本 課 題 11: 自 己 紹 介 ページの 文 字 色 背 景 色 フォント 行 間 などのスタイルを 別 途 CSS ファイルとして 作 成 し,そのスタイルを 自 己 紹 介 の HTML ページに 反 映 させてください. 4.2 CSS の 例 2 省 略 可 文 字 の 周 囲 の 余 白 を 指 定 CSS padding: 間 隔 機 能 文 字 の 大 きさを 指 定 値 数 値 %, em, px, pt などで 指 定 備 考 %: 標 準 文 字 サイズを 100 %とした 割 合 em: 親 要 素 の 文 字 サイズを 1 em としたと きの 比 px:ピクセル 数 で 指 定 pt:ポイント 数 で 指 定 文 字 の 周 囲 にそれぞれ 異 なる 余 白 を 指 定 padding:a b c d 文 字 の 上 (a) 右 (b) 下 (c) 左 (d)の 余 白 を 指 定 padding:a b c 文 字 の 上 (a) 左 右 (b) 下 (c)の 余 白 を 指 定 padding:a b 文 字 の 上 下 (a) 左 右 (b)の 余 白 を 指 定 padding:a 文 字 の 上 下 左 右 (a)の 余 白 を 指 定 上 下 左 右 の 特 定 の 部 分 に 余 白 を 指 定 padding-top 文 字 の 上 の 余 白 を 指 定 padding-right 文 字 の 右 の 余 白 を 指 定 padding-bottom 文 字 の 下 の 余 白 を 指 定 padding-left 文 字 の 左 の 余 白 を 指 定 ブロックの 周 囲 の 余 白 を 指 定 CSS margin: 間 隔 機 能 ブロック 枠 の 周 囲 への 余 白 を 指 定 値 数 値 %, em, px, pt などで 指 定 auto 状 況 に 応 じて 自 動 調 整 備 考 %: 標 準 文 字 サイズを 100 %とした 割 合 em: 親 要 素 の 文 字 サイズを 1 em としたと きの 比 px:ピクセル 数 で 指 定 pt:ポイント 数 で 指 定 ブロックとは,テーブルのセルや,h タ グによる 見 出 しのように,ブロック 状 に 囲 まれた 部 分 のことを 便 宜 上 指 していま ブロックの 周 囲 にそれぞれ 異 なる 余 白 を 指 定 margin:a b c d ブロックの 上 (a) 右 (b) 下 (c) 左 (d)の 余 白 を 指 定 margin:a b c ブロックの 上 (a) 左 右 (b) 下 (c) の 余 白 を 指 定 margin:a b ブロックの 上 下 (a) 左 右 (b)の 余 白 を 指 定 margin:a ブロックの 上 下 左 右 (a)の 余 白 を 指 定 上 下 左 右 の 特 定 の 部 分 に 余 白 を 指 定 margin top ブロックの 上 の 余 白 を 指 定 margin right ブロックの 右 の 余 白 を 指 定 margin bottom ブロックの 下 の 余 白 を 指 定 margin left ブロックの 左 の 余 白 を 指 定 (sample36.html) <link rel="stylesheet" href="sample4.css" <p class="sec"> 文 字 余 白 確 認 : 章 用 スタイル</p> <p class="subsec"> 文 字 余 白 確 認 : 節 用 スタイル </p> <p class="sec_b">ブロック 余 白 確 認 : 章 用 スタイ ル</p> <p class="subsec_b">ブロック 余 白 確 認 : 節 用 スタ イル</p> (sample4.css).sec font-size:16pt;.subsec.sec_b padding:7pt; font-size:14pt; padding:7pt 7pt 1pt 24pt; -19-
font-size:16pt; margin:0;.subsec_b font-size:14pt; margin-top:0pt; margin-left:24pt; 4.3 CSS の 例 3 省 略 可 文 字 の 周 囲 に 枠 線 を 表 示 CSS border-style: 種 類 機 能 枠 線 の 種 類 を 指 定 値 solid 枠 を1 本 線 で 表 示 dotted 枠 を 点 線 で 表 示 dashed 枠 を 破 線 で 表 示 double 枠 を 二 重 線 で 表 示 groove 枠 がへこんでいるように 表 示 ridge 枠 が 出 っ 張 っているように 表 示 inset 枠 の 内 側 がへこんでいるように 表 示 outset 枠 の 内 側 が 出 っ 張 っているよう に 表 示 none 枠 無 し.( 初 期 値 ) 上 下 左 右 に, 異 なる 枠 線 を 指 定 border-style:a b c d 上 (a) 右 (b) 下 (c) 左 (d) border-style:a b c 上 (a) 左 右 (b) 下 (c) border-style:a b 上 下 (a) 左 右 (b) border-style:a 上 下 左 右 (a) 枠 線 の 太 さを 指 定 CSS border-width: 太 さ 機 能 枠 線 の 太 さを 指 定 値 px, em 上 下 左 右 に, 異 なる 枠 線 の 太 さを 指 定 border-width:a b c d 上 (a) 右 (b) 下 (c) 左 (d) border- width:a b c 上 (a) 左 右 (b) 下 (c) border- width:a b 上 下 (a) 左 右 (b) border- width:a 上 下 左 右 (a) 枠 線 の 色 を 指 定 CSS border-color: 色 機 能 枠 線 の 太 さを 指 定 値 px, em 上 下 左 右 に, 異 なる 枠 線 の 色 を 指 定 border-color:a b c d 上 (a) 右 (b) 下 (c) 左 (d) border- color:a b c 上 (a) 左 右 (b) 下 (c) border- color:a b 上 下 (a) 左 右 (b) border- color:a 上 下 左 右 (a) 枠 線 の 種 類, 太 さ, 色 を 一 括 指 定 CSS border: 種 類 太 さ 色 機 能 枠 線 の 種 類, 太 さ, 色 を 指 定 値 border-style/border-width/border-color と 同 じ 特 定 の 部 分 に 枠 線 の 種 類, 太 さ, 色 を 指 定 border top 上 border right 右 border bottom 下 border left 左 (sample37.html) <link rel="stylesheet" href="sample5.css" <span class="solid">solid</span> <span class="dotted">dotted</span> <span class="dashed">dashed</span> <span class="double">double</span><br><br><br> 今 までの CSS を 下 にまとめてみました. <p class="solid2">border-style:solid; border-width:1px; border-color:#666666; padding:5px;<br> background-color:#cccccc; color:#666666; font-family:"arial"; font-size:11pt; line-height:1.5em;</p> (sample5.css).solidborder-style:solid.dottedborder-style:dotted.dashedborder-style:dashed.doubleborder-style:double.solid2 border-style:solid; border-width:1px; border-color:#666666; -20-
メディアプロジェクト 演 習 1 HTML 講 座 発 展 編 2 padding:5px; background-color:#dddddd; color:#666666; font-family:"arial"; font-size:11pt; line-height:1.5em; 発 展 課 題 4: 自 己 紹 介 ページの 見 出 しの 部 分 に 余 白 枠 線 などのスタイルを 別 途 CSS ファイル として 作 成 し,そのスタイルを 自 己 紹 介 の HTML ページに 反 映 させてください. 5 Web アクセシビリティ WWWにおいては, 世 界 中 の 人 々が 分 け 隔 て なく 世 界 中 の 情 報 資 源 にアクセスできるように しようという 理 念 がありまこの 事 を,アク セシビリティを 呼 んでいまアクセシビリテ ィの 向 上 のために,Webの 表 現 方 法 を 直 接 左 右 するHTMLの 規 格 について,いろんな 改 良, 変 更 が 加 えられてきました.HTMLの 要 素 の 中 に は,アクセシビリティについての 考 慮 の 足 りな いかった 要 素 も 含 まれており, 現 在,そのよう な 要 素 については 非 推 奨 という 指 定 がされてい ま 5.1 非 推 奨 な 要 素 や 属 性 HTMLの 仕 様 の 中 には, 色 の 指 定 や, 文 字 の 装 飾 やサイズの 指 定,テキストや 画 像 の 配 置 な ど, 見 た 目 の 構 造 を 制 御 する 要 素 や 属 性 がかな りありまWWWでは, 楽 しいページや 目 立 つページ, 見 やすいページを 目 指 して,そうい った 様 々な 物 理 的 な 構 造 の 工 夫 をしていま しかし, 実 は,そのような 物 理 的 な 構 造 を 表 現 する 要 素 や 属 性 は, 現 在 のHTMLの 規 格 にお いては,ほとんどのものが 非 推 奨 となって いるのでただ, 非 推 奨 だからと 言 って, 見 た 目 の 工 夫 を 否 定 してしまったら,そのページ の 目 的 によっては 意 味 のないものとなったり, 楽 しくないものとなってしまう 可 能 性 もありま これは, 物 理 的 な 構 造 を 否 定 するのではなく, 言 語 仕 様 の 上 で,HTMLは 論 理 的 な 構 造 を 表 現 する 役 割 に 専 念 し, 物 理 的 な 構 造 については 別 の 言 語 仕 様 で 面 倒 をみるという, 役 割 分 担 を 目 指 した 結 果 だと 考 えられまそこで, 物 理 的 な 構 造 を 表 現 するために, 本 資 料 で 勉 強 した CSS (Cascading Style Sheets) という 言 語 仕 様 が 提 案 され, 実 際 に 使 われていま ただ, 現 実 的 にはまだまだ 見 た 目 を 表 現 する ための 要 素 や 属 性 は 多 く 使 われており, TransitionalなDTDを 用 いる 限 り, 禁 止 されてい るわけではありません. 扱 いが 容 易 なので, 本 講 座 でも,フォントの 指 定 や 色 の 指 定 などの 見 た 目 の 表 現 についてのHTML 要 素 や 属 性 につい ても 学 びました. 5.2 Webアクセシビリティ Webのアクセシビリティを 押 し 進 めている 活 動 として,Web Accessibility Initiative (WAI) が 挙 げられまWebアクセシビリティについての ガイドラインの 日 本 語 訳 がありますので,その ページのURLを 載 せておきま http://waic.jp/docs/wcag20/overview.html さて,なぜHTMLの 仕 様 の 中 から 物 理 的 な 構 造 についての 要 素 や 属 性 を 分 離 しなければなら なかったかと 言 うと,これはアクセシビリティ の 問 題 があったからで 例 えば, 読 み 上 げソ フトを 使 ってWWWを 閲 覧 している 目 の 不 自 由 な 人 たちもいま 文 字 の 大 きさや 文 字 の 色 を 直 接 指 定 してあっても,そのような 人 にとって は,その 事 自 体 にはあまり 意 味 がありません. しかし, 文 字 の 大 きさを 直 接 指 定 するのでは なく,h1 要 素 のように, 見 出 し であるとい う 論 理 的 な 構 造 を,HTML 要 素 として 指 定 して おけば, 読 み 上 げソフトはそれに 則 してその 部 分 が 見 出 しであると 言 う 事 を 閲 覧 者 に 伝 える 事 ができるでしょう.そのような 意 味 で,HTML においては 論 理 的 な 構 造 を 表 現 する 方 法 を 確 立 させておき, 物 理 的 な 構 造 の 表 現 については 別 の 手 段 を 用 意 するという 役 割 分 担 の 考 え 方 が, アクセシビリティの 向 上 にとってとても 有 効 で あると 言 えま 参 考 文 献 [1] HTMLとスタイルシートによる 最 新 Webサイ ト 作 成 術 ホームページでなにを 伝 える?どう 作 る?,エクスナレッジ, 2002. -21-