情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使 われているのはCSS2 (version 2) W3Cで 推 奨 される 考 え 方 論 理 構 造 :マークアップ 言 語 HTML, XHTML, XMLなど レイアウト( 見 た 目 ):スタイルシート 言 語 CSSなど HTML&CSSの 経 緯 1990 Web 登 場 HTMLはWebページの 論 理 構 造 を 記 述 するもので レイアウトを 記 述 するものではない レイアウトを 記 述 するためのスタイルシート 言 語 は 規 定 されなかった 1993 頃 以 降 ブラウザ 普 及 サイト 製 作 者 は 見 た 目 をよくしたい ブラウザにあわせてレイアウト 記 述 例 ) 文 字 を 大 きくしたいときに<h3>を 使 う ブラウザによって 異 なる 独 自 要 素 も 登 場 例 )<font> HTMLの 混 乱 と 複 雑 化 HTML&CSSの 経 緯 1996 レイアウトを 記 述 する 枠 組 としてCSSが 規 定 (CSS1) 1997 HTML3.2: 折 衷 的 なHTML 暫 定 的 措 置 としてレイアウトに 関 する 独 自 要 素 の 取 り 入 れ 1997 HTML4.0: 論 理 構 造 とレイアウトの 分 離 1998 CSS2 2011 CSS2.1 1999 HTML4.01 2000 XHTML1.0 2001 XHTML1.1 HTML, XHTMLは 将 来 はHTML5へ( 予 定 ) HTML&CSSの 経 緯 現 在 CSSを 使 わないページもある CSSを 使 う 場 合 :HTML4.01 or XHTML1.0 or 1.1 + CSS2が 一 般 的 ブラウザの 対 応 状 況 はまちまち 注 意 :CSS 規 定 以 前 に 開 発 されたブラウ ザはCSSに 対 応 していない 1
CSS 利 用 のメリット 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 しく 伝 達 できる 表 示 の 間 違 いを 減 らせる 維 持 管 理 が 楽 に アクセシビリティ 向 上 例 )HTMLのtable 要 素 を 使 ってレイアウトすると 音 声 読 み 上 げソフトを 利 用 してWebページを 聞 く 視 覚 障 害 者 に 正 しく 情 報 が 伝 わりにくい 検 索 エンジン 対 策 CSS 利 用 のメリット レイアウトに 関 する 記 述 を 外 部 CSSファイ ルにできる サイトの 維 持 管 理 が 楽 に( 後 述 ) ユーザが 自 分 の 好 きなスタイルシートで ページを 見 ることができる 正 しい( 推 奨 される) 考 え 方 CSSのメリットの 例 (1) New という 文 字 列 の 色 を 赤 から 黄 色 に かえたい 場 合 100ページ(100 個 のHTMLファイル)の Webサイト HTMLのみで 記 述 HTMLファイル <font color= red >New</font> red 100 個 のHTMLファイルで redをyellowに 変 更 HTML+CSSで 記 述 HTML <span class= attention >New</span> attention( 名 前 は 自 由 ) というclassを 設 定 100 個 のHTMLファイルは 変 更 不 要 CSS( 別 ファイル).attention color: yellow; 課 題 1. トップページをCSSを 用 いて 作 り 直 す 2. 二 つ 以 上 のブラウザで 確 認 3. W3CHTMLValidatorでHTML 文 法 チェック, W3C CSS ValidatorでCSS 文 法 チェック 4. トップページを 置 き 換 える 1 個 のCSSファイルにおいて attention の 色 を redからyellowに 変 更 2
課 題 の 目 標 論 理 構 造 (HTML)とレイアウト(CSS)を 分 ける HTMLからレイアウトに 関 する 記 述 をなくす W3Cの 文 法 チェックに 合 格 する ( 余 裕 のある 人 ) ディレクトリ 構 成 を 整 理 する 複 数 ページをCSS 化 する 課 題 ( 余 裕 のある 人 ) 5. 画 像 ファイルをimagesディレクトリにま とめる 6. 2ページ ジ 目 以 降 もCSSを 用 いて 作 り 直 す 一 般 的 なディレクトリ 構 成 public_html(ディレクトリ) css(ディレクトリ) index.css( 名 前 は 自 由 ) images(ディレクトリ) index.html 他 のHTMLファイル 本 学 環 境 上 の 注 意 本 学 の 環 境 では Windows 上 でパーミッション の 設 定 ができない - public_htmlの 新 規 作 成 はVine Linuxで 行 う 必 要 がある - Windows 上 で 作 成 したファイルをpublic_html に 移 動 させるだけでは 表 示 できないことが ある( この 場 合 public_html 上 で 保 存 し 直 すか Vine Linux 上 でパーミッションの 設 定 を 変 更 すること) 本 学 環 境 上 の 注 意 - 今 回 の 課 題 は 前 述 の 環 境 に 注 意 すれば Vine LinuxでもWindowsでもどちらでもでき る 課 題 の 手 順 ( 準 備 ) 0. 見 本 の 確 認 http://www.ex.media.osakacu.ac.jp/~harumi/mihon/ 以 下 index.html, profile.html css/index.css images/photo.gif コピーして 使 用 してもよい 3
課 題 の 手 順 1. トップページをCSSを 用 いて 作 り 直 す 1.1 cssという 名 前 のディレクトリをpublic_htmlの 下 に 作 成 1.2 2indexcssという index.cssという 名 前 ( 名 前 は 自 由 )のファイルを cssの 下 に 作 成 見 本 のindex.cssをコピーまたは 保 存 すると 便 利 1.3 index.htmlをtest.htmlという 名 前 で 保 存 (バック アップのため) 1.4 test.htmlからindex.cssを 参 照 <link rel= stylesheet type= text/css href= css/index.css > 課 題 の 手 順 1. トップページをCSSを 用 いて 作 り 直 す 1.5 test.htmlからレイアウトに 関 する 記 述 を 取 り 除 く (HTML) 1.6 6レイアウトをindex.cssに 記 述 する (CSS) 注 )1.5, 1.6 は 上 から 順 番 に 少 しずつ 行 う 注 )CSSで 記 述 しやすいようにデザインを 変 更 してもよい Tips 少 しずつ 簡 単 なところから 上 から 下 へ <h1>の 上 下 の<hr> <h1> <font color= > <span> <body bgcolor= >や<body background= > <body> <center> <div> レイアウト 調 整 に 用 いた<br>,<pre>, <table>などをなくす 課 題 の 手 順 2. Mozilla, Internet Explorerなどで 確 認 3. HTMLとCSSの 文 法 チェック 3.1 W3C HTML Validator 3.2 W3C CSS Validator 課 題 の 手 順 4. トップページを 置 き 換 える test.htmlが 完 成 したらindex.htmlを index.html.bakなどの 名 前 で 保 存 し(バック アップのため) test.htmlをindex.htmlの 名 前 で 保 存 課 題 の 手 順 ( 余 裕 がある 人 ) 5. 画 像 ファイルをimagesディレクトリにま とめる 5.1 public_htmlの 下 にimagesディレクトリを 作 成 5.2 画 像 ファイル(.jpg,.gifなど)をimagesディ レクトリにコピー( 本 来 は 移 動 だがリンクきれ をふせぐため) 5.3 HTMLファイルの 中 の 画 像 へのパスを 変 更 して 保 存 例 )<img src= photo.gif >を<img src= images/photo.gif >に 4
課 題 の 手 順 ( 余 裕 がある 人 ) 6. 2ページ 目 以 降 もCSSを 利 用 して 書 き 直 す 手 順 は1.と 同 じ ブロックレベル 要 素 とインライン 要 素 ブロックレベル 要 素 文 書 や 段 落 を 構 成 する 基 本 要 素 例 ) 見 出 し 要 素 div 要 素 インライン 要 素 特 定 の 部 分 に 何 らかの 役 割 を 持 たせる 要 素 中 にブロック 要 素 を 含 むことができない 例 )アンカー 要 素 span 要 素 idとclass id 要 素 に 固 有 の( 一 つしかない)identifier( 名 前 )をつける class 要 素 にクラス( 分 類 )をつける 見 本 の 基 本 レイアウト (トップページ) photo menu description wrapper header footer 見 本 の 基 本 レイアウト (2ページ 目 ) menu2 wrapper header marginとpadding page footer padding border margin 要 素 の 中 身 5
marginとpaddingの 記 述 方 法 margin: 0; 上 下 左 右 が0 margin: 0 auto; 上 下 が0 左 右 は 中 央 揃 え margin: i 00000 0 0; 上 右 下 左 が0 CSSファイルの 見 方 HTML:ブラウザで ドキュメントのソース を 表 示 CSS:HTMLを 見 てCSSファイルのURLを ブラウザで 入 力 個 別 に 指 定 するときは margin-left, margin-right, margin-top, margin-bottom 例 ) margin-left: 100; Webにおける 絶 対 パスと 相 対 パス 絶 対 パス ファイルのURL 例 )http://www.ex.media.osaka-cu.ac.jp/~ 学 籍 番 号 / 例 )http://www.ex.media.osaka-cu.ac.jp/~ 学 籍 番 号 /index.html http://www.ex.media.osaka-cu.ac.jp/~ 学 籍 番 号 /profile.html 例 )http://www.ex.media.osaka-cu.ac.jp/~ 学 籍 番 号 /css/index.css 例 )http://www.ex.media.osaka-cu.ac.jp/~ 学 籍 番 号 /images/photo.gif Webにおける 絶 対 パスと 相 対 パス 相 対 パス 自 分 の 位 置 から 見 た 相 手 の 位 置 自 分. 自 分 の 上.. (ただし./ は 省 略 可 能 ) 例 )index.htmlからprofile.htmlを 見 る 場 合 :./profile.html / h lまたは profile.html l 例 )index.htmlからindex.cssを 見 る 場 合 :./css/index.css または css/index.css 例 )index.cssからphoto.gifを 見 る 場 合 :../images/photo.gif CSS 利 用 の 問 題 HTMLより 仕 様 が 複 雑 ユーザがスタイルシートを 利 用 しないことがあ る ブラウザによってCSSの 対 応 が 異 なる ブラウ ザのバグもある CSSの 文 法 通 りに 記 述 しても 正 しく 表 示 されないこと がある ブラウザの 対 応 度 合 いの 差 はHTMLのより 大 きい 複 数 のブラウザで 美 しく 正 しく 表 示 させるため には 多 くの 手 間 と 時 間 とノウハウが 必 要 参 考 Webページを 作 ろう http://www.ex.media.osakacu.ac.jp/~nagata/tutorial/ とほほのスタイルシート 入 門 http://www.tohoho-web.com/css/basic.htm 6
参 考 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/ 7