7月の授業日記

7/3 CSS1

CSS（スタイルシート）とは

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

CSSの基本書式

プロパティ：値

様々な表示に関する設定（プロパティ）を指定できる

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

ひとつのプロパティの終わりにセミコロン；を入れる

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

CSSを記述する方法

CSSはHTMLとは記述方法が違うのでうまくHTMLのなかに取り込む必要がある

1.タグの中に直接記述する

style属性の属性値として記述することでそのタグ内をスタイル指定できる

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

2.独立して指定する場合

タグの中だと同じ指定でも何度も記述する必要がある
同じタグに対して同じ指定をしたい場合など、対象をセレクタとして指定すれば一括して指定できる

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

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

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

7/10 CSS2

スタイルの記述場所

記述場所	指定が適応される範囲
タグ内	指定したタグ
ページ内（ヘッダ）	ページ内すべて
ページの外（リンクを貼る）	リンクが張られているページすべて

外部スタイルシート

外部にスタイルを記述した書類を作りリンクを張ればリンクされているページの指定を一括で変えることができる

外部スタイルシートファイル

HTMLとは独立してスタイルシートだけを記述する専用ファイル＝拡張子.css
HTMLではないのでタグは必要なく直接CSSを記述できる

外部スタイルシートの指定を既存ページに適応させる

ヘッダ内に＜link＞タグでスタイルシートファイルへのパスを記述する

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

クラスセレクタ

タグと関係なくスタイル指定を行いたい場合

.クラス名｛プロパティ：値；｝

タグのなかの一部分だけ別扱い、あるいはタグと関係なくスタイル指定だけ行いたい場合、エリアに識別する名前をつけて指定することができる
名前はタグにclass属性をつけることで英数半角で定義できる
指定したい部分にタグがない場合、class属性で識別するために表示効果のない＜div＞＜span＞タグを用いる
CSS側でクラスにプロパティを指定する場合つけたクラス名の前に.（ドット）をつける

スタイルシートによる背景色の指定

background-color:色

通常のタグやクラスセレクタ等の指定すべてに背景色をつけられる