１月の授業日記
12/16 CSS・スタイルシート
スタイルシートとは
- HTMLへは、定義した構造に見合った見栄えをブラウザが解釈していたが自由度が低い
- 構造と表示を分離し、表示方法を独自に定義させるために追加された言語がスタイルシート
CSSの基本書式
プロパティ：値
さまざまな表示に関する設定（プロパティ）を指定できる
CSSを記述する場所
CSSはHTMLとは記述方法が違うのでうまくHTMLの中に取り込む必要がある
style属性の属性値として記述することでそのタグ内をスタイル指定できる
＜タグ style="プロパティ：値"＞
対象はタグ内のみ
- タグ内に同じ指定でもタグごとに何度も記述する必要がある
- タグから切り離し、ヘッダ等に記述すればページ内を一括指定できる
セレクタ
タグから切り離す場合、難に対しての指定かが判るように対象をセレクタであらわす
セレクタ{プロパティ：値；}
セレクタをタグにするとタグの見栄えを自分で指定できる
タグから切り離す際の記述場所
- 指定対象が登場する前でなければいけないので＜head＞内に
- 何らかのタグ中に入れる必要があるので＜style＞タグで括る
- ＜style＞タグを解釈できないブラウザ用にコメントタグで括る
background-color:
body以外の様々な要素にも背景色が付けられる
きょうのひとこと
よくわからなくなってきた
1/20 CSS2外部スタイルシート
CSSによる背景画像
CSSによる背景画像は様々な場所に指定でき、さらに複雑な指定も行える
background-image:url（背景画像へのパス）
下記の方法で背景画像のリピートも指定できる
背景画像のリピート方法の指定
background-repeat,repeat-x,repeat-X,repeat-y
繰り返さない、横一列、縦一列が可能
- ページ数だと複数ページで同じ指定でもページごとに何度も記述する必要がある
- タグから切り離し、専用ファイルに記述すればサイト内の複数ページを一括指定できる
- HTMLからはlinkタグでリンクを張る
- HTMLから独立してCSSだけを記述する専用ファイル=拡張子.css
- HTMLでないのでタグは必要なく直接CSSを記述できる
html側からのリンク方法
ヘッダ内にlinkタグでCSSファイルへのパスを記述する
＜link href="CSSファイルへのパス" rel="stylesheet" type="text/css"＞
きょうのひとこと
いっぱいいっぱい
1/27 CSS3 クラスIDセレクタ
CSSによる罫線
borderはプロパティで様々な個所に様々な様式で罫線を付けられる
border:形状 色 太さ
一つのプロパティに複数の値を付ける場合、それぞれを半角スペースで区切る
class/IDセレクタ
タグのclass/ID属性
タグに名前を付けて識別できる
＜タグ class="クラス名"＞（何度か出現する場合）
＜タグ class="クラス名"＞（一度きりしか出現しない場合）
class/IDセレクタの指定方法
タグ.class名{プロパティ：値}
タグ#ID名{プロパティ：値}
タグと関係なくスタイル指定を行いたい場合、タグをつけずにclass/ID名のみをセレクタにできる
表示効果のないタグ
div,spanタグを用いればタグの表示効果と切り離して指定できる
＜div＞〜＜/div＞
改行のみ入る＝ブロック単位の指定に用いる
＜span＞〜＜/span＞
改行も入らない＝段落内の一部の指定に用いる
きょうのひとこと
見えないしわからん