CSS + HTML として使用（CSS単体では動作しない。）
＊CSS ・・・ Cascading Style Sheets
セレクタ｛プロパティ：値；｝
セレクタ・・・HTMLの要素名など（見た目の情報）
プロパティ・・・設定する項目
値・・・プロパティの値
【CSSの記述場所：３箇所】
１．<head>タグ内部に<style>タグを作成(<!– HTMLのコメントタグの間にCSS記述 –>)
２．タグの中にstyle属性をして記述
３．外部CSSファイルを<link>タグで呼び出して使用
＊<link>内には３つの属性を指定
|
1 |
<link rel="stylesheet" type="text/css" href="相対URL"> |
【セレクタの指定方法】
１．タイプセレクタ ・・・ 例 {・・・・・}
２．クラスセレクタ ・・・ 要素名.クラス名{・・・・・}
３．IDセレクタ ・・・ 要素名#ID名{・・・・・}
４．子孫セレクタ ・・・ 親要素名 子要素名{・・・・・} ＊子要素のみ適応させたい場合
５．複数のセレクタを同時に設定 ・・・ 要素名, 要素名｛・・・｝＊カンマで区切る
６．全称セレクタ（全ての要素に適応） ・・・ *{・・・} ＊要素名を「*」とする
＊要素名（タグ名）は省略、または「＊」として書き換えも可能。
＊タブの入れ子関係の場合、親要素のCSSが子要素にも継承される。
【プロパティ一部紹介】
|
1 |
font-size ・・・ 文字の大きさを指定 |
《値の形式》
単位付き数値 px, cm, em, ex, in, pc,
相対値 %
キーワード 文字の大きさを意味する９種（例： x-small, medium, large）
|
1 |
color ・・・ 文字の色を指定 |
《値の形式》
16進数表記 例: #99FF33(#赤緑青の色味)
10進数表記 例: rgb(153, 255, 51)
％表記 例: rgb(60%, 100%, 20%)
色名 例: red など色の名前で指定
【文字を装飾する：一部紹介】
|
1 2 3 4 5 6 7 8 9 |
font-weight ・・・ 文字の太さを変更 text-decoration ・・・ 文字に線をつける line-height ・・・ 文字を含める行の間隔を指定 letter-spacing ・・・ 文字間隔を指定 text-indent ・・・ 初めの行のみ字下げ（１emは文字１文字分） |
<strike>タグ ・・・ 取消線
<pre>タグ
HTMLのコード上での表示のまま改行など表示（改行タブなくても）
＊HTMLで「<」や「>」はタブとして認識される。画面上に表示したい場合ルール↓
|
1 2 3 |
< ・・・「＜」小なり記号１個分 > ・・・「＞」大なり記号１個分 |
【ブロック要素とインライン要素】
【ブロック要素】
div, dl, form, h1~h6, ol, p, table, ul
多くの子要素にはインライン要素のみ！！例外：div,
連続するブロック要素→縦並び
【インライン要素】
a, b, br, button, img, input, object, script, span
子要素にはインライン要素のみ！！
連続するインライン要素→横並び
囲まれた文字のみに影響
【余白】
|
1 2 3 |
padding ・・・ ブロック内部の余白指定 margin ・・・ ブロック外部の余白指定 |
（＊marginの相殺・・・各ブロックで同じ場所を指定した時、大きな方のmarginの幅に設定される）
《値の指定》
値が１個 ・・・値１＝上下左右
値が２個 ・・・値１＝上下 ／ 値２＝左右
値が３個 ・・・値１＝上 ／ 値２＝左右 ／ 値３＝下
値が４個 ・・・値１＝上 ／ 値２＝右 ／ 値３＝下 ／ 値４＝左
【枠線】
|
1 2 3 |
border: 色 種類 太さ; ・・・ ブロック要素のボーダー指定 例： border: #aaaaaa solid 5px; |
