CSSの構造（HTML ファイルとは別に記述する場合）
CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行う。
<link href=”CSS ファイルのパス名” rel=”stylesheet” type=”text/css”>
| @charaset”utf-8″; 文字コード宣言(UTF-8の場合) セレクタ{ セレクタ：スタイル対象を指定 プロパティ : 値; プロパティ：スタイル種別を指定 } 値：スタイル値を指定 /*コメント*/ コメント p{ 対象をタグ名で指定 color: red; } .class-1 { 対象をクラス名で指定 padding: 10px; } #id-1 { 対象をID名で指定 margin: 20px; } |
CSS の構造（HTML ファイル内に記述する場合）
HTML ファイル内に CSS を記述する時は、HTML ファイルの head タグ内（</head>の直前が良い）に以下の記述を行う。
| <style> CSSの開始 セレクタ{ セレクタ：スタイル対象を指定 プロパティ : 値; プロパティ：スタイル種別を指定 } 値：スタイル値を指定 /*コメント*/ コメント p{ 対象をタグ名で指定 color: red; } .class-1 { 対象をクラス名で指定 padding: 10px; } #id-1 { 対象をID名で指定 margin: 20px; } </style> CSSの終了 |
CSSの構造（HTML タグにインラインで記述する場合）
HTML タグにインラインで記述する時は、スタイル（style）属性を使用して以下の記述を行う。
| <div style=”プロパティ: 値;”> <div style=”width: 600px; height: 400px;”> <h1 style=”font-size: 20px;”>大見出し</h> <p style=”color: #00F;”> 文章・・・・・・・・・・<br> 文章・・・・・・・・・・<br> <span style=”color: #00F;”>キーボード</span> 文章・・・・・・・・・・<br> </p> </div> |
マークアップ練習の感想
いままではhtmlの基礎的な文法は事前知識としてあったので復習を兼ねて講義を聞いていたが、cssはほぼノータッチだったためhtmlとどう関連付けることでwebページに仕上げていくかいまいちわかりませんでした。
しかし今日初めてマークアップの練習をしたところ、実際にindex.htmlとstyleシートを照らし合わせてようやくhtmlとcssの関連の付け方が少し理解できた気がしました。お手本の完成形と見比べて違うところはどこを直せばいいのか、間違い探しをしながら自分の手でマークアップをしていくのが楽しかったので、もっと理解を深めたいと思いました。
