コンピュータ 基 礎 実 習 ( 上 級 ) 第 13 週 スタイルシートの 基 礎 今 回 の 授 業 は スタイルシート(CSS)の 使 い 方 を 解 説 します 1. CSS の 基 本 1.1. CSS とは CSS は Cascading Style Sheets の 略 で ウェブページの 見 栄 えを 設 定 するための 言 語 です CSS は 最 近 多 くのサイトで 使 用 され 始 めています ワープロソフトなどで 文 書 の 見 栄 え(スタイル)を 指 定 する 技 術 全 般 をスタイルシートといいますが ウェブページの 見 栄 え 設 定 をするためには 一 般 的 にスタイルシート 言 語 の 1 つである CSS が 使 われます CSS は HTML と 組 み 合 わせて 使 用 されます HTML ではページ 内 の 各 要 素 の 意 味 や 構 造 を 定 義 しますが CSS では ページを 装 飾 するための 情 報 を 定 義 します たとえば ウェブページが 画 面 に 表 示 される 際 の 色 サイズ レイアウト といった 表 示 スタイルや プリンタな どで 印 刷 される 際 のスタイル 音 声 で 読 み 上 げられる 際 の 再 生 スタイルなどを 指 定 できます 1.2. なぜ CSS が 必 要 か 現 在 HTML では <font>タグや background 属 性 など 装 飾 のためのタグや 属 性 が 多 く 存 在 しています また 表 (table タグ)でページをレイアウトするなどすれば HTML だけで 見 栄 えを 設 定 することもできます しかしウェブページの 見 栄 えを 設 定 するために HTML を 用 いるのは HTML 本 来 の 目 的 と 異 なる 使 い 方 です HTML は 情 報 構 造 を 定 義 するための 言 語 ですので 見 栄 えの 制 御 のために 本 来 と 違 った 使 い 方 をすると 文 書 の 情 報 構 造 がデタラメになってしまいます コンピュータや 検 索 エンジンに 理 解 しづらい 文 書 構 造 になってしまえば せっか くの 情 報 がうまく 識 別 されず 有 意 義 に 活 用 されません そこで HTML では 文 書 構 造 のみを 定 義 し ページの 見 栄 え(スタイル)については HTML と 別 に 管 理 することが 推 奨 されるようになりました この 見 栄 えの 設 定 に 用 いられるのが CSS なのです HTML の 次 世 代 バージョンである HTML5 では <font>や<center>タグなど いくつかの 見 栄 えに 関 するタグが 廃 止 される 予 定 となっています 1.3. CSS のメリット (1) 文 書 構 造 を 保 ったままページの 見 栄 えを 設 定 できる HTML で 見 栄 えを 設 定 しようとして 文 章 の 内 容 や 意 味 にそぐわない HTML を 使 用 すると 文 章 構 造 が 難 解 になりま す そこで CSS を 使 うと 文 章 構 造 (HTML)への 影 響 を 最 小 限 にしながらページの 見 栄 えを 設 定 できます ページの 構 造 と 見 栄 えを 分 離 することで HTML の 記 述 をスッキリさせられます (2) 作 業 しやすくなる 例 えば HTML で 見 出 し(<h1>)の 色 やサイズを 変 えようとすると <h1>タグが 使 われているすべての 箇 所 を 修 正 す る 必 要 があります CSS を 使 うと このような 見 栄 えの 設 定 を 一 括 管 理 できます また 複 数 ページで CSS を 共 有 できるので サイト 全 体 のデザイン 変 更 などが 容 易 になり 編 集 が 格 段 に 楽 になります (3) SEO 効 果 やアクセシビリティ 向 上 見 栄 えに 関 する 記 述 を CSS にまとめ HTML から 排 除 することで Google 等 の 検 索 エンジンに 正 しく 解 釈 されるウ ェブページとなります また HTML から 余 分 な 記 述 を 省 くことで 検 索 エンジンによるページの 分 析 処 理 などが 軽 量 化 されます これによって SEO 効 果 やアクセシビリティの 向 上 が 期 待 できます SEO とは 検 索 エンジンにとって 良 いページを 作 ることで 貴 方 のサイトを 検 索 されやすくし アクセス 数 をより 多 く 集 めるための 技 術 です 2. CSS の 書 き 方 2.1. 基 本 書 式 [ セレクタ プロパティ 値 ] CSS で 設 定 を 記 述 する 際 は どの 部 分 に 対 して(セレクタ) どのスタイルを(プロパティ) どのように( 値 ) 適 用 するかを 記 述 します 以 下 の 例 では <h1>タグ 範 囲 内 の 文 字 色 を 赤 くする 記 述 を 記 します h1{color:red;} 基 本 的 に セレクタ {プロパティ 名 : 値 ;} のように 記 述 します - 1 -
セレクタ(selector)は 見 栄 え(スタイル)を 適 用 する 対 象 を 指 定 するものです この 例 では<h1>タグが 対 象 になってい ます 異 なるセレクタを 使 うことで 様 々な 対 象 に 見 栄 えを 設 定 できます プロパティ(property)は 適 用 するスタイルの 種 類 のことです また 値 はプロパティに 設 定 する 具 体 的 な 内 容 です こ の 例 では 文 字 色 を 指 定 する color プロパティに 対 して 値 red を 指 定 しています CSS では 様 々なプロパティが 用 意 されており 使 い 分 けることで 様 々な 見 栄 えを 設 定 できます プロパティ: 値 ; 部 分 は { ~ } で 囲 んでください なお{ ~ }の 範 囲 全 体 を 宣 言 ブロック(declaration block) プロパテ ィ: 値 ; の 部 分 をスタイル 宣 言 (declaration)と 呼 びます 2.2. 複 数 のスタイル 宣 言 を 一 度 に 記 述 一 つのセレクタに 対 して 複 数 スタイルを 設 定 する 場 合 は スタイル 宣 言 をセミコロン( ; )で 区 切 って 記 述 します セミコロン( ; )はスタイル 宣 言 を 区 切 るための 記 号 なので 最 後 のスタイル 宣 言 の 後 には 必 要 ありませんが 付 けても 間 違 いではありません p { color:red; background-color:green; } この 例 では<p>タグの 範 囲 内 に 対 して 文 字 色 (color)を 赤 さらに 背 景 色 (background-color)を 緑 に 設 定 しています 2.3. コメントの 記 述 /*から*/で 囲 んだ 範 囲 はコメントとなり CSS の 解 釈 としては 無 視 されます 一 時 的 に CSS を 無 効 にしたり CSS ソ ース 内 にメモを 残 したりする 際 に 便 利 です なお /* /* */ */ のように 二 重 に 使 うことはできません p { color:blue; line-height:1.5; } /* 段 落 の 文 字 色 を 青 くし 行 の 高 さを 1.5 倍 にする */ 2.4. スペースや 改 行 について CSS では 半 角 スペース 改 行 タブ は 結 果 に 影 響 を 与 えません これらを 使 用 して CSS 記 述 を 見 やすく 整 形 して も 問 題 ありません p { } color:red; background-color:green; 上 の 例 は 2.2で 紹 介 した p { color:red; background-color:green; } と 同 じ 意 味 になります 2.5. 大 文 字 と 小 文 字 について HTML では 要 素 名 や 属 性 名 についての 大 文 字 小 文 字 を 区 別 しませんが 拡 張 版 の XHTML では 要 素 名 と 属 性 名 は 小 文 字 で 記 述 する 必 要 があります CSS を 記 述 する 場 合 その CSS が HTML 文 書 に 適 用 されるか XHTML 文 書 に 適 用 されるかによって 大 文 字 小 文 字 が 区 別 されるかどうかが 決 まります よって CSS を 記 述 する 際 は 将 来 的 に XHTML へ 移 行 する 可 能 性 を 考 えて 要 素 名 や 属 性 名 をすべて 小 文 字 で 記 述 したほうがよいでしょう 3. CSS を HTML ファイルで 使 用 する CSS を HTML 文 章 に 適 用 するには 大 きく 分 けて 3 つの 方 法 があります 1 外 部 CSS ファイルを 読 み 込 んで 適 用 する ( <link>タグ ) 2 ファイル 単 位 に 適 用 する ( <style>タグ ) 3 タグに style 属 性 を 追 加 して 局 所 的 に 適 用 する 3.1. 外 部 CSS ファイルを 読 み 込 んで 適 用 する ( <link>タグ ) HTML ファイルと 別 に CSS を 記 入 したファイルを 用 意 して HTML ファイル 内 から 読 み 込 ませる 方 法 です そのためには HTML 文 章 のタグ 内 に 以 下 のような<link>タグを 記 述 し CSS ファイル 名 を 指 定 します HTML ファイルの 内 容 <link rel="stylesheet" type="text/css" href="xxx.css" > - 2 -
<h1> 第 一 章 はじめに</h1> xxx.css ファイル の 内 容 h1 { color:red; } /* h1 見 出 しの 文 字 色 を 赤 にする */ 上 の 例 では HTML ファイル 内 の 全 ての<h1> 見 出 しの 文 字 色 が 赤 色 になります サイト 全 体 に 対 するデザイン 修 正 のしやすさ などを 考 慮 すると この 方 法 で CSS を 設 定 するのがおすすめです 3.2. ファイル 単 位 に 適 用 する ( <style>タグ ) HTML 文 書 のタグ 内 に<style>タグを 追 加 して CSS を 設 定 する 方 法 です この 書 き 方 の 場 合 CSS 設 定 はファイル 内 だけで 有 効 です <style type="text/css"> <!-- h1 { color: red; } --> </style> <h1> 第 二 章 CSS とは</h1> この 例 では ファイル 内 の 全 ての <h1> 見 出 しの 文 字 色 が 赤 色 になります なお CSS 部 分 が HTML のコメント 表 現 <!-- -->でコメント 化 されているのは CSS に 対 応 していない 古 いブラ ウザでこのページを 見 た 時 <style>タグ 内 の 文 字 がそのまま 表 示 されてしまうのを 防 ぐためです ただ 近 年 ほとんどのブラウザは CSS に 対 応 しているので <!--と-->は 省 略 してもおおむね 問 題 ないでしょう 3.3. タグに style 属 性 を 追 加 して 局 所 的 に 適 用 する HTML タグに style 属 性 を 追 加 して HTML 文 章 の 中 に 直 接 CSS を 記 述 する 方 法 です <p style="color:red; line-height:1.5;" >CSS のメリットとは </p> 上 の 例 では 指 定 の<p>タグ 範 囲 のみ 文 字 色 が 赤 行 間 が 1.5 倍 の 高 さになります なお style 属 性 による CSS 設 定 は 局 所 的 にスタイルを 設 定 する 際 などには 便 利 ですが HTML 記 述 が 複 雑 になり がちです 効 率 良 く 見 栄 えを 管 理 するには 3.1のように 外 部 CSS ファイルを 読 み 込 むのが 推 奨 です 4. セレクタの 種 類 セレクタ {プロパティ 名 : 値 ;} セレクタは 見 栄 え(スタイル)を 適 用 する 対 象 を 意 味 します 代 表 的 には 以 下 のような 種 類 があります 名 前 セレクタの 書 式 設 定 対 象 例 要 素 型 セレクタ タグ 名 タグ 名 で 指 定 した 全 要 素 p {color:blue;} クラスセレクタ.クラス 名 クラスを 付 けた 要 素.sample {color:blue;} id セレクタ #id 名 id を 付 けた 要 素 #sample {color:blue;} 複 数 セレクタ セレクタ,セレクタ 複 数 のセレクタ h1, h2 {color:blue;} 子 孫 セレクタ セレクタ セレクタ 下 の 階 層 の 子 孫 要 素 td b {color:blue;} 4.1. 要 素 型 セレクタ 指 定 のタグが 全 て CSS の 適 用 範 囲 になるセレクタです - 3 -
p {color:blue;} の 場 合 ページ 内 の 全 ての 段 落 (<p>)タグの 文 字 色 が 青 色 になります 4.2. クラスセレクタ 特 定 の class 名 が 付 けられたタグが CSS の 適 用 範 囲 になるセレクタです タグに class 属 性 を 追 加 することで class 名 を 付 けられます ( 例 ) <h1 class="hogehoge"> 文 書 内 の 複 数 の 箇 所 や 異 なるタグに 対 して 同 じスタイルを 適 用 できます <link rel="stylesheet" type="text/css" href="mystyle.css"> <h2> 第 三 章 CSS のメリット</h2> <p class="info">css に HTML から 見 栄 えに 関 する 設 定 を 分 離 することで </p> <p>html5 では 文 章 の 構 造 と 見 栄 えを 分 離 することが </p> mystyle.css の 内 容.info {color:blue; } この 例 では class 属 性 が 付 いている<p>タグだけに info クラスの CSS 設 定 ( 文 字 色 : 青 )が 適 用 されます CSS でクラスの 設 定 を 記 述 する 時 は class 名 の 先 頭 にドット[.]を 付 けます HTML 文 章 内 で class 属 性 を 追 加 する 時 は ドット[.]は 不 要 です 4.3. id セレクタ 特 定 の id 名 が 付 けられたタグが CSS の 適 用 範 囲 になるセレクタです タグに id 属 性 を 追 加 することで id 名 を 付 けられます ( 例 ) <table id="hogehoge"... > 1 つの HTML 文 書 内 で 同 じ id 名 を 重 複 して 使 用 することはできません id セレクタを 使 用 すれば 文 書 内 の 特 定 の 一 箇 所 にスタイルを 適 用 することができます <link rel="stylesheet" type="text/css" href="mystyle.css"> <h2 id="titlemenu" > 第 三 章 CSS のメリット</h2> <p>css に HTML から 見 栄 えに 関 する 設 定 を 分 離 することで </p> <p>html5 では 文 章 の 構 造 と 見 栄 えを 分 離 することが </p> mystyle.css の 内 容 #titlemenu {color:blue; background-color:skyblue; } この 例 では id 属 性 が 付 いた<h2>タグだけに titlemenu の CSS 設 定 が 適 用 されます CSS で id の 設 定 を 記 述 する 時 は id 名 の 先 頭 にシャープ[#]を 付 けます HTML 文 章 内 で id 属 性 を 追 加 する 時 は シャープ[#]は 不 要 です 4.4. 複 数 セレクタ セレクタをカンマ[, ]で 区 切 ると 複 数 のセレクタにまとめて 同 じ CSS 設 定 を 適 用 することができます h1, h2 {color:blue;} /* h1 タグと h2 タグの 両 方 で 文 字 色 が 青 になる */ - 4 -
4.5. 子 孫 セレクタ セレクタを 半 角 スペースで 区 切 ると ある 要 素 より 下 の 階 層 にある 子 孫 要 素 を 対 象 にスタイルを 適 用 することがで きます <link rel="stylesheet" type="text/css" href="mystyle.css"> <table> <tr><td><p>1 時 間 目 </p></td><td><p>2 時 間 目 </p></td></tr> </table> mystyle.css の 内 容 td p {margin:10px; } この 例 では<td>タグの 範 囲 内 にある<p>タグのみ 余 白 (margin)が 10 ピクセルに 設 定 されます 5. スタイルシート 設 定 に 便 利 なタグ CSS は 既 存 の HTML タグに 追 加 する 形 で 見 栄 えを 設 定 できます しかし HTML タグが 無 い 場 所 に 見 栄 えを 設 定 したい 場 合 もあります このような 場 合 のために HTML には <div>タグと<span>タグが 用 意 されています 5.1. <div>タグ <div>タグは それ 自 身 には 効 果 がありませんが <div>~</div>で 囲 まれた 四 角 形 の 範 囲 に 対 して CSS を 適 用 させられます <div> 範 囲 の 上 下 には 自 動 的 に 改 行 が 入 ります <div>タグは 単 体 では 意 味 が 無 いので class 属 性 を 追 加 したり style 属 性 を 追 加 したりして 使 用 します HTML 記 述 例 <p>この 文 章 はサンプル 文 章 です <div style="border:dashed 1px red"> 注 意 書 き<br>これは 重 要 な 文 章 です </div> この 文 章 はサンプル 文 章 です </p> 画 面 の 出 力 例 この 文 章 はサンプル 文 章 です 注 意 書 き これは 重 要 な 文 章 です この 文 章 はサンプル 文 章 です 上 の 例 では <div>タグに style 属 性 を 追 加 して 周 囲 に 罫 線 (border)を 引 いています このように 四 角 形 の 範 囲 を 持 つタグのことをブロック 要 素 と 言 います なお 見 出 し(h1~h6) 段 落 (p) リスト(ul,ol) などもブロック 要 素 ですので div と 同 じような 結 果 になります 5.2. <span>タグ <span>タグも それ 自 身 には 効 果 がありませんが <span>~</span>で 囲 まれた 範 囲 に 対 して CSS を 適 用 させられます <div>タグと 異 なるのは 行 内 の 一 部 が CSS 対 象 範 囲 となる 点 です HTML 記 述 例 <p>この 文 章 はサンプル 文 章 です <span style="border:dashed 1px red"> 注 意 書 き これは 重 要 な 文 章 です </span> この 文 章 はサンプル 文 章 です </p> 画 面 の 出 力 例 - 5 -
この 文 章 はサンプル 文 章 です 注 意 書 き これは 重 要 な 文 章 です この 文 章 はサンプル 文 章 です 上 の 例 では <span>タグに style 属 性 を 追 加 し 周 囲 に 罫 線 (border)を 引 いています <div>タグと 異 なり 行 内 の 一 部 に 罫 線 が 引 かれます <span> 範 囲 の 前 後 には 改 行 が 入 りません このような 範 囲 を 持 つタグのことをインライン 要 素 と 言 います なお 太 字 (<b>) リンク(<a>) 画 像 (<img>)などもインライン 要 素 ですので span と 同 じような 結 果 になります このように <div>タグや<span>タグを 追 加 すれば もともと HTML タグが 書 かれていない 範 囲 にも CSS 効 果 を 適 用 できるようになります 6. 様 々なプロパティ CSS の 基 本 的 な 書 式 は 以 下 のとおりでした セレクタ {プロパティ 名 : 値 ;} プロパティ 名 には 様 々なものがありますが そのうちいくつかを 紹 介 します スタイル 名 機 能 使 用 例 詳 細 解 説 color: 色 ; 文 字 の 色 を 変 更 する <p style="color:red;">...</p> <p>の 段 落 内 で 文 字 の 色 を 赤 にする background-color: 色 ; 背 景 色 を 変 更 する <div style="background-color:wheat;">...</div> <div> 範 囲 の 背 景 色 を 小 麦 色 (wheat)にする background: url('ファイル 名 '); 背 景 に 画 像 を 配 置 する <h1 style="background:url('bg.jpg');">...</h1> <h1> 範 囲 の 背 景 に bg.jpg を 背 景 として 表 示 する background-repeat: 設 定 値 ; 設 定 値 = repeat-x repeat-y no-repeat 背 景 画 像 の 繰 り 返 し 方 法 を 指 定 repeat-x 横 方 向 のみ 繰 り 返 し repeat-y 縦 方 向 のみ 繰 り 返 し no-repeat 繰 り 返 さない - 6 - 通 常 背 景 画 像 はタイル 状 に 敷 き 詰 められますが このスタイルを 使 うことで 画 像 の 繰 り 返 し 表 示 を 制 御 できる <body style=" background:url('bg.jpg'); background-repeat:no-repeat; "> ページの 背 景 に bg.jpg を 背 景 として 繰 り 返 さずに 表 示 background-position: 横 縦 ; 背 景 画 像 の 表 示 位 置 を 指 定 background-position: left top; 左 上 に 表 示 background-position: 10px 20px; 左 上 から 10px 下 に 20px background-position: left; left center と 同 じ background-position: top; center top と 同 じ background-position: center; center center と 同 じ background-position: 50% 50%; center center と 同 じ background-position: right 20px; bottom:0px; 右 から 20px 下 から 0px border: 線 種 太 さ 色 ; 枠 線 を 表 示 する <div style="border: solid 1px blue;">...</div> <div> 範 囲 の 周 囲 に 実 線 (solid) 太 さ 1 ピクセル 青 色 の 枠 線 を 引 く width: 幅 ; height: 高 さ; 幅 と 高 さを 指 定 する <div style="width:200px;height:100px;">...</div> <div>の 範 囲 を 幅 200 ピクセル 高 さ 100 ピクセルの 大 きさとする background-color や border を 組 み 合 わせると 指 定 の 大 きさで 色 のついた 長 方 形 を 表 示 できる margin: 余 白 の 長 さ; margin-top: 上 余 白 の 長 さ; margin-bottom: 下 余 白 の 長 さ; margin-left: 左 余 白 の 長 さ; margin-right: 右 余 白 の 長 さ; 要 素 の 周 辺 に 余 白 を 作 る それぞれ 全 周 上 下 左 右 の 余 白 を 設 定 できる <div style="margin-left:2em;">...</div> <div> 範 囲 の 左 側 (left)に 2 文 字 分 (2em)の 余 白 を 作 る 字 下 げが 表 現 できる line-height: 行 間 ; 文 字 の 行 間 を 指 定 する <p style="line-height:1.5em">...</p> <p> 段 落 の 行 間 を 1.5 文 字 分 にする border-collapse: 設 定 値 ; 設 定 値 = collapse; separate; 隣 り 合 ったテーブルセルの 枠 線 の 描 画 方 法 を 指 定 します テーブル 専 用 のスタイル <table border="1" bordercolor="black" style=" border-collapse: collapse; "> <tr><td>1 時 間 目 </td><td>2 時 間 目 </td></tr> collapse 重 なり 合 わせて 表 示 </table> separate 離 して 表 示 collapse を 設 定 すると 罫 線 同 士 が 1 ピクセルの 線 のように 表 示 さ れ HTML の 表 特 有 の 立 体 的 デザインが 無 くなるため 平 面 的 でシンプルなデザインの 表 になります CSS のプロパティにはこの 他 にもたくさんの 種 類 があります 次 回 は CSS の 使 い 方 を 実 例 をまじえて 詳 しく 解 説 します 以 上