1月の授業日記

12月

12/15　スタイルシート

CSS(スタイルシート)とは

htmlは構造を定義し、解釈をブラウザに任せつつ属性等で指定していた
構造と表示を分離し、表示方法を独自に定義させるため追加された言語がCSS

CSSの基本書式

プロパティ:値

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

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

ひとつの指定の終わりにセミコロン；を入れる

プロパティ:値；プロパティ:値

CSSの記述場所

CSSはHTMLと記述法が違うのでうまくHTML内に取り込む工夫が必要

1.インラインスタイルシート

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

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

対象はタグ内のみ

2.タグから独立して指定する(埋め込みスタイルシート)

タグ内だと同じ指定でも再出するごとに指定する必要があり属性と変わらない
タグより前のheadに何に対する指定か(セレクタ)を示して指定すればページ内一括で指定できる

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

セレクタをタグにするとタグの見栄えを自分で定義できる

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

対象が出現する前＝＜head＞内
何らかのタグで括る必要＝＜style＞内

主なプロパティ

color:文字色

前景色の指定

font-size:サイズ

文字のサイズを自由に指定

text-align:(left)/center/right

水平揃え

background-color:背景色

body以外の様々な要素にも背景色がつけられる

きょうのひとこと

色などそれぞれ変えたことわかりやすくなった。

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){プロパティ:値}

復習

1	23		4
5	23		8