コピーして作る　HTML+CSS

さいて～げんのスタイルシート

はじめに
スタイルシートを使うメリットファイルの名前 HTMLファイルの構造 HTMLファイル + スタイルシートスタイルシートの構造タグにスタイルを設定するスタイルに名前をつけるスタイルに名前もつけ、タグも指定する。スタイルの省略や重複ＨＴＭＬファイル基本形 *.html スタイルシート基本形 .css 枠のあるＨＴＭＬファイル　基本形 **.css

はじめに

よく使うＨＴＭＬタグ
文字と同じ扱いのもの(インライン要素) 改行する <br> リンクを張る <a href="(リンク先)"> ～ </a> 画像を表示する <img src="画像ファイル"> 汎用 <span>～</span> （↑span で、背景色を指定) 一つのかたまりになるもの(ブロック要素) 見出し <h1>～</h1> … <h6>～</h6> 段落 <p> ～ </p> テーブル <table> <tr> <th>～見出しセル～</th> <td>～セル～</td> </tr></table> 汎用 <div>～</div> (↑ divで、背景色を指定)

よく使うＨＴＭＬタグ

文字と同じ扱いのもの(インライン要素)
改行する <br>
リンクを張る <a href="(リンク先)"> ～ </a>
画像を表示する <img src="画像ファイル">
汎用 <span>～</span>
（↑span で、背景色を指定)

一つのかたまりになるもの(ブロック要素)
見出し <h1>～</h1> … <h6>～</h6>
段落 <p> ～ </p>
テーブル <table> <tr> <th>～見出しセル～</th> <td>～セル～</td> </tr></table>
汎用 <div>～</div>

(↑ divで、背景色を指定)

内容の左右の位置、背景の色、文字の色、文字の字体を設定を、変更する。
内容の左右の位置を変える text-align 背景の色を変える background-color 文字の色を変える color 文字のフォント（字体）を変える font-family

背景を画像にする。
背景画像の設定を追加する background-image 背景を用意する背景の並び方 background-repeat 背景の位置 background-position 背景を固定する background-attachment

枠をつける。
枠の設定単純な枠線を引く枠線の設定枠線の種類を変える枠線の太さを変える枠線の色を変える上下左右の枠線を、別々に変える枠線の外側の余裕枠線の内側の余裕

ブロックの大きさを決める。
幅高さ上下の位置上下の位置は、高さがあるセルにのみ有効です。