スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互 運 用 性 の 低 い 情 報 となってしまいます Web の 表 現 を 作 者 が 指 定 するには HTML ではなく スタイルシートという 別 の 機 能 をもち います HTML では 意 味 だけを 記 述 し その 意 味 に 対 してスタイルシートで 表 現 を 対 応 づけるという 分 業 を 行 なうのです 意 味 と 表 現 を 分 離 することで HTML の 相 互 運 用 性 が 確 保 されます また 環 境 に 応 じてス タイルシートを 取 り 替 えれば 全 く 同 じ HTML を 用 いつつ それぞれの 特 長 を 生 かした 表 現 が 可 能 になります HTML では スタイルシート 言 語 として CSS(Cascading Style Sheet)を 用 います スタイルシートでデザインを 整 えよう CSS のスタイルは HTML 文 書 の 誰 の 何 を どうする という 情 報 を 宣 言 します た とえば h1 要 素 を 赤 い 文 字 にするには h1 {color: red}という 具 合 です ここで 誰 (h1)の 部 分 を セレクタ 何 (color)を プロパティ どうする(red)をその 値 と 呼 びます スタイルシートとはこの 宣 言 を 必 要 なだけ 列 挙 したもので HTML 文 書 内 に 直 接 記 述 する 方 法 と 外 部 に 用 意 して 参 照 する 方 法 があります HTML 内 に 直 接 記 述 する 場 合 は head 要 素 内 の style 要 素 としてスタイルを 宣 言 します 前 回 の 授 業 では 外 部 スタイルシートの 方 法 を 学 習 しました その 場 合 は link 要 素 を 用 い rel= stylesheet とした 上 で href 属 性 でスタイルファイルを 指 定 します いずれも CSS である ことを 示 すために type= text/css という 属 性 を 加 えておきます 現 在 この 方 法 が 主 流 となって います 略 <meta http-equiv="content-style-type" content="text/css" /> <link href= mystyle.css rel= stylesheet type= text/css > 外 部 スタイルシートの 長 所 : 1. 外 部 スタイルシートを 利 用 することで ヘッダー 部 分 に 記 述 する 情 報 が 少 なくなり サー チエンジン 最 適 化 には 効 果 的 となります 検 索 エンジンでは キーワードの 出 現 位 置 がソ ースの 最 初 の 方 であるほど 重 要 視 されると 言 われているためです ヘッダー 部 分 のデー 1
タが 少 なくなれば 必 然 的 に コンテンツの 出 現 位 置 が 上 位 になるというわけです 2. 外 部 スタイルシートは 複 数 のページで 共 有 することが 可 能 です そのため 外 部 スタイル シートを 利 用 することで 簡 単 に 複 数 ページのデザインを 統 一 することができます 同 じようにデザインされていることで ユーザーはどこが 重 要 な 見 出 しで どこにメニューが あるのかといったことを すぐに 判 断 することができるためです いきなり 大 きくデザインが 変 わってしまうと 他 のサイトにジャンプしたのだろうか? とユ ーザーを 悩 ませることにもなるかも 知 れません もう 一 つのやり 方 としては CSS ルールを 直 接 HTML ファイルの 中 に 埋 め 込 む 方 法 が あります スタイルシートを 入 力 し 始 めるために head タグの 中 に style タグを 入 れます スタイル シートはすべて style タグの 中 に 入 力 していきます 略 <style type="text/css"> CSS ルール タグ 内 に<style>タグを 記 述 し その 中 にスタイルシートを 記 述 する 方 法 です <style>タ グには text/css を 値 に 持 った type 属 性 を 記 述 し <style>タグの 中 身 がスタイルシートであ ることを 示 します 基 本 的 には この 記 述 だけで 十 分 なのですが スタイルシートを 認 識 しな いブラウザの 場 合 スタイルシートの 文 字 をブラウザ 上 に 表 示 してしまうことがあります こ れを 防 ぐために コメントタグ でスタイルシートの 部 分 をさらに 挟 み 込 みます 埋 め 込 み 方 式 は そのページ 独 自 のスタイルを 指 定 したいときによく 利 用 されます 背 景 の 色 を 変 えるには: background-color h1 { background-color: green; } h2 { background-color: lightyellow; } 2
文 字 の 色 を 変 えるには: color: 色 h1 { background-color: lightseagreen; color: white; } h2 { background-color: #20B2AA; color: #E0FFFF; } 見 出 し 文 字 の 大 きさを 変 えるには: font-size: 文 字 の 大 きさ h1 { font-size: 1.5em; } 0.6cm; 24px; 18pt; 150% h2 { font-size: 1.2em; } Q: CSS はどこに 書 けばよいのですか? 以 下 の 三 つの 方 法 があります (1) 外 部 スタイルシート (external style sheet) HTML ファイルとは 別 に CSS ルールを 記 述 したファイルを 作 成 します CSS ルール を 適 用 させるには HTML の 内 に 次 のように 関 連 付 けを 記 述 します <link href= パス 付 きで 指 定 した css ファイル 名 (mystyle.css など) rel= stylesheet type= text/css > (2) エンベデッド スタイルシート (embedded style sheet) HTML の 内 に 次 のように CSS ルールを 理 め 込 みます CSS ルール 3
(3) インライン スタイルシート (inline style sheet) HTML の 要 素 の 開 始 タグの 中 で style 属 性 を 使 って CSS ルールを 指 定 します < 要 素 名 style= css の 宣 言 ></ 要 素 名 > 例 えば <h1> 要 素 を 赤 色 にするには: <h1 style= color: red > 見 出 し1のテキスト</h1> と 記 述 します よく 使 われる CSS ルール: で 区 切 られた 値 は 選 択 できるプロパティ 値 を 表 す 書 体 の 指 定 フォント font-family 書 式 セレクタ{font-family: family-name, generic-family} 例 h1{font-family: MS P 明 朝, serif} generic-family の 指 定 は 指 定 した family-name を 持 つフォントがユーザの 環 境 によって 選 択 できなかった 場 合 に 代 替 フォントに 表 示 するためのものです generic-family には serif, sans-serif, cursive, fantasy, monospace などを 指 定 できます 文 字 サイズ font-size 書 式 セレクタ{font-size: ポイント 数 } 例 h1{font-size: 12pt; } 斜 体 の 有 無 font-style 書 式 セレクタ{font-style: normal italic oblique} 例 h1{font-style: italic; } ( 斜 体 にしたいとき) 太 字 font-weight 書 式 セレクタ{font-weight: normal bold bolder lighter } 例 h1{font-weight: bold} ( 太 字 にしたいとき) 行 間 line-height テキストを 読 みやすくするためのポイントとして 行 間 があります line-height のプロパティ を 使 います 一 般 的 に em や 割 合 (%)を 使 って 指 定 します 書 式 セレクタ{line-height: 1 文 字 のサイズに 対 する 比 率 } 例 div { line-height: 1.5em; } 4
p { line-height: 150% ; } テキストの 周 囲 の 指 定 text-align プロパティを 使 うと <p>タグや<h1>タグなどのブロック 要 素 内 の 行 揃 えを 指 定 することができます また テキストを 表 示 する 幅 は width プロパティで 指 定 します 行 揃 えと 幅 の 指 定 text-align プロパティは ブロック 要 素 内 の 行 揃 えを 指 定 します 値 にはキーワードを 記 述 します 書 式 セレクタ{text-align: left center right justify ( 両 端 揃 え) auto ( 自 動 設 定 ); } 例 p { text-align: center; } p { text-align: left; } width プロパティ Width プロパティは ブロック 要 素 の 横 幅 を 決 めるものです この 幅 は ピクセルなどで 指 定 されます 書 式 セレクタ{width : 数 値 (ピクセルなど) %(ウインドウに 対 する 割 合 ) auto ( 自 動 設 定 ); } 例 p { width: 250px; } p { width: 70% ; } マージン( 枠 線 の 外 側 の 余 白 )の 大 きさを 指 定 する 書 式 セレクタ{margin: 実 数 値 % 値 auto ( 自 動 設 定 ) } margin-top margin-bottom margin-right margin-left 例 div { margin-top: 10px ; margin-left: 200px; } margin 属 性 では 複 数 の 値 を 指 定 することができます 例 : 上 下 と 左 右 の 辺 に 分 けて 指 定 する div { margin: 30px 20px; } 上 辺 と 左 右 と 下 辺 に 分 けて 指 定 する div { margin: 30px 20px 25px ; } 画 像 を 配 置 する テキストの 回 り 込 みを 指 定 するときに float プロパティを 使 います float プロパティと 値 right left の 組 み 合 わせで 画 像 とテキストに 関 する 左 右 の 配 置 指 定 ができ 5
ます 書 式 セレクタ{float: right left ( 画 像 は 左 テキストは 右 に 流 れ 込 む); } 例 img { float: right; } img { float: left; margin-right: 10px; margin-bottom: 10px; } 背 景 画 像 の 表 示 と 並 べ 方 repeat 縦 横 にタイル 状 に 繰 り 返 して 表 示 repeat-x 横 方 向 にのみ 繰 り 返 して 表 示 repeat-y 縦 方 向 にのみ 繰 り 返 して 表 示 no-repeat 繰 り 返 さずに 一 つだけ 表 示 { background-image: url(photo/rose.jpg); background-repeat: no-repeat; } 6