スタイルシートでデザイン (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= firstnamestyle.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: repeat-x; } 6