コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀

はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例

スタイルシート (CSS :Cascading Style Sheet)  スタイルシートとは何か？  HTML の見栄えに関する設定がひとまとめになったもの。  文字の大きさ・色・行間・装飾・レイアウトなど。  CSS の利点  複数ページから同じ CSS を参照すると、 ページの見栄えを統一できる。  CSS を入れ替えることでデザインを簡単に変更できる。  ( 例 ) wiki のスキン機能など  HTML からレイアウトに関する設定を分離できる。  HTML がすっきりして文章構造が把握しやすくなる。  ページごとにレイアウトの設定を書かなくてすむ。  HTML では不可能な細かなデザイン調整が出来る。 スタイルシートでページのデザインを行うのが最近の主 流。

CSS でサイトのデザインをする例  CSS を使ってサイトのデザインをさまざまに調整で きる。  別の CSS を使えば、内容は同じで全く異なるデザイ ンにできる。 CSS ファイルを使い分けるだけの簡単な修正で 大幅にデザインが変えられる。

CSS の基本構文  CSS の例 ( 基本要素だけを含む断片的な例 ) p#id { color : #ff3300; } p#id セレクタ セレクタ。スタイルの効果が及ぶ範囲をあらわす。 { ～ } 宣言ブロック。設定を記入する場所。 color:#ff3300; 宣言。 具体的なスタイルの記述。 color プロパティ属性 プロパティ。 ：の左側部分。 属性 ともいう。 #ff3300 値。 ：の右側部分。 ; デリミタ ( 区切り文字 ) 。 宣言の最後は ； で終える。 ；で区切って複数の宣言を列挙できる。 構文自体は比較的シンプルである。 プロパティ プロパティの種類が多く、さまざまなデザイン効果が実現できる。 ネット上の CSS 解説サイトなどが参考になる。 ( 解説サイトの例 ) など

CSS の書き方  CSS の適用方法 ３通り  前のスライドで説明した基本構文は３種類の方法で書け る。 1. HTML タグごとに CSS 設定を記入  タグ単位で細かな調整が可能。その都度微調整を行いたい場合に 便利。 2. HTML ファイルの先頭に CSS 設定を記入  1 ページ内でデザインをそろえる際に便利。 3. 別ファイル (xxxx.css) に CSS 設定を記入  サイト全体のデザインをそろえる際に便利。

CSS の書き方 具体例 1  HTML タグごとに個別に記入  HTML タグのタグ名の後ろに、 style 要素を付け加えて CSS 構文を記入できる  ( 例 ) H3 タグ ( 見出しレベル 3) の場合 これは見出しです ↓ これは見出しです ※この例では、見出し部分の背景色 (background-color) が赤 (red) になる。 H3 タグに限らず、ほとんどのタグに対して設定できる。

CSS の書き方 具体例 1  HTML タグごとに個別に記入 の応用  好きなな範囲に CSS 設定を適用したい場合 2 つの方法で CSS 適用範囲を決められる。 ブロック要素 ブロック要素を使って範囲指定 インライン要素 インライン要素を使って範囲指定 テスト サンプル文章 テスト サンプル文章 テスト サンプル文章 テスト テストサンプル文章テスト

CSS の書き方 具体例 1  ブロック要素の詳細  ~ タグで囲った部分が長方形の範囲となって CSS 設定が適用される。  通常は タグの前後で勝手に改行される。 ブロック要素 ブロック要素を使って範囲指定 長方形部分の背景に画像を表示し たりもできる。 あるプロパティを使えば、長方形 部分の幅、高さ、位置などを細か く指定できる。 テキストボックスを作れるイメー ジ。 ページ全体のレイアウトにも使え る。 ( 上部メニューエリアを作ったり、 画像をページの右端に置いたり、 文章の二段組みをしたりできる。 ) テスト サンプル文章 テスト サンプル文章 テスト

CSS の書き方 具体例 1  インライン要素の詳細  ~ タグで囲った部分 CSS 設定が適用される。  タグと違って前後で勝手に改行されない。 文章中の一部の文字だけに CSS 設 定を適用したい場合に便利。 下線、太字、文字色変更などを設 定する場合に適している。 インライン要素 インライン要素を使って範囲指定 テスト サンプル文章 テスト テストサンプル文章テスト

CSS の書き方 具体例 2  HTML ファイルの先頭に記入  ページの先頭部分 ～ の間に 例のように記入する。 CSS 例 <!-- h1 { color: red; } --> はじめに このページはテストページです。 この例では h1 タグに対して 文字の色 (color) が赤 (red) になるよう 設定している。 HTML ファイルの先頭に CSS を記入すると、こ のページ内のすべての h1 タグに、 color:red; を 設定したことになる。 スタイルシートに対応していないブラウザの ために で CSS 命令がコメントアウト してある。

CSS の書き方 具体例 3  別ファイル (xxxx.css) に設定をまとめて記入  別ファイル たとえば xyz.css を用意して、 CSS をまとめて 記入  HTML ファイルの先頭部分で、 xyz.css ファイルを使うよう 指定 h1 {color:blue;} h2 {color:green;} xyz.css ファイルの内容 h1 タグはすべて文字色 (color) が青 (blue) h2 タグはすべて文字色 (color) が緑 (green) と指定されている。 CSS 構文以外に余計な命令を書く必要は ない。 index.html ファイルの内容 CSS テスト はじめに このページはテストページです。 ～ の範囲内に タグで 使いたい CSS ファイルを指定する。 このページ内の h1 と h2 タグはすべて、 xyz.css に書かれた設定の影響を受ける。

CSS を使う際の注意点  CSS に未対応のブラウザもある  古いブラウザや、携帯のブラウザなどで CSS に対応していない ことがある。  CSS 未対応ブラウザでは、 CSS 設定はすべて無視される。  ブラウザによって動作が違うかもしれない  Internet Explorer や Firefox 、 Google Chrome などさまざまなブ ラウザがありますが、 CSS の結果の画面表示は若干異なること がある。  出来れば各ブラウザで表示結果を確認したい。

CSS の応用  様々なプロパティ が存在する  プロパティを使い分けて様々なデザインを実現しよう。  ( 例 ) h2 タグに対して CSS 設定をする例 h2 { color:red; } 文字色 が 赤色 h2 { background-color:red; } 背景色 が 赤色 h2 { border:solid 1px red; } 枠線が 実線 幅 1 ピクセル 赤色 ブロック 幅が 300 ピクセルのブロック要素を作成  プロパティ数は多すぎて覚え切れない。  まずは CSS 解説サイトや、解説本を参考によく使うプロパ ティから覚えていくと良い。  幾つかのサンプルを例示しますので、各自試してみてく ださい。 次週に続く