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