子どものサイトの作り方を考えるサイト

コピーして作る ホームページ

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

一覧表

とりあえずHTML & スタイルシート

ちゃっちゃとコピー、一覧表(フレーム)

できてるスタイルシート 画像つきセット

数値と単位表  色名と色コード表

フォント(字体)表  ボーダー(線)表

お役に立てましたら、 web拍手 を、よろしくお願いします。

さいて〜げんの解説

はじめに
スタイルシートを使うメリット
ファイルの名前
HTMLファイルの構造
HTMLファイル + スタイルシート

スタイルシートの構造
タグにスタイルを設定する
スタイルに名前をつける
スタイルに名前もつけ、タグも指定する。
スタイルの省略や重複

HTMLファイル 基本形 ***.html
スタイルシート 基本形 ***.css
枠のあるHTMLファイル 基本形 ***.css
よく使うHTMLタグ
文字と同じ扱いのもの(インライン要素)
改行する <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
枠をつける。
枠の設定
単純な枠線を引く
枠線の設定
枠線の種類を変える
枠線の太さを変える
枠線の色を変える
上下左右の枠線を、別々に変える
枠線の外側の余裕
枠線の内側の余裕
ブロックの大きさを決める。

高さ
上下の位置
上下の位置は、高さがあるセルにのみ有効です。