--.--
--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

12.03
Fri
「ul」タグを使ってリストに独自の画像を指定する事ができます。
画像のURLは青い部分

(例)入力ソース
<ul style="list-style:url(http://livedoor.blogimg.jp/lemoncake777/imgs/4/d/4da27597.gif);">
<li>
リスト1</li>
<li>
リスト2</li>
<li>
リスト3</li>
</ul>

(表示結果)
  • リスト1
  • リスト2
  • リスト3

画像とリストの間に余白を入れる方法

<ul style="list-style:url(http://livedoor.blogimg.jp/lemoncake777/imgs/4/d/4da27597.gif);">
<li style="padding-left:30px;">
リスト1</li>
<li style="padding-left:30px;">
リスト2</li>
<li style="padding-left:30px;">
リスト3</li>
</ul>

(表示結果)

  • リスト1
  • リスト2
  • リスト3


スポンサーサイト
comment 0 trackback 0
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" border="0" cellspacing="0" cellpadding="0">
<tr height="20">「A」「B」「A」「B」</tr>
<tr height="20">「B」「A」「B」「A」</tr>
</table>


(「A」部分には、「<td bgcolor="#ccffcc" width="25%"></td>」が入ります)
(「B」部分には、「<td bgcolor="#ffffcc" width="25%"></td>」が入ります)


ここでのポイントは、「td」に「bgcolor=""」をもってきたことです。
これで交互に色を変えることができます。

さらに「td」に「width="~%"」を設定します。
~%」に入れる数字は、100%をヨコのマス目数で割った数です。
(今回は、100/4で、25%)

これで、自動的に均等にマス目が分割されるようになります。



ではここで、前回と同じように外枠で遊んでみましょう。


「table」の属性「border="~"」で外枠を表示させ、「bordercolor="~"」で色をつけます。
(今回は「border="1"」「bordercolor="#009900"」にしています)










ここでさらに、「table」に「bgcolor=""」属性をプラスしてみましょう。
(今回は「bordercolor=""009900"」と同じ色にしてみます)








これを「テーブル2」と名づけます。


ちなみにここで、「cellspacing="~"」の数字を大きくすると・・・








こんな感じにもなります。




次回は前回の「テーブル1」と今回の「テーブル2」を合体させてみます。

comment 0 trackback 0
05.05
Fri
・応用編


■ カラフルなデザインをつくる2

前回からはじまった応用編。
今回は、前回のつづきで外枠で遊んでみます。



ということで、前回の状態から。






文字が入りました。

おお、本当だ!!

キレイでしょ。

うんうん、こりゃいいね。




入力ソースはこのようになっています。

<table width="300" border="1" cellspacing="0" cellpadding="6">
<tr height="20" bgcolor="#ccffcc"><td align="center">
<font size="-1" color="#993300">~</font>;</td></tr>
<tr height="20" bgcolor="#ffffcc"><td align="center">
<font size="-1 color="#993300">~</font></td></tr>
<tr height="20" bgcolor="#ccffcc"><td align="center">
<font size="-1 color="#993300">~</font>;</td></tr>
<tr height="20" bgcolor="#ffffcc"><td align="center">
<font size="-1" color="#993300">~</font></td></tr>
</table>




ではさっそく、外枠で遊んでみます。
まずは、外枠に色をつけてみましょう。
(「table」に「bordercolor=""」属性を追加)






文字が入りました。

おお、本当だ!!

キレイでしょ。

うんうん、こりゃいいね。



ちょっとここで、このデザインを「テーブル1」と名づけます。
(「テーブル1」はこの後の講座でつかいます)



さらに外枠(table)と内枠(trやtd)の間隔を調節してみましょう。
(「table」の属性「cellspacing="~"」に好きな数字をいれます)






文字が入りました。

おお、本当だ!!

キレイでしょ。

うんうん、こりゃいいね。



すると、このように枠に間隔があきました!!




次回はレーシングフラッグのような模様をつくってみましょう。

comment 0 trackback 0
05.05
Fri
・応用編


■ カラフルなデザインをつくる

前回までで、HTMLの基本はおわりです。
今回からは、実際の応用を学んでいきます。



ということで、まずはいままでの復習もかねて、テーブルの応用です。
たとえば、次のようなカラフルなデザインをつくりたいとき。







入力ソースはこのようになっています。
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr height="20" bgcolor="#ccffcc"><td></td></tr>
<tr height="20" bgcolor="#ffffcc"><td></td></tr>
<tr height="20" bgcolor="#ccffcc"><td></td></tr>
<tr height="20" bgcolor="#ffffcc"><td></td></tr>
</table>




「table width="300"」の数字はデザイン全体の長さを表し、数字を変えるとデザイン全体の大きさも変わります。

ではさっそく今回の一番のポイントです!!
それは・・・・・「height="~"」!!!

これを「tr」に設定することで、テーブルのなかに何も文字が入ってなくても、デザインを表示することができます。
仮にこの「height="~"」を設定しないとデザイン自体が表示されなくなるのです。

今回は「20」で設定していますが、好きな数字で設定オッケーです!!




実際に文字をいれるとこんな感じです。






文字が入りました。
おお、本当だ!!
キレイでしょ。
うんうんこりゃいいね。





文字をちょっとカスタマイズするとこんな感じです。
(「<font size="" color="">~</font>」を「<td>~</td>」に入れてカスタマイズ)






文字が入りました。
おお、本当だ!!
キレイでしょ。
うんうんこりゃいいね。





文字を真ん中にもってきます。
(「<td align="center">~</td>」としてみましょう)






文字が入りました。
おお、本当だ!!
キレイでしょ。
うんうんこりゃいいね。





文字と枠(今は見えていませんが)の間隔を調節してみましょう。
(「table」の「cellpadding="~"」に好きな数字をいれます)





文字が入りました。
おお、本当だ!!
キレイでしょ。
うんうんこりゃいいね。





さらに外枠を表示してみましょう。
「table」の「border=""」に好きな数字をいれます。(今回は1を入れました)





文字が入りました。
おお、本当だ!!
キレイでしょ。
うんうんこりゃいいね。





次回はこのつづき。
外枠でいろいろ遊んでみましょう。

comment 0 trackback 0

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

back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。