1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使 われているのはCSS2 (version 2) W3Cで 推 奨 される 考 え 方 W3Cで 推 奨 される 考 え 方 論 理 構 造 :マークアップ 言 語 HTML, XHTML, XMLなど レイアウト( 見 た 目 ):スタイルシート 言 語 CSSなど 1990 Web 登 場 HTMLはWebページの 論 理 構 造 を 記 述 するもので レイアウトを 記 述 するものではない レイアウトを 記 述 するためのスタイルシート 言 語 は 規 定 されなかった 1993 頃 以 降 ブラウザ 普 及 サイト 製 作 者 は 見 た 目 をよくしたい ブラウザにあわせてレイアウト 記 述 例 ) 文 字 を 大 きくしたいときに<h3>を 使 う ブラウザによって 異 なる 独 自 要 素 も 登 場 例 )<font> HTMLの 混 乱 と 複 雑 化 1996 レイアウトを 記 述 する 枠 組 としてCSSが 規 定 (CSS1) 1997 HTML3.2: 折 衷 的 なHTML 暫 定 的 措 置 としてレイアウトに 関 する 独 自 要 素 の 取 り 入 れ 1997 HTML4.0: 論 理 構 造 とレイアウトの 分 離 1998 CSS2 1999 HTML4.01 2000 XHTML1.0 2001 XHTML1.1 現 在 : 依 然 として 混 沌 状 態 CSSを 使 わないページが 多 い CSSを 使 う 場 合 :HTML4.01 or XHTML1.0 or 1.1 + CSS2が 一 般 的 注 意 :CSS 規 定 以 前 に 開 発 されたブラウ ザはCSSに 対 応 していない
2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 しく 伝 達 できる 表 示 の 間 違 いを 減 らせる 維 持 管 理 が 楽 に アクセシビリティ 向 上 例 )HTMLのtable 要 素 を 使 ってレイアウトすると 音 声 読 み 上 げソフトを 利 用 してWebページを 聞 く 視 覚 障 害 者 に 正 しく 情 報 が 伝 わりにくい レイアウトに 関 する 記 述 を 外 部 CSSファイ ルにできる サイトの 維 持 管 理 が 楽 に( 後 述 ) ユーザが 自 分 の 好 きなスタイルシートで ページを 見 ることができる 正 しい( 推 奨 される) 考 え 方 CSSのメリットの 例 (1) CSSのメリットの 例 (1) New という 文 字 列 の 色 を 赤 から 黄 色 に かえたい 場 合 100ページ(100 個 のHTMLファイル)の Webサイト HTMLファイル <font color= red >New</font> 100 個 のHTMLファイルで redをyellowに 変 更 HTML <span class= attention >New</span> attention( 名 前 は 自 由 ) というclassを 設 定 100 個 のHTMLファイルは 変 更 不 要 CSS( 別 ファイル).attention color: yellow; CSSのメリットの 例 (2) CSSのメリットの 例 (2) <h1>の 下 に 下 線 をひきたい 場 合 100ページ(100 個 のHTMLファイル)の Webサイト 1 個 のCSSファイルにおいて attention の 色 を redからyellowに 変 更
3 HTMLファイル <h1> 適 当 な 見 出 し</h1> <hr color= lime size= 5 > 100 個 のファイルHTMLで<hr>の colorとsize 設 定 変 更 注 :HTMLでは <hr>には 本 来 color, size 属 性 はなく ブ ラウザ 独 自 要 素 HTML <h1> 適 当 な 見 出 し</h1> <hr>は 不 要 100 個 のHTMLファイルは 変 更 不 要 CSS( 別 ファイル) h1 border-bottom: solid 5px lime; 1 個 のCSSファイルの<h1>の 設 定 変 更 課 題 課 題 2. Konqueror, Mozilla(Linux), Internet Explorer(Windows)で 確 認 3. Another HTML LintまたはW3C HTML ValidatorでHTML 文 法 チェック, W3C CSS ValidatorでCSS 文 法 チェック 課 題 ( 余 裕 のある 人 ) 課 題 ( 余 裕 のある 人 ) 4. 画 像 ファイルをimagesディレクトリにま とめる 5. 2ページ 目 以 降 もCSSを 用 いて 作 り 直 す 一 般 的 なディレクトリ 構 成 一 般 的 なディレクトリ 構 成 public_html(ディレクトリ) css(ディレクトリ) index.css( 名 前 は 自 由 ) images(ディレクトリ) index.html 他 のHTMLファイル 課 題 の 手 順 ( 準 備 ) 課 題 の 手 順 ( 準 備 ) 0. 見 本 の 確 認 http://www.ex.media.osakacu.ac.jp/~harumi/mihon/ 以 下 index.html, profile.html, hobby.html css/index.css images/photo.gif コピーして 使 用 してもよい
4 1.1 cssという 名 前 のディレクトリをpublic_htmlの 下 に 作 成 1.2 index.cssという 名 前 ( 名 前 は 自 由 )のファイルを cssの 下 に 作 成 1.3 index.htmlをtest.htmlという 名 前 で 保 存 (バック アップのため) 1.4 test.htmlからindex.cssを 参 照 <link rel= stylesheet type= text/css href= css/index.css > 1.4 ボックスのレイアウトを 考 える( 見 本 参 照 ) 1.5 ボックスとその 内 容 の 記 述 をtest.htmlに 行 う(HTML) 1.6 ボックスの 見 た 目 をindex.cssに 記 述 する (CSS) 注 )1.5, 1.6 は 上 から 順 番 に 少 しずつ 行 う 注 )CSSで 記 述 しやすいようにデザインを 変 更 してもよい 1.7 完 成 したらindex.htmlをindex.html.bakと いう 名 前 で 保 存 し(バックアップのため) test.htmlをindex.htmlの 名 前 で 保 存 2. Konqueror, Mozilla, Internet Explorer で 確 認 3. HTMLとCSSの 文 法 チェック 3.1 Another HTML Lint or HTML Validator 3.2 CSS Validator 4. 画 像 ファイルをimagesディレクトリにま とめる 4.1 public_htmlの 下 にimagesディレクトリを 作 成 4.2 画 像 ファイル(.jpg,.gifなど)をimagesディ レクトリに 移 動 4.3 HTMLファイルの 中 の 画 像 へのパスを 変 更 して 保 存 例 )<img src= photo.gif >を<img src= images/photo.gif >に
5 5. 2ページ 目 以 降 もCSSを 利 用 して 書 き 直 す 手 順 は1.と 同 じ 参 考 参 考 Webページを 作 ろう http://www.ex.media.osakacu.ac.jp/~nagata/tutorial/ とほほのスタイルシート 入 門 http://www.tohoho-web.com/css/basic.htm 参 考 参 考 Another HTML Lint http://openlab.ring.gr.jp/k16/htmllint/htmllint. html W3C HTML Validator http://validator.w3.org/ W3C CSS Validator http://jigsaw.w3.org/css-validator/ 見 本 の 基 本 レイアウト (トップページ) photo menu description wrapper header footer 見 本 の 基 本 レイアウト (2ページ 目 ) menu2 wrapper header marginとpadding page footer padding border margin 要 素 の 中 身
6 marginとpaddingの 記 述 方 法 marginとpaddingの 記 述 方 法 margin: 0; 上 下 左 右 が0 margin: 0 auto; 上 下 が0 左 右 は 中 央 揃 え margin: 0 0 0 0; 上 右 下 左 が0 個 別 に 指 定 するときは margin-left, margin-right, margin-top, margin-bottom 例 ) margin-left: 100; CSSファイルの 見 方 CSSファイルの 見 方 HTML:ブラウザで ドキュメントのソース を 表 示 CSS:HTMLを 見 てCSSファイルのURLを ブラウザで 入 力 CSS 利 用 の 問 題 CSS 利 用 の 問 題 HTMLより 仕 様 が 複 雑 CSSに 対 応 していないブラウザもある ユーザがスタイルシートを 利 用 しないこともある ブラウザによってCSS 対 応 状 況 が 異 なり バグ もある CSSの 文 法 通 りに 記 述 しても 正 しく 表 示 されな いことがある ブラウザの 対 応 度 合 いの 差 は HTMLのより 大 きい 複 数 のブラウザで 美 しく 正 しく 表 示 させるため には 多 くの 手 間 と 時 間 とノウハウが 必 要 どうすればいいか 100% 正 しい という 答 えはない 見 た 目 に 全 くこだわらないのであれば CSSを 使 わず HTMLにレイアウトに 関 する 記 述 を 書 かない という 選 択 肢 もある 見 た 目 に 多 少 でもこだわるのであれば ブラウザの 対 応 状 況 を 考 慮 しながら できる 範 囲 でCSSを 用 いたページ 作 成 が 望 ましい