| スタイルシートの機能 | 文書のデザイン・書式などを設定する。 | |||||||||||||
| スタイルシートの基本 | セレクタ｛プロパティ：値；プロパティ：値；・・・・；プロパティ：値｝ | |||||||||||||
| セレクタとプロパティ | セレクタは書式を設定する対象のことを指します。 セレクタはHTMLの要素である「タグ」および「クラス」と「ＩＤ」がある。 プロパティ（日本語：属性）は設定する書式の種類を表す。 「文字の大きさ」「文字の色」など様々なプロパティがある。 個々のプロパティに設定する値を「値」の部分で指定する。 | |||||||||||||
| headタグ内で設定する 外部スタイルシートの 読み込みと スタイルシートの記述 ここでは外部スタイル シートのurlをqqq.css とした |
<style type="text/css"> <!-- @import url(qqq.css); セレクタ{プロパティ：値；プロパティ：値；・・・} セレクタ{プロパティ：値；プロパティ：値；・・・} ・・・・ --> </style> 最初に外部スタイルシートを読み込む @import url(qqq.css); を記述する。 セレクタ{プロパティ：値}の記述 ☆同一のタグが複数あり同じスタイルを設定する場合 タグをセレクタに採用 td{font-size:18pt} 記述例 ２ HTMLの雛形作成 img{width:200px;height:150px;float:left} 記述例 １５ コンテンツを作る その３ ☆１ヶ所または複数の箇所に同じスタイルを設定する場合 クラスをセレクタに採用 .fnt1{font-size:22;color:red} 記述例 ８ コンテンツを作る その２ ☆タグに直接スタイルを設定する <tag名 style="プロパティ：値；プロパティ：値；・・・">・・・・</tag名> <div class="fnt2" style="left:210px;top:380px">イカリソウ</div> 記述例 １４b．スタイルシートを・・・ | |||||||||||||
| class クラスの使用 | クラスの設定 .クラス名 { プロパティ ： 値 ；プロパティ ： 値 ；・・・ } ドット（.赤ドットで表示した）に続けてクラス名を書く クラスの適用法 <タグ名 class="クラス名">・・・・</タグ名> クラスの適用例 <span class="red">・・・・</span> spanタグは適当なタグがない場合に適宜に挿入して使える便利なタグである。 スタイルシートのクラスを理解し易いよう学校のクラスと対比する。 スタイルシートのクラス名は８項９項のクラス名で採用したfnt1とした。
| |||||||||||||
| プロパティと指定例 | ||||||||||||||
| プロパティ（属性） | 機 能 | 指 定 例 | ||||||||||||
| background-color | 背景色の設定 | table { background-color ： mintcream } | ||||||||||||
| background-image | 背景画像の設定 | body { background-image ： url(背景画像のurl) } | ||||||||||||
| border | 境界線を引く（詳細は省略） 境界線を消す | <img src="url" style="border:none"> | ||||||||||||
| color | 文字色 | td { color ： blue } | ||||||||||||
| font-size | 文字サイズ設定 | a { font-size ： 10pt } aタグの文字を10ptに設定 .fnt1{font-size ： 12pt} クラスfnt1の文字を12ptに設定 | ||||||||||||
| font-weight | 文字太さ指定 | body { font-weight ： bold } 値の種類が多くある 100から900まで100飛びの数値で9サイズの指定ができる | ||||||||||||
| float | 画像等を左右に寄せて 文章を回り込ませる | <img src="url" style="float:left"> 参考 下記「行の高さと float について」参照のこと | ||||||||||||
| height | ボックスの高さ | style="height:50px" | ||||||||||||
| hover | マウスがある時書式を変える | a：hover { color ： red } 文字が赤くなる | ||||||||||||
| left | 基準位置から右方向距離 | div { left ：100px } | ||||||||||||
| margin | 周囲に余白を設定する | style="magin：値 値 値 値"
| ||||||||||||
| padding | ボックスの内側に余裕を作る | セレクタ { padding ： 5px } 値はpixel単位で設定する | ||||||||||||
| position | 基準位置設定 | div { position ： absolute } style="position：absolute" 値：absoluteで基準位置を画面左上端に設定 | ||||||||||||
| top | 基準位置から下方向距離 | div { top ：100px } | ||||||||||||
| width | ボックスの幅 | style="width:100px;height:50px" | ||||||||||||
| 行の高さと float について | ||||||||||||||
これは１つの行である。 大きな画像などが入ると行は高くなる。文字も画像も下揃えになる。
上のように大きな画像を表示すると大きな空白ができてしまう。 画像脇の空白に文字を回り込ませる方法としてはスタイルシートの float プロパティを使用する方法 および 表を使用し画像と文字を隣のセルに入れる方法がある。 | ||||||||||||||