139674 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

ブログ*小鳥ぶらり鹿児島の旅*

4本の線のテイストを変える その1

楽天ブログ&アフィリエイトで使える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-stylesoliddotteddoubledashed
上辺左辺下辺右辺
時計周りに指定します
さらに
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ページに分けることにいたします
続きは次ページ
次ページへ進む 4本の線のテイストをバラバラに変える その2
前ページへ戻る 四辺の1辺だけを表示する
楽天ブログ&アフィリエイトで使えるHTML小技集TOPへ


© Rakuten Group, Inc.
X