FC2ブログ
05.05
Fri
・応用編


■ 色々なテーブル枠



前回は、カラフルなデザインを作る3を学びました。
今回は、テーブルの枠自体をスタイルシートで変えて遊んでみます。


前回も書きましたが、スタイルシートは「習うより慣れよう!」です。

ということで、じゃんじゃん例題を載せていきますので、
実際に遊んでおぼえてみましょう!



まずは、最もシンプルな形から。

ここに文章や画像をいれます




入力ソースはこちら。
<table width="300" height="50" style="border:1px solid #ff6600;">
<tr><td>ここに文章や画像をいれます</td></tr></table>




border:1px」は、枠の太さを表し、数字を大きくすると枠が太くなります。
いままでと違い、数字に単位(px)がついている点に注目ですね。

#ff6600」は枠自体の色。おなじみのRGBカラー色名で好きな色にできます。

solid」は、線状の枠を指定する値です。



ちなみに「background-color:#ffcc99;」をプラスすると・・・

このように背景をつけることができました。

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:1px solid #ff6600;backgroundcolor:#ffcc99;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







dashed」をつかって枠を点線に。

「border:1px」のとき


ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:1px dashed #339933;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







「border:3px」「background-color:#ccffcc;」のとき

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:3px dashed #339933;background-color:#ccffcc;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







double」をつかって枠を2重に。(「border:2px」以下だと2重になりません)

「border:3px」のとき


ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:3px double #3300ff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







「border:4px」「background-color:#ccccff;」のとき
(外側の枠が太くなりました)

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:4px double #3300ff;background-color:#ccccff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







dotted」をつかって枠をかわいく。

「border:3px」のとき


ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:3px dotted #6600ff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







「border:4px」「background-color:#ccccff;」のとき

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:4px dotted #6600ff;background-color:#ffccff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>




このように色々な枠をつくることができました。

次回は、この枠をつかって、さらに遊んでみます!
関連記事
スポンサーサイト




comment 0 trackback 0
トラックバックURL
http://oyedihawakisi.blog37.fc2.com/tb.php/163-295a2b27
トラックバック
コメント
管理者にだけ表示を許可する
 

 New Favorite blog Entries 最新記事 33サイト掲載中

back-to-top