|
|
楽天ブログ&アフィリエイトで使えるHTML小技集
TABLEタグでもっと自由にレイアウト |
●4本の線のテイストをバラバラに変える その1
ここでご紹介するのは長いHTMLを書く方法です
線を変えてテーブルレイアウトを多様にする方法は前回紹介した方法
1.線種と太さをかえる
2.テーブルの四辺の1辺だけを表示する
で実際のところ十分かと思われますので、このページは読み飛ばしてくださっても問題ないと思います
さらに突っ込んでお勉強したいという方はどうぞご利用ください
|
●
四辺それぞれの線種を変える
|
|
<table style="border: 1pt #666666; border-style: solid dotted double dashed;">
<tr><td></td></tr>
</table>
|
|
border-style | : | solid | dotted | double | dashed | ; |
| | 上辺 | 左辺 | 下辺 | 右辺 | |
時計周りに指定します |
|
さらに
border-top-style: solid; で上辺の線種を
border-bottom-style: solid; で下辺の線種を
border-left-style: solid; で左辺の線種を
border-right-style: solid; で右辺の線種を
それぞれ指定できます
|
|
●
四辺それぞれの色を変える
|
|
<table style="border: 1pt solid; border-color: #e6001a #ff8700 #669933 #1a6680;">
<tr><td></td></tr>
</table>
|
|
border-color | : | #e6001a | #ff8700 | #669933 | #1a6680 | ; |
| | 上辺 | 左辺 | 下辺 | 右辺 | |
こちらも時計周りに指定します |
|
さらに
border-top-color: #666666; で上辺の色を
border-bottom-color: #666666; で下辺の色を
border-left-color: #666666; で左辺の色を
border-right-color: #666666; で右辺の色を
それぞれ指定できます
|
|
もうお分かりですね!
これらを組み合わせると4本の線のテイストをバラバラに表示することができるんです
……ページが長くなりますので、2ページに分けることにいたします
続きは次ページへ
|
|
|
|