1月の授業日記
>home
>12月
12/8 スタイルシート
CSS(スタイルシート)とは
- htmlは構造を定義し、解釈をブラウザに任せつつ属性等で指定していた
- 構造と表示を分離し、表示方法を独自に定義させるため追加された言語がCSS
CSSの基本書式
プロパティ:値
様々な表示に関する設定(プロパティ)を指定できる
複数のプロパティを指定する場合
ひとつのプロパティの終わりにセミコロン;を入れる
プロパティ:値;プロパティ:値;
CSSの記述場所
CSSはHTMLと記述法が違うのでうまくHTML内に取り込む必要がある
style属性の属性値として指定することでそのタグ内をスタイル指定できる
<タグ style="プロパティ:値">
対象はタグ内のみ
- タグ内だと同じ指定指定でも再出する毎に指定する必要あり属性と変わらない
- タグより先のヘッダ等に何に対する指定か(セレクタ)を示して指定すればページ内一括で指定できる
セレクタ{プロパティ:値}
セレクタをタグにするとタグの見栄えを自分で定義できる
セレクタを使用する際の記述場所
- 対象が出現する前=<head>内
- なんらかのタグで括る必要=<style>内
background-color
body以外の様々な要素にも背景色がつけられる
1/12 外部CSS
CSSによる背景画像
背景色と同じように各要素に背景画像が敷け、リピート方法も様々にコントロールできる
background-image:url(背景画像へのパス)
背景画像のリピート指定
background-repeat:background-repeat:no-repeat,repeat-x,repeat-y
繰り返さない、横一列、縦一列が指定可能
外部スタイルシート
- ページ内だと同じ指定でもページ毎に指定が必要
- ページから切り離し、専用ファイルに記述することでサイト内の複数ページを一括指定できる
- リンクしたいhtmlからはリンクタグでリンクを張る
CSSによる罫線
border:プロパティで様々な箇所に様々な形式で罫線をつけられる
border:形状 太さ 色
一つのプロパティに複数の値を付ける場合、それぞれを半角スペースで区切る(順不同)