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