FC2ブログ
05.05
Fri
・文字のカスタマイズ


■ 水平線でメリハリを出す



前回は、スクロールに背景・余白を加える方法を学びました。
今回は、水平線を書く方法です。



水平線をうまくつかうと、ページがすっきり区切れてキレイに見えます。






水平線を書くのにつかうタグはこれ!
<hr>


例:

<hr>







このように線が引けました。
では、この線をカスタマイズしてみましょう!


線の立体感をなくす(通常は立体的に見えるようになっています)
<hr noshade>


例:

<hr noshade>








線に色をつける
<hr color="">


例:

<hr color="brown">








さらに線の太さを変える(通常の太さは"2")
<hr size="">


例:

<hr color="brown" size="10">








さらに線の長さを変える
<hr width="">


例:

<hr color="brown" size="10" width="200">








さらに線の位置を変える(属性値は「left」「center」「right」の3つ)
<hr align="">


例:

<hr color="brown" size="10" width="200" align="center">







Home

comment 0 trackback 0
05.05
Fri
・応用編


■ 背景をグラデーションにする

前回は、カラフルなテーブル枠3を学びました。
今回は、背景をヨコにグラデーションして遊んでみます。



今回は「filter: alpha(opacity=100,finishopacity=30,style=1);」をつかいます。





入力ソースはこちら。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td></td></tr></table>




まずは、「opacity=100」の部分。
これは前回もでてきましたが、背景自体の透明度を設定します。
(数字が小さいほど、背景が透明になります)





入力ソース。
opacity=50」のとき。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=50,finishopacity=30,style=1);">
<tr><td></td></tr></table>






つぎに「finishopacity=30」の部分。
グラデーションの度合いを設定します。
(数字が小さいほど、グラデーションの割合が大きくなります)

finishopacity=70」のとき。





入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=70,style=1);">
<tr><td></td></tr></table>




finishopacity=10」のとき。





入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=10,style=1);">
<tr><td></td></tr></table>






つぎに「style=1」の部分。
グラデーションのパターンを設定します。
style=1かstyle=2

style=1」のとき。





入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=1);">
<tr><td></td></tr></table>





style=2」のとき。





入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #ff6666;background-color:#ffcccc;filter:alpha(opacity=100,finishopacity=30,style=2);">
<tr><td></td></tr></table>






「td」にも設定できます。





入力ソース。
<table cellspacing="0" cellpadding="5" width="190" height="80" style="border:1px solid #0066ff;">
<tr><td width="100%" height="30%" style="background-color:#ccffff;filter:alpha(opacity=100,finishopacity=30,style=1);"></td></tr><tr><td width="100%" height="70%"></td></tr></table>




次回は、このグラデーションをタテにしてみます。

comment 0 trackback 0
05.05
Fri
・応用編


■ 色々なテーブル枠3

前回は、テーブルの枠の色を徐々に変えてみました。
今回は、もっと特殊な枠たちです。






groove」をつかって枠に濃い影を。

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




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





ridge」をつかって枠にうすい影を。
ここに文章や画像をいれます




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







inset」をつかって枠を立体的に。

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




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





outset」をつかって枠を立体的に。(「inset」の逆バージョン)
ここに文章や画像をいれます




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







このように、スタイルシートをテーブルに組み合わせることによって、
枠のバリエーションを一気に増やすことができました。

次回は、テーブルの背景を半透明にする方法です。

comment 0 trackback 0
05.05
Fri
・応用編


■ 色々なテーブル枠2

前回は、テーブルの枠自体をスタイルシートで変えて遊んでみました。
今回は、さらにテーブルの枠で遊んでみます。



枠の色を徐々に変える。

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



入力ソースはこちら。

<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px solid #ffff00;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #ff9900;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #ff0000;">
<tr><td>ここに文章や画像をいれます
</td></tr></table></td></tr></table></td></tr></table>





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



↑上のソースの「solid」を「dashed」に。「border:1px」を「border:2px」に。
(「#ccffcc」→「#66cc66」→「#009900」と色も変えています)





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




上のソースの「solid」を「double」に。「border:1px」を「border:3px」に。
(「#ccffff」→「#6699ff」→「#0033ff」と色も変えています)



次回は、色々なテーブル枠、第3段です!

comment 0 trackback 0
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

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

back-to-top