1月の授業日記

1/13 CSS1

CSSとは

• HTMLで定義した構造に見合った見栄えを表示させていたが自由度が低い
• 表示の部分のみを構造から分離し、専門に受け持たせるための言語がスタイルシート

CSSの基本書式

プロパティ：値

直接指定する場合

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

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

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

タグの再定義

独立して指定する場合

セレクタ{プロパティ：値}

記述場所

• ＜head＞内で＜style＞〜＜/style＞で括った中

複数指定の区切り

セレクタ{
プロパティ：値；
プロパティ：値；
}

1/20 CSS2

スタイルシートの基本書式

プロパティ：値；

• タグに関係なく見栄えの設定（プロパティ）を変えられる
• プロパティと値の間はコロン（：）命令の区切りはセミコロン（；）
• HTMLと違う書式なので溶け込ませる方法が３通りある

1.タグの中にstyle属性の属性値として入れる

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

2.＜head＞に記述する

• ＜head＞に記述すればページ内すべてを一括で指定できる
• ＜style＞タグで括る
• 何に対しての指定かを示すセレクタが必要になる

＜head＞
＜style＞
セレクタ{
プロパティ：値；
}
＜/style＞
＜/head＞

3.外部スタイルシート

• スタイルシートをHTMLとは独立したファイルで作りリンクを貼る
• リンクを貼ったページをまとめて一括指定ができる

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

• 拡張子.cssで作成するテキストファイル
• HTMLではないのでタグは必要なく直接CSSで記述できる

外部スタイルシートへのリンクの設定

• リンクの記述は＜head＞内の＜link＞タグで記述

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

クラスセレクタ

.クラス名{プロパティ：値；}

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

表示効果のないタグ

＜div＞〜＜/div＞

＜span＞〜＜/span＞

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

background-image:url(ファイルへのパス)

背景画像の繰り返し方

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