1月の授業日記
＞home
＞12月
＞11月
＞10月
12/15 スタイルシート
CSS(スタイルシート)とは
- htmlは構造を定義し、解釈をブラウザに任せつつ属性等で指定していた
- 構造と表示を分離し、表示方法を独自に定義させるため追加された言語がCSS
CSSの基本書式
プロパティ：値
様々な表示に関する設定（プロパティ）を指定できる
複数のプロパティを指定する場合
ひとつの指定の終わりにセミコロン；を入れる
プロパティ：値；プロパティ:値
CSSの記述場所
CSSはHTMLと記述法が違うのでうまくHTML内に取り込む工夫が必要
style属性の属性地として指定することでそのタグ内をスタイル指定できる
＜タグ style="プロパティ：値"＞
対象はタグ内のみ
- タグ内だと同じ指定でも再出するごとに指定する必要があり属性と変わらない
- タグより前のheadに何に対する指定か（セレクタ）を示して指定すればページ内一括で指定できる
セレクタ{プロパティ：値}
セレクタをタグにするとタグの見栄えを自分で定義できる
セレクタを使用する際の記述場所
- 対象が出現する前＝＜head＞内
- なんらかのタグで括る必要＝＜style＞内
主なプロパティ
color:文字色
前景色の指定
font-size:サイズ
文字のサイズを自由に指定
text-align:(left)/center/right
水平揃え
background-color:背景色
body以外の様々な要素にも背景色がつけられる
きょうのひとこと
ページの色の設定やサイズ設定をした
1/12 外部スタイルシート
CSSによる背景画像
背景色と同じように各要素に背景画像が敷け、リピート方法も様々にコントロールできる
background-image:url(背景画像へのパス)
背景画像のリピート指定
background-repeat-x,repeat-y,no-repeat
横一列、縦一列、繰り返さないが指定可能
外部スタイルシート
- ページ内だと同じ指定でもページ毎に指定が必要
- ページから切り離し、専用ファイルに記述することでサイト内の複数ページを一括指定できる
- 外部CSSファイルの拡張子は、CSS
- リンクしたいhtmlからはリンクタグでリンクを張る
リンクタグ
＜link href="cssファイルへのパス" rel="stylesheet"＞
CSSによる罫線
borber:プロパティで様々な箇所に様々なデザインで罫線をつけられる
border:形状 太さ 色
一つのプロパティに複数の値をつける場合、それぞれを半角スペースで区切る(順不同)
きょうのひとこと
一度に複数のページを一括指定できるようになった
1/19 クラス/IDセレクタ
CSSの定義場所
- インライン(タグ内に記述＝適応範囲タグ内)
- 埋め込み(ページのヘッダ内に記述＝適応範囲ページ内)
- 外部CSS(外部ファイルに記述、リンクする＝適応範囲リンクされたファイル)
タグのクラス/ID属性
タグに固有の名前を付けて他と識別できる
＜タグ class="class名"＞(何度か出現する場合)
＜タグ id="id名"＞(一度きりしか出現しない場合)
クラス/IDをセレクタにする
つけた名前をセレクタにして異なる指定が行える
.クラス名｛プロパティ：値｝
#ID名｛プロパティ：値｝
div/spanタグ
任意のエリアを定義するために使われる特定の意味や表示効果を持たないタグ
＜div＞〜＜/div＞
改行のみ入る＝ブロック単位の指定に用いる
＜span＞〜＜/span＞
改行も入らない＝段落内の一部の指定に用いる
ボックスモデル
padding:値
ボックスの内側の余白
margin:値
ボックスの外側の余白
width:値
ボックスの横幅
疑似クラス
a等の状態に対してクラス指定が出来る
a:疑似クラスセレクタ(link/visited/hover){プロパティ:値}
復習
きょうのひとこと
来週のテストをがんばる