| 今回は スクロールバー付テーブルでしたが ２ヶ月前から 構想を練っていて 個人的な事情により アップが大変遅れてしまいました。 楽しみにして下さっているビジターの方 本当に申し訳ございません。 テーブルは動く雛形も 背景だけの雛形でも楽しめます。 どうぞ いろいろなテーブルを作成して 私たちに見せてくださいね。 ・・・・・ クッピー 今回は 背景だけの雛形に テーブルでしたが これは 私にでも出来そうです。 (*^.^*)エヘッ なかなか スクロールバーの名称が覚えられなくて えい！！ コピーで何とか と思っていましたが これを機会に いろいろな雛形 作ってみようかな ・・……(-。-) ボソッ 私は 背景雛形 好きだから それにとっても 使いやすいから (≧ｍ≦)ぷっ! (￣-￣ 3)ヘ(▽￣*) ミミカシテ…画像は クッピーにお願いして ! ここで またまた CMを どうぞ 講座を見られている皆さんも ひな形配信に参加してみてください 一緒にひな形つくり やりましょう ひな形配信は こちらへ 哲パパのメールまで ・・・・ エル |
はい エルちゃん 皆さん こんにちは 超ビギナーの為のひな形講座いかがですか？ 第１１章までうまく出来ましたでしょうか？
こんにちは クッピー (゜ー゜)(。_。)ウンウン オオーw(*゜o゜*)w テーブルって 上のタイトルを見るとスクロールバー付のテーブルかしら？(゜ー゜)(。_。)ウンウン 配信の皆さん いろいろな方法で 作ってらっしゃるわね。 方法もいろいろあると思うのですが ('-'*)(,_,*)('-'*)(,_,*) ウンウン クッピー あのね スクロールバーを使うと 細かく英文で書かれているでしょう。 そうね 私も 名称を覚えるのすごく苦手なのよ。 (*^.^*)エヘッ それでね 覚えられるように
次のようなものを 作ってみました。 
オオーw(*゜o゜*)w これだと どこの名称か わかるわね すごいすごい
φ(.. )メモシテオコウ でっ クッピー これをどうやって使うの？ (;^_^A
アセアセ・・・
これをね あくまでも その名称の位置の確認ですね これを下記のような ソースにしますね。
overflow-y:scroll;writing-mode:lr-tb;
width:200px;
height:100px;
border:#90ee90
2px solid;
background-color: #ffffff;
scrollbar-arrow-color: #90ee90;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #90ee90;
scrollbar-track-color:
#ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color:
#90ee90
追加された分は
overflow-y:scroll;writing-mode:lr-tb;
width:200px;
height:100px;
border:#90ee90
2px solid;
background-color:#ffffff; ですね。
説明しますと overflow-y:scroll縦幅が指定範囲をはみ出す場合に，右横について縦にscrollします。overflow-ｘ:scrollは横幅がはみ出した場合下にスクロールバーがつき横に scrollします。 ｘとｙは テーブルのなかの文章が縦書き横書きで使い分けてくださいね。
writing-mode:lr-tb は 横書きを意味します。 縦書きは tb-rl です。 solid
は 直線の枠です ２ｐｘを０にすると 枠は無くなります。
また double にしますと ２本線になり dotted にすると 点線になります。 いろいろやってみてくださいね。
じゃあ 上のソースを 下記のテーブルのソースに入れますね。
<TABLE width="200" border="0" style="position:absolute;
left:200; top:0;">
<TR>
<TD><DIV style="この部分に入れます">
☆<BR><BR>メッセージ<BR><BR>★<BR>
</DIV>
</TD>
</TR>
</TABLE>
そうすると 次のようになりますね。
<TABLE width="200" border="0" style="position:absolute;
left:200; top:0;">
<TR>
<TD><DIV style="overflow-y:scroll;writing-mode:lr-tb;
width:200px;
height:100px;
border:#90ee90
2px solid;
background-color:#ffffff;
scrollbar-arrow-color: #90ee90;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #90ee90;
scrollbar-track-color:
#ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #90ee90">
☆<BR><BR>メッセージ<BR><BR>★<BR>
</DIV>
</TD>
</TR>
</TABLE>
これで 横書きのスクロールバー付テーブルに変身です。
下のソースはＴＩＭＥの基本ソースですね。 <body></body>間に入れてみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML
XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<META
http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META
http-equiv="Content-Style-Type"
content="text/css">
<TITLE></TITLE>
<STYLE
type="text/css">
<!--
.time{
behavior:url(#default#time2);
}
-->
</STYLE>
<?IMPORT
namespace="t"
implementation="#default#time2">
</HEAD>
<BODY
id="body1">
</BODY>
</HTML>
そして いつもの通りに 作成したメモ帳を HTMLファイルで保存しますね。
(ノ´▽｀)ノオオオオッ♪ 出来たわ 縦書きと 横書きをやってみました ('-'*)(,_,*)('-'*)(,_,*)
ウンウン なるほどね
私は いつも わからないままやっていたから これで 改めて スクロール付のテーブルが出来るわ。 作成テーブル
(゜ー゜)(。_。)ウンウン いろいろな テーブルを 楽しんでみるのもいいわね。 それでね エル もっと簡単にテーブルが出来るツール紹介しましょうか。 あやなおたかしゅんさんが 作ってくれたツールを使うと もっと簡単に出来るのよ。 彼が発行しているメールマガジンの
第１４回「本文レイヤーツール作成」があります。 これですね。 本文レイヤーツール
説明してある通りなのですが、ちょっと補足しますと 下の図のように
 |
背景色に赤い丸の部分にポッチをいれ 左のほうに色見本がありますので好きな色を選び 同系色をクリックすると 勝手に
枠が作れます
同じようにして レイヤーの背景色にポッチを入れます。 そうすると同系色が出てきますので 色を選択して同系色をクリックします。
(*^.^*)エヘッ 私はそうやって作ってから その背景色だけ 色を変えています。 最後に タグの作成のボタンをクリックしたら
下にソースが出来ます。 それをoutlook express を開いて メールの作成をだして ソースの編集の,<body>と</body>の間に貼り付けます。
貼り付けて編集に戻しセンターをクリックすると画面の中央にテーブルが出来ます。
それで 【書式】→【背景】→【画像】で 背景画像を挿入します。 これで 動かない画像が出来上がりますね。
背景を透かして見せたいときは FILTER: alpha(Opacity=70) をTABLE style="FILTER:
alpha(Opacity=70)"と入力するといいですよ。 opacityの数値が少なくなるほど透過されます。 もちろん上のツールで作成したタグは メモ帳に貼り付けても出来ます。
出来たのが これですね・・・・ リンドウの花
('-'*)(,_,*)('-'*)(,_,*) ウンウン クッピーが 横書きのテーブルで作ったから 私は (o^-^o)
ウフッ 背景画像クッピーにお願いして
縦書きにしてみました・・・・ 彼岸花
いかがですか？ いろいろな テーブルを使って あなた自身のオリジナルテーブルを作ってみませんか？