Departmental Bulletin Paper / 紀 要 論 文 スタイルシートを 用 いたWebページの 運 用 太 田, 諭 之 ; 大 橋, 和 義 ; 後 藤, 克 嘉 ; 水 野, 保 則 技 術 職 員 による 技 術 報 告 集. 2009, 17, p. 24-27. http://hdl.handle.net/10076/10274
スタイルシートを 用 いた Web ページの 運 用 静 岡 大 学 工 学 部 技 術 部 太 田 諭 之, 大 橋 和 義, 後 藤 克 嘉, 水 野 保 則 tsoota@ipc.shizuoka.ac.jp 1.はじめに 静 岡 大 学 工 学 部 技 術 部 のホームページは 2008 年 4 月 にデザインがリニューアルされ 現 在 に 至 ってい る このホームページは 主 に 技 術 部 内 の 各 支 援 室 の 紹 介 業 務 依 頼 カレンダーなどのページから 構 成 されており 学 内 及 び 学 外 からの 利 用 を 考 慮 し 誰 でも 見 易 いデザインとしている デザインのリニ ューアルに 伴 いカスケーディング スタイル シート(CSS)を 用 いている この CSS の 採 用 により 複 数 ページへのデザインの 適 応 が 出 来 るようになり 管 理 が 容 易 となった 技 術 部 のホームページで 採 用 し た CSS について 詳 細 に 報 告 する 2.CSS とは 何 か CSS は Web ページにフォント 色 間 隔 などのスタイルを 付 与 するための 仕 組 みである ページ 毎 にハイパー テキスト ラングエッジ(HTML) 内 だけでデザインを 書 くことも 出 来 るが CSS を 用 い ることによって 複 数 の Web ページにデザインが 適 応 できる HTML が 誕 生 し WWW の 運 用 が 始 まったばかりの 頃 は コンピュータを 利 用 したハイパーテキスト と 呼 ばれる 仕 組 みで 学 術 論 文 を 作 成 することが 目 的 で 見 出 し 本 文 表 といった 内 容 を 明 確 に 表 すこ とができれば 十 分 であった その 後 Mosaic という WWW ブラウザが 登 場 し WWW が 一 般 的 に 広 ま りを 見 せた 頃 から HTML に 見 栄 えのよさやビジュアルな 要 素 が 求 められるようになった 為 CSS が 用 いられるようになった CSS には CSS1 と CSS2 の 2 つの 仕 様 がある CSS1 は 1996 年 12 月 に CSS2 は 1998 年 5 月 に The World Wide Web Consortium(W3C)より 勧 告 された CSS1 では CSS の 基 本 的 な 定 義 がなされた CSS2 は CSS1 に 印 刷 や 音 声 などを 拡 張 した 内 容 が 含 まれている 3. Web ページにおける CSS の 役 割 図 1.Web 文 章 における 3 つのレイヤ Web ページには 三 つのレイヤが 存 在 する 一 つは Behavior レイヤでドキュメントのリアルタイムな ユーザ 対 話 を 伴 う このレイヤは 通 常 JavaScript によって 処 理 されている 二 つ 目 は Presentation レイ 24
ヤで ユーザがドキュメントにアクセスしコンテンツがどのように 表 れるかを 定 義 するものである CSS はこのレイヤに 該 当 する 三 つ 目 は Content レイヤで 常 に 存 在 しており HTML あるいは 構 造 を 定 義 する Extensible Hypertext Markup Language (XHTML)の 中 に 埋 め 込 まれている Content レイヤは イメ ージや 音 声 等 も 入 ることもある Web 文 章 における 三 つのレイヤを 図 1に 示 している 4.CSS の 構 文 のしくみ 図 2. CSS の 構 文 の 一 例 CSS の 構 文 の 一 例 を 図 2に 示 した コメントは /* */ によって 閉 じられ 宣 言 ブロックはセレク タと 宣 言 からなる h2 は 見 出 し 語 を 定 義 するタグと 呼 ばれる タグとは HTML で 文 章 の 体 裁 を 決 定 す るもので 見 出 しを 表 す<h1>,<h2>や 段 落 を 表 す<p> 太 字 を 表 す<B>などがある 文 章 の 体 裁 は 例 え ば<h1>と</h1>の 間 のみ 有 効 となり</h1>によって<h1>の 定 義 が 終 了 する そして ルールセットの 中 身 には color: red などのひとまとまりを 宣 言 と 呼 び それぞれ color はプ ロパティ red は 値 と 呼 ばれる それぞれの 宣 言 は color, red などの 属 性 名 と : から 構 成 されてい る 一 つのセレクタに 対 して 複 数 の 宣 言 を 定 義 することが 出 来 るが 宣 言 と 宣 言 の 間 に ; を 使 って 属 性 を 区 切 らなければならない 5.CSS の 利 点 CSS の 利 点 は ドキュメントの 要 素 の 種 類 ごとに それら 全 体 に 特 定 のルールを 適 応 できることであ る 例 えば 見 出 しのタグである h1 要 素 のテキストを 太 字 でかつ 文 字 色 をグレーで 表 示 したいとする これに 従 来 の HTML を 使 用 とするとしたら すべての h1 要 素 に<font coor="gray"><b>サンプル </B></font>タグを 挿 入 しなければならない h1 要 素 の 文 字 の 色 を 先 ほど 指 定 したグレーで 太 字 の 状 態 か ら 赤 色 で 太 字 を 解 除 したい 場 合 一 つ 一 つの h1 のタグにタグを 付 け 替 えなければならない 又 CSS を 用 いることによって 段 落 ごとの 見 出 し 要 素 に 背 景 色 を 付 けたりと 柔 軟 なレイアウトが background プロパティで 実 現 でき デザインに 関 しては HTML より 柔 軟 性 が 高 い 6. 技 術 部 のホームページと CSS の 運 用 技 術 部 のホームページで 運 用 されている 主 な CSS で 設 定 した 項 目 について 述 べる 主 な 設 定 項 目 は 左 側 のメニュー 項 目 にマウスをあわせると 色 が 変 わるようにした 外 側 のエリアと 内 側 のエリアのコン テンツ 部 分 の 色 のコントラストを 付 けた 図 と 文 章 にマージンを 設 定 し 外 枠 を 設 けるなどしてページの 見 易 さに 配 慮 した 構 成 となっている 技 術 部 のホームページのトップページのファイル index.html の HTML に gijutsubu.css というスタイル シートを 適 応 させたい 場 合 は 下 記 のように index.html に link タグを 挿 入 する <LINK rel= stylesheet href= gijutsubu.css type= text/css > これらのスタイルシートは HTML ドキュメントの 一 部 ではなく 外 部 スタイルシートと 呼 ばれる 25
CSS を 適 応 技 術 部 トップページなどの 複 数 のページの HTML 技 術 部 ホームページの CSS 図 3. 複 数 のページのデザインを 一 つの CSS ファイルで 適 応 できる 左 側 のメニュー 技 術 長 あいさつ 組 織 図 などの 項 目 上 にマウスのポインタが 来 た 場 合 メニュ ー 項 目 の 背 景 色 を 緑 色 にする CSS での 表 記 は p.menu a:hover { background-color:#325323 }である HTML での 表 記 は <p class="menu">メニュー 項 目 </p>である これは クラスセレクタと 呼 ばれ menu という 値 が p という 段 落 のタグに 割 り 当 てられていて </p> までの 間 のメニュー 項 目 に マウスのポインタが 上 に 来 るとメニュー 項 目 の 背 景 色 が 緑 色 となる 命 令 26
hover が 有 効 となっている background-color の 値 #325323 は 十 六 進 数 で 表 記 されていて 緑 色 を 表 してい る Copylight などが 表 示 されている 下 部 の 署 名 文 字 を 小 さくしボールド 体 とした CSS での 表 記 は address{ font-size:0.625em; font-weight:bold; ( 略 ) }である HTML での 表 記 は <address> Copyright </address>である これは <address>タグで 連 絡 先 等 を 示 すために 用 いられるもので</address>までの 間 の 文 字 がフォ ントサイズ 0.625 で 太 字 に 設 定 される 7.おわりに CSS で 簡 単 に Web ページのスタイルを 設 定 することが 出 来 る 設 定 できるプロパティに フォントの 種 類 から 字 の 大 きさ 字 の 色 からインデントや 字 下 げ 字 の 間 隔 画 像 の 配 置 マージンなどがあり 簡 単 な 記 述 で 実 現 できる 特 に Web ページが 複 数 に 及 ぶ 場 合 それらを 共 通 に 定 義 できるため 非 常 に 便 利 である これからの 課 題 は 技 術 部 以 外 のページ 作 成 においても CSS のひな 型 を 作 成 し それをいつでも 用 い られるようにして デザインに 反 映 できるようにしたい 又 ブラウザやそのバージョンによって 若 干 の 表 示 の 違 いや 中 には 使 用 できない 宣 言 もあり それに 左 右 されない CSS の 宣 言 を 用 いたデザインの 作 成 を 目 指 したい 参 考 文 献 1) SitePoint CSS Reference <http://reference.sitepoint.com/css/css> 2) エリック A メイヤ( 株 式 会 社 クイープ 訳 ): CSS 完 全 ガイド, オライリー ジャパン, (2005) 3) 水 津 弘 幸 ほか: HTML+CSS Handbook 2nd Edition, ソフトバンク クリエイティブ 株 式 会 社,(2006) 27