| 1月 |
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | | | | | 1 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | | | | | |
| ＜ | |
|
1/13 CSS1
CSSとは
- htmlは定義した構造に見合った既定の見栄えをブラウザが解釈し表示させていたが自由度が低い
- 表示の部分のみを構造から分離し、独自に定義させるために追加された言語がスタイルシート（CSS）
CSSの基本書式
さまざまな表示に関する設定（プロパティ）を指定できる
HTMLのなかで指定する方法
- タグ内にstyle属性で直接指定
＜タグ style="プロパティ：値"＞
複数のプロパティを指定する場合
ひとつのプロパティの終わりにセミコロン；をいれる
プロパティ：値;プロパティ：値;
HTMLタグの表示効果を自分の好みに応じて再定義することもできる
タグから独立して指定する場合
セレクタ｛プロパティ：値｝
セレクタで対象（タグなど）を指定する
記述場所
＜head＞内で＜style＞〜＜/style＞で括ったなか
きょうのひとこと
来週で授業は終了です。試験がんばってください！
1/20 CSS2
スタイルシートの基本書式
プロパティ：値；
- タグに関係なく見栄えの設定（プロパティ）を変えられる
- プロパティと値の間はコロン（：）命令の区切りはセミコロン（；）
- HTMLと違う書式なので溶け込ませる方法が3通りある
1.タグの中にstyle属性の属性値として入れる
＜タグ style="プロパティ：値"＞
2.＜head＞に記述する
- ＜head＞に記述すればページ内すべてを一括で指定できる
- ＜style＞タグで括る
- 何に対しての指定かを示すセレクタが必要になる
＜head＞
＜style＞
セレクタ｛
プロパティ：値；
｝
＜/style＞
＜/head＞
- スタイルシートをHTMLとは独立したファイルで作りリンクを貼る
- 外部スタイルシートを修正すればリンクされているページすべてを一括変更できる
外部スタイルシートファイル
- 拡張子.cssで作成するテキストファイル
- htmlではないので紛れ込ませるタグは必要なく直接CSSで記述できる
外部スタイルシートへのリンクの設定
リンクの記述は＜head＞内の＜link＞タグで記述
＜link rel="stylesheet" type="text/css" href="スタイルシートへのパス"＞
クラスセレクタ
タグと関係なくスタイル指定を入れる場合
（タグ）.クラス名｛プロパティ：値；｝
- タグの中の一部分だけ別扱い、あるいはタグと関係なくスタイル指定だけ行いたい場合、
エリアに識別する名前をつけて指定することができる
- 名前はclass属性で英数半角で自由に定義できる
- 指定したい部分にタグがない場合class属性をつけるために表示効果のない＜div＞タグ＜span＞タグを用いる
- CSSでクラスを指定する際には暮らす姪の前に.（ドット）をつける
表示効果のないタグ
文章の意味合いと関係なく文章の一部をタグ付けし区切ったりするには、意味合い・表示効果のない以下の二つのタグを用いる
ブロックなど改行を伴う部分を指定する
＜div class="クラス名"＞〜＜/div＞
行内の一部分など改行しない場合
＜span class="クラス名"＞〜＜/span＞
きょうのひとこと
|