1月の授業日記

12/16　スタイルシート

CSS(スタイルシート)とは

• HTMLでは定義した構造に見合った見栄えをブラウザが解釈し表示させていたが自由度が低い
• 構造と表示を分離し、表示方法を独自に定義させるために追加された言語がスタイルシート

CSSの基本書式

プロパティ：値

複数のプロパティを指定する場合

プロパティ：値；プロパティ：値；

CSSを記述する場所

1.タグの中に直接記述する（インラインスタイルシート）

＜タグ style="プロパティ：値"＞

2.タグから独立して指定する場合(埋め込みスタイルシート)

• タグ内だと同じ指定でもタグごとに何度も記述する必要がある
• タグから切り離し、ヘッダ等に記述すればページ内を一括指定できる
• その場合何に対しての指定かが判るよう対象をセレクタで表す

セレクタ｛プロパティ：値｝

セレクタを使用する際の記述場所

• 指定対象が登場する前でなければいけないので＜head＞内に
• 何らかのタグの中に入れる必要があるので＜style＞タグで括る
• ＜style＞タグを解釈できないブラウザ用にコメントタグで括る

background-color:

1/20　CSS2外部スタイルシート

CSSによる背景画像

background-image:url(背景画像へのパス)

背景画像のリピート方法の指定

background-repeat:no-repeat,repeat-x,repeat-y

3.外部スタイルシート

• ページ内だと複数ページで同じ指定でもページごとに何度も記述する必要がある
• ページから切り離し、専用ファイルに記述すればサイト内の複数ページを一括指定できる
• リンクしたいHTMLからはリンクタグでリンクを張る

外部CSSファイル

• htmlから独立してCSSだけを記述する専用ファイル＝拡張子.css
• htmlでないのでタグは必要なく直接CSSを記述できる

html側からのリンク方法

＜link href="CSSファイルへのパス" rel="stylesheet" type="text/css"＞

1/27　CSS3クラス/IDセレクタ

CSSによる罫線

border:形状 色 太さ

class/IDセレクタ

タグのclass/ID属性

＜タグ class="クラス名"＞（何度か出現する場合）

＜タグ ID="ID名"＞（一度きりしか出現しない場合）

class/IDセレクタの指定方法

(タグ).class名{プロパティ:値;}

(タグ)#ID名{プロパティ:値;}

表示効果のないタグ

＜div＞〜＜/div＞

＜span＞〜＜/span＞