◆ CSS・お手軽テーブルレシピ ◆
表示の早いシンプルミニテーブル
 |
 |
|
|
▲ ・ ・ ここに文字など ・ ・ ▼ |
|
|
|
|
|
// ＳＴＥＰ１ // テーブルに使うための素材を用意します。 // 四隅に使う画像（上下左右の違いが少なめの物）と、 // ライン用の画像（このページの下にあります）を各１点。 ///////////////////////////////////////////////////////// // ＳＴＥＰ２ // テーブルを作るページのＨＴＭＬソースをエディタで開き、 // <HEAD>から</HEAD>の間に以下の部分を加えます。 // （ソースにすでに書いてある場合は加えなくていいですよ） ///////////////////////////////////////////////////////// <META http-equiv="Content-Style-Type" content="text/css"> <STYLE TYPE="text/css"> // ＳＴＥＰ３ // 続いてスタイルシートの指定をします。 // 例えば以下のようになります。 ///////////////////////////////////////////////////////// <!-- body {background-color:#F8FFFF; font-size:9pt; color:#407088 } table {width:180px; table-layout:fixed } td.palam1 {width:15px; text-align:center } td.palam2 {width:150px; text-align:center } td.palam3 {width:150px; text-align:center; font-size:9pt; line-height:13pt; background-color:#FFFFFF } --> </STYLE> // ＳＴＥＰ４ // テーブルを表示させたい場所（<BODY>から</BODY>の間）に // 以下の様に書きます。（適宜自分用に変更して下さい。） ///////////////////////////////////////////////////////// <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="palam1"><IMG src="hana.gif" width="15" height="15" alt="corner"></td> <td class="palam2"><IMG src="sen.gif" width="150" height="2" alt="line"></td> <td class="palam1"><IMG src="hana.gif" width="15" height="15" alt="corner"></td> </tr> <tr> <td class="palam1"><IMG src="sen.gif" width="2" height="100" alt="line"></td> <td class="palam3">ここに文字など</td> <td class="palam1"><IMG src="sen.gif" width="2" height="100" alt="line"></td> </tr> <tr> <td class="palam1"><IMG src="hana.gif" width="15" height="15" alt="corner"></td> <td class="palam2"><IMG src="sen.gif" width="150" height="2" alt="line"></td> <td class="palam1"><IMG src="hana.gif" width="15" height="15" alt="corner"></td> </tr> </table> // ＳＴＥＰ５ // 中央のセルの中に入れる文字や画像の大きさに合わせて、 // 周囲のライン画像のピクセル数（赤い字の部分）を調整し、 // ぴったりお望みの大きさのテーブルを作ってみて下さいね。 ///////////////////////////////////////////////////////// |
◆ ◆ ◆ 色見本 ◆ ◆ ◆
――――――――――――
↓-ラインに使う画像（少し見づらいかも)-↓
 |
 |
 |
 |
 |
 |
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
カーソルを当てると、色の名前が見える……ハズです。
１色だけ必要なら、普通の画像の様にＤＬして下さい。
もちろん自分専用の好きな色を作って使うのも可です。
まとめてお使いの場合は、左下のフォルダをＤＬして、
解凍すると、色見本にある３２色が全部入っています。
実物は１px×１px 大なので、見失わないようにね^-^;;
←これをクリックするとダウンロードできます。|
隅っこに使う画像は、[icon]のコーナーで探したり、 自分の好みの物を手作りして使って下さい。 ※セルにぴったりの大きさ （あまり大きくない物が吉。） ※上下左右の形に、大きな違いがない物。 ※背景色とのバランスのいい物。 等をチェックして探してみるといいかも。 →→→ここにも、サンプルが少しあります。 |
| [1] | [2] | [3] | [4] | [5] |
| [6] | [7] | [8] | [9] | [10] |
| [11] |
| [season] | [fixed] | [value] | [japanese] | [check] | [border] |
| [line] | [icon] | [ornament] | [Flash] | [apply] | [move] |
| [Site Top] | [Material Top] |