| ◆ＴＡＢＬＥの枠を変えてみましょう！◆ | |
|
今日は、ＴＡＢＬＥの枠をスタイルシートで色々変えてみましょう。
以前、スタイルシートでテキストボックスを作りまして、その枠を指定する方法を紹介しました。
【ボックスの中にボックス！枠について】と【テキストボックスの枠を変える】ですが、スタイルシートの属性の指定は、ほぼ同じです。
ＴＡＢＬＥに入れるスタイルシートを書いてみます。
style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:inset;border-width:10px;border-color:deeppink;
ブルーの部分がこの間、ご説明しました、スタイルシートでフォントを指定している属性です。
赤の部分が枠を指定する属性のスタイルシートです。
枠の指定は３つの属性を指定していますが、簡単に説明して置きます。
- border-style:inset; 枠の種類を指定します。insetになっています。
- border-width:10; 枠の幅を指定します。ここでは10px
- border-color:deeppink; 枠の色を指定します。ここではdeeppink
枠の種類と枠の色に関しましては、上下左右を別々に指定できます。
詳しくは【テキストボックスの枠を変える】に行ってみてくださいませ。(￣‥￣)=3 ﾌﾝ
では、日記の雛形として、個々に枠を変えた、ＴＡＢＬＥを紹介してみます。
上の属性の部分をお好きに変えまして、日記のテーブルに使ってみて下さいませ。(￣^￣)b
ＴＡＢＬＥのセルには、背景色を載せていますが、BACKGROUND="" の背景画像を入れるタグも載せておきます。
背景画像を指定したい人は、BACKGROUND=""に背景のＵＲＬを入れて下さい。
ＴＡＢＬＥの幅は、全体の８０％になっています。幅いっぱいに使いたい方は、１００％にして下さい。
◆SOLID◆[枠が実線で表示されます。]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:solid;border-width:1px;border-color:#cc0000;"><TR><TD VALIGN="top" BGCOLOR="mistyrose" BACKGROUND="http://">
ここに本文！
</TD></TR></TABLE>
|
◆DOUBLE◆[二重線で表示]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="black" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:double;border-width:3px;border-color:blue;"><TR><TD VALIGN="top" BGCOLOR="lightcyan" BACKGROUND="http://">
本文！
</TD></TR></TABLE>
|
◆DOTTED◆[点線で表示]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="black" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:dotted;border-width:5px;border-color:deeppink;"><TR><TD VALIGN="top" BGCOLOR="mistyrose" BACKGROUND="http://">
本文！
</TD></TR></TABLE>
|
◆DASHED◆[破線で表示]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="black" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:dashed;border-width:5px;border-color:blue;"><TR><TD VALIGN="top" BGCOLOR="powderblue" BACKGROUND="http://">
ここに本文！
</TD></TR></TABLE>
|
◆INSET◆[枠が内側にへこみます]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="black" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:inset;border-width:10px;border-color:deeppink;"><TR><TD VALIGN="top" BGCOLOR="thistle" BACKGROUND="http://">
ここに本文！
</TD></TR></TABLE>
|
◆OUTSET◆[枠が内側に浮き上がります]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="black" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:outset;border-width:10px;border-color:deeppink;"><TR><TD VALIGN="top" BGCOLOR="pink" BACKGROUND="http://">
ここに本文！
</TD></TR></TABLE>
|
◆GROOVE◆[枠の部分がへこみます]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:groove;border-width:10px;border-color:skyblue;"><TR><TD VALIGN="top" BGCOLOR="lightcyan" BACKGROUND="http://">
ここに本文！
</TD></TR></TABLE>
|
◆RIDGE◆[枠の部分が浮き上がります]
<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH="80%" HEIGHT="150" BGCOLOR="" style="cursor:help;font-size:13px;line-height:1.3em;color:black;font-family: Comic Sans MS;border-style:ridge;border-width:10px;border-color:skyblue;"><TR><TD VALIGN="top" BGCOLOR="lightcyan" BACKGROUND="http://">
ここに本文！
</TD></TR></TABLE>
|
字数制限いっぱいです。すべて納まるかどうか心配でしたが、どうにか足りましたね！(￣^￣)bグッド！
みなさんも背景など変えまして、色々やってみて下さいませ！
タグたくさん書きましたので・・不備がございましたらご連絡くだされば幸いです。(￣‥￣)=3 ﾌﾝ
では！
| |
| Copyright (C) GT-ONE WEBSITE 2002-2004 All Rights Reserved | |
お気に入りの記事を「いいね！」で応援しよう
|
Re:【ＴＡＢＬＥで日記の雛形！】ＴＡＢＬＥの枠を変えてみよう！(07/04)
|
レンゲ・ローズ さん |
こんばんは。(^ｰ^*
4日の日記に使わせていただきましたー。有り難うございました。m(*- -*)m
綺麗な仕上がりになりましたよ～。
(2004/07/05 02:12:41 AM)
|
Re:【ＴＡＢＬＥで日記の雛形！】ＴＡＢＬＥの枠を変えてみよう！(07/04)
|
meiakira さん |
おはようございま～す（*^_^*）
先日お借りしたタグで今日の日記アップしました。
どうもありがとうございましたm(__)m
(2004/07/05 09:56:19 AM)
|
Re:【ＴＡＢＬＥで日記の雛形！】ＴＡＢＬＥの枠を変えてみよう！(07/04)
|
八十艮7633 さん |
こんにちは。
いつも、お世話になっています。
叉、戴いて参りますにで、宜しくお願いいたします。
(2004/07/05 01:16:51 PM)
|
Re:【ＴＡＢＬＥで日記の雛形！】ＴＡＢＬＥの枠を変えてみよう！(07/04)
|
八十艮7633 さん |
お早う御座います。
ご来訪、有り難う御座いました。
叉、戴いて帰ります。
色々拝見していると、少しずつタグが判って来るようです。
叉、宜しくお願いいたします。
(2004/07/07 04:32:04 AM)
|
Re:【ＴＡＢＬＥで日記の雛形！】ＴＡＢＬＥの枠を変えてみよう！(07/04)
|
ネモッチ☆彡 さん |
おはよう。元気ですか＿？お酒のみすぎないでね。
モックさんにも、よろしく、お伝えてください。
(2004/07/07 07:02:33 AM)
|
Re:【ＴＡＢＬＥで日記の雛形！】ＴＡＢＬＥの枠を変えてみよう！(07/04)
|
八十艮7633 さん |
こんにちは。
また、戴いてゆきます。
なんだか、無銭飲食の感じがして、気が引けますが、厚顔しく・・・・・。
宜しく。
(2004/07/09 01:44:43 PM)
