2005年01月の記事
全31件 (31件中 1-31件目)
1
-
カレンダーをテーブル(table）で作ってみましょう
２月 カレンダーSunMonTueWedThuFriSat１２３４５６７８９１０１１１２１３１４１５１６１７１８１９２０２１２２２３２４２５２６２７２８白系背景用テーブル全体の設定フォントの太さ（太字）font-weight:bold;文字色 color:#333333; フォントサイズ font-size:12pt;枠線色 bordercolor="#999999"テーブル幅 width="280" テーブル高さ height="200"テーブル背景色 bgcolor="#ffffff"ＨＴＭＬタグ（半角で約１６００文字）は<table style="font-weight:bold;color:#333333;font-size:12pt;" border="1" bordercolor="#999999" width="280" height="200" bgcolor="#ffffff" cellspacing="0" cellpadding="0" align="center"><caption>２月 カレンダー</caption><tr><th style="color:#ffffff;background-color:#cc3333;" width="14%" height="30">Sun</th><th style="color:#ffffff;background-color:#339933;" width="14%">Mon</th><th style="color:#ffffff;background-color:#339933;" width="14%">Tue</th><th style="color:#ffffff;background-color:#339933;" width="14%">Wed</th><th style="color:#ffffff;background-color:#339933;" width="14%">Thu</th><th style="color:#ffffff;background-color:#339933;" width="14%">Fri</th><th style="color:#ffffff;background-color:#0066cc;" width="14%">Sat</th></tr><tr align=center><td style="color:#cc0000;" height="30"><BR></td><td><BR></td><td>１</td><td>２</td><td>３</td><td>４</td><td style="color:#0099ff;">５</td></tr><tr align=center><td style="color:#cc0000;" height="30">６</td><td>７</td><td>８</td><td>９</td><td>１０</td><td style="color:#cc0000;">１１</td><td style="color:#0099ff;">１２</td></tr><tr align=center><td style="color:#cc0000;" height="30">１３</td><td>１４</td><td>１５</td><td>１６</td><td>１７</td><td>１８</td><td style="color:#0099ff;">１９</td></tr><tr align=center><td style="color:#cc0000;" height="30">２０</td><td>２１</td><td>２２</td><td>２３</td><td>２４</td><td>２５</td><td style="color:#0099ff;">２６</td></tr><tr align=center><td style="color:#cc0000;" height="30">２７</td><td>２８</td><td><BR></td><td><BR></td><td><BR></td><td><BR></td><td style="color:#0099ff;"><BR></td></tr></table>２月 カレンダーSunMonTueWedThuFriSat１２３４５６７８９１０１１１２１３１４１５１６１７１８１９２０２１２２２３２４２５２６２７２８黒系背景用テーブル全体の設定フォントの太さ（太字）font-weight:bold;文字色 color:#ffffcc; フォントサイズ font-size:12pt;枠線色 bordercolor="#cccccc"テーブル幅 width="280" テーブル高さ height="200"テーブル背景色 bgcolor="#333333"ＨＴＭＬタグ（半角で約１６００文字）は<table style="font-weight:bold;color:#ffffcc;font-size:12pt;" border="1" bordercolor="#cccccc" width="280" height="200" bgcolor="#333333" cellspacing="0" cellpadding="0" align="center"><caption>２月 カレンダー</caption><tr><th style="color:#ffffff;background-color:#cc3333;" width="14%" height="30">Sun</th><th style="color:#ffffff;background-color:#339933;" width="14%">Mon</th><th style="color:#ffffff;background-color:#339933;" width="14%">Tue</th><th style="color:#ffffff;background-color:#339933;" width="14%">Wed</th><th style="color:#ffffff;background-color:#339933;" width="14%">Thu</th><th style="color:#ffffff;background-color:#339933;" width="14%">Fri</th><th style="color:#ffffff;background-color:#0066cc;" width="14%">Sat</th></tr><tr align=center><td style="color:#cc0000;" height="30"><BR></td><td><BR></td><td>１</td><td>２</td><td>３</td><td>４</td><td style="color:#0099ff;">５</td></tr><tr align=center><td style="color:#cc0000;" height="30">６</td><td>７</td><td>８</td><td>９</td><td>１０</td><td style="color:#cc0000;">１１</td><td style="color:#0099ff;">１２</td></tr><tr align=center><td style="color:#cc0000;" height="30">１３</td><td>１４</td><td>１５</td><td>１６</td><td>１７</td><td>１８</td><td style="color:#0099ff;">１９</td></tr><tr align=center><td style="color:#cc0000;" height="30">２０</td><td>２１</td><td>２２</td><td>２３</td><td>２４</td><td>２５</td><td style="color:#0099ff;">２６</td></tr><tr align=center><td style="color:#cc0000;" height="30">２７</td><td>２８</td><td><BR></td><td><BR></td><td><BR></td><td><BR></td><td style="color:#0099ff;"><BR></td></tr></table>
2005年01月31日
コメント(5)
-
テーブル（table）を日記で使う フリーページで事前に確認する方法
日記や自動改行で tableタグ を使った場合ＨＴＭＬタグの書き方により上部に空白ができます。 フリーページの場合 編集タイプは２種類あります。１ 自動改行 は、入力したとおりに表示されます。 空白文字や改行がそのまま反映されます。 タグを繋げて書かないと上部に空白ができます。２ 自動改行なし は、改行したい位置に <BR> タグを記述します。 空白文字は、無視されます。 タグを繋げて書かなくても上部に空白はできません。 日記ページの場合 編集タイプを選択できませんが 自動改行 の設定です。 タグを繋げて書かないと上部に空白ができます。 フリーページで事前に確認する方法 フリーページの設定を 自動改行（初心者向け） にします。 日記と同じ表示になります。ＨＴＭＬタグの書き方による表示例１ ＨＴＭＬタグを繋げて書いた場合２ ＨＴＭＬタグを１行毎に書いた場合３ ＨＴＭＬタグをセル毎に書いた場合詳細は 日記や自動改行で tableタグ を使う を参考にしてください。
2005年01月30日
コメント(6)
-
プロフィール画像 を作ってみましょう。
１月２７日より 『おすすめ新着』一覧ページ が変わりましたね。プロフィール画像やお気に入り一覧へのリンクが追加されています。詳細は 楽天広場スタッフBlog で確認してください。似顔絵を作成できるサイトで プロフィール画像 を作ってみましょう。顔や体のパーツがたくさん用意されています。下の画像は イメージマップ を使って４箇所へリンクしています。
2005年01月29日
コメント(5)
-
影をおとす処理 と グラデーション処理の お遊び
外側のテーブルセルに影をおとす処理影の右方向への距離 offx=20影の下方向への距離 offy=20影の色 color=#ff99ff不透明な部分を影とします positive=1セルにグラデーション処理したテーブルを配置縦方向効果 GradientType=0グラデーション開始時の色と透明度 StartColorStr=#99000099グラデーション終了時の色と透明度 EndColorStr=#6600cc00ＩＥのフィルタ処理 画像やテキストに特殊効果を設定することができます。Internet Explorer 4.0以上 と Internet Explorer 5.5以上で表示可能なフィルタがあります。１ 半透明のフィルタをかける ９ ブレをつける２ ぼかしを入れる１０ 影を伸ばす３ 特定の１色を透過して表示１１ ウェーブをかける４ 影をおとす１２ 表示方向を 反転 や 回転 させる５ 発光しているように表示１３ グレースケールで表示６ 浮き出したように表示１４ 色を反転させる７ 彫りこんだように表示１５ X線フィルタをかける８ マスクをかける１６ グラデーションをかける
2005年01月28日
コメント(3)
-
カレンダーをテーブル(table）で作ってみましょう
２月 カレンダーSunMonTueWedThuFriSat１２３４５６７８９１０１１１２１３１４１５１６１７１８１９２０２１２２２３２４２５２６２７２８白系背景用テーブル全体の設定フォントの太さ（太字）font-weight:bold;文字色 color:#333333; フォントサイズ font-size:12pt;枠線色 bordercolor="#999999"テーブル幅 width="280" テーブル高さ height="200"ＨＴＭＬタグ（半角で約１６００文字）は<table style="font-weight:bold;color:#333333;font-size:12pt;" border="1" bordercolor="#999999" width="280" height="200" cellspacing="0" cellpadding="0" align="center"><caption>２月 カレンダー</caption><tr><th style="color:#ffffff;background-color:#cc3333;" width="14%" height="30">Sun</th><th style="color:#ffffff;background-color:#339933;" width="14%">Mon</th><th style="color:#ffffff;background-color:#339933;" width="14%">Tue</th><th style="color:#ffffff;background-color:#339933;" width="14%">Wed</th><th style="color:#ffffff;background-color:#339933;" width="14%">Thu</th><th style="color:#ffffff;background-color:#339933;" width="14%">Fri</th><th style="color:#ffffff;background-color:#0066cc;" width="14%">Sat</th></tr><tr align=center><td style="color:#cc0000;" height="30"><BR></td><td><BR></td><td>１</td><td>２</td><td>３</td><td>４</td><td style="color:#0099ff;">５</td></tr><tr align=center><td style="color:#cc0000;" height="30">６</td><td>７</td><td>８</td><td>９</td><td>１０</td><td style="color:#cc0000;">１１</td><td style="color:#0099ff;">１２</td></tr><tr align=center><td style="color:#cc0000;" height="30">１３</td><td>１４</td><td>１５</td><td>１６</td><td>１７</td><td>１８</td><td style="color:#0099ff;">１９</td></tr><tr align=center><td style="color:#cc0000;" height="30">２０</td><td>２１</td><td>２２</td><td>２３</td><td>２４</td><td>２５</td><td style="color:#0099ff;">２６</td></tr><tr align=center><td style="color:#cc0000;" height="30">２７</td><td>２８</td><td><BR></td><td><BR></td><td><BR></td><td><BR></td><td style="color:#0099ff;"><BR></td></tr></table>２月 カレンダーSunMonTueWedThuFriSat１２３４５６７８９１０１１１２１３１４１５１６１７１８１９２０２１２２２３２４２５２６２７２８黒系背景用テーブル全体の設定フォントの太さ（太字）font-weight:bold;文字色 color:#ffffcc; フォントサイズ font-size:12pt;枠線色 bordercolor="#cccccc"テーブル幅 width="280" テーブル高さ height="200"ＨＴＭＬタグ（半角で約１６００文字）は<table style="font-weight:bold;color:#ffffcc;font-size:12pt;" border="1" bordercolor="#cccccc" width="280" height="200" cellspacing="0" cellpadding="0" align="center"><caption>２月 カレンダー</caption><tr><th style="color:#ffffff;background-color:#cc3333;" width="14%" height="30">Sun</th><th style="color:#ffffff;background-color:#339933;" width="14%">Mon</th><th style="color:#ffffff;background-color:#339933;" width="14%">Tue</th><th style="color:#ffffff;background-color:#339933;" width="14%">Wed</th><th style="color:#ffffff;background-color:#339933;" width="14%">Thu</th><th style="color:#ffffff;background-color:#339933;" width="14%">Fri</th><th style="color:#ffffff;background-color:#0066cc;" width="14%">Sat</th></tr><tr align=center><td style="color:#cc0000;" height="30"><BR></td><td><BR></td><td>１</td><td>２</td><td>３</td><td>４</td><td style="color:#0099ff;">５</td></tr><tr align=center><td style="color:#cc0000;" height="30">６</td><td>７</td><td>８</td><td>９</td><td>１０</td><td style="color:#cc0000;">１１</td><td style="color:#0099ff;">１２</td></tr><tr align=center><td style="color:#cc0000;" height="30">１３</td><td>１４</td><td>１５</td><td>１６</td><td>１７</td><td>１８</td><td style="color:#0099ff;">１９</td></tr><tr align=center><td style="color:#cc0000;" height="30">２０</td><td>２１</td><td>２２</td><td>２３</td><td>２４</td><td>２５</td><td style="color:#0099ff;">２６</td></tr><tr align=center><td style="color:#cc0000;" height="30">２７</td><td>２８</td><td><BR></td><td><BR></td><td><BR></td><td><BR></td><td style="color:#0099ff;"><BR></td></tr></table>
2005年01月27日
コメント(5)
-
色を反転させて表示してみましょう
●●色を反転させて表示してみましょう色を反転する前色を反転した後 ●●ＩＥのフィルタ処理 画像やテキストに特殊効果を設定することができます。Internet Explorer 4.0以上 と Internet Explorer 5.5以上で表示可能なフィルタがあります。１ 半透明のフィルタをかける ９ ブレをつける２ ぼかしを入れる１０ 影を伸ばす３ 特定の１色を透過して表示１１ ウェーブをかける４ 影をおとす１２ 表示方向を 反転 や 回転 させる５ 発光しているように表示１３ グレースケールで表示６ 浮き出したように表示１４ 色を反転させる７ 彫りこんだように表示１５ X線フィルタをかける８ マスクをかける１６ グラデーションをかける
2005年01月26日
コメント(3)
-
特定の１色を透過して表示してみましょう
特定の１色を透過して表示してみましょうこの画像 に指定透過色#ffffff透過色#ffff00透過色#ff0000透過色#ff00ff透過色#000000透過色#0000ff透過色#00ffff透過色#00ff00ＩＥのフィルタ処理 画像やテキストに特殊効果を設定することができます。Internet Explorer 4.0以上 と Internet Explorer 5.5以上で表示可能なフィルタがあります。１ 半透明のフィルタをかける ９ ブレをつける２ ぼかしを入れる１０ 影を伸ばす３ 特定の１色を透過して表示１１ ウェーブをかける４ 影をおとす１２ 表示方向を 反転 や 回転 させる５ 発光しているように表示１３ グレースケールで表示６ 浮き出したように表示１４ 色を反転させる７ 彫りこんだように表示１５ X線フィルタをかける８ マスクをかける１６ グラデーションをかける
2005年01月25日
コメント(5)
-
ＩＥのフィルタ処理 画像やテキストに特殊効果を設定することができます。
ＩＥのフィルタ処理 画像やテキストに特殊効果を設定することができます。Internet Explorer 4.0以上 と Internet Explorer 5.5以上で表示可能なフィルタがあります。１ 半透明のフィルタをかける ９ ブレをつける２ ぼかしを入れる１０ 影を伸ばす３ 特定の１色を透過して表示１１ ウェーブをかける４ 影をおとす１２ 表示方向を 反転 や 回転 させる５ 発光しているように表示１３ グレースケールで表示６ 浮き出したように表示１４ 色を反転させる７ 彫りこんだように表示１５ X線フィルタをかける８ マスクをかける１６ グラデーションをかける
2005年01月24日
コメント(3)
-
特定の１色を透過して表示してみましょう
★★ ★ ★ ● ● ● ● ● ★ ★ ★★★★★●●●●●★★★特定の１色を透過して表示してみましょうテーブル（３行３列）全体の設定背景画像の指定 background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/228.jpg)外周りの背景色 background-color:#660000特定の１色を透過して表示する設定１行２列目のセル filter:chroma(color=#333333);２行１列目のセル filter:chroma(color=#333333);２行３列目のセル filter:chroma(color=#333333);３行２列目のセル filter:chroma(color=#333333);２行２列目のセル スクロールバーを透過して背景画像を表示 filter:chroma(color=#000000);テキストボックス（div）タグに指定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本の色 scrollbar-base-color:#000000 （透過色）矢印の色 scrollbar-arrow-color:#ff0000 （透過色）ハイライト部分の色 scrollbar-highlight-color:#000000 （透過色）ボタンのハイライト部分の色 scrollbar-3dlight-color:tealボタンのシャドウ部分の色 scrollbar-darkshadow-color:teal文字色 color:#000033フォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.5倍 line-height:1.5 ★★★●●●●●★★★★★ ★ ★ ● ● ● ● ● ★ ★ ★★ＨＴＭＬタグ （ 半角で約２１００文字 ）<table style="background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/228.jpg);background-position:70px 50px;" border="0" width="530" height="530" cellspacing="0" cellpadding="0" align="center"><tr><td style="background-color:#660000;color:#00ffff;font-size:25px;;" width="30" height="30" align="center">★</td><td style="background-color:#660000;color:#ff00ff;font-size:25px;filter:chroma(color=#333333);" width="470" align="center">★ <font color="#333333">★</font> ★ ● <font color="#333333">●</font> ● <font color="#333333">●</font> ● ★ <font color="#333333">★</font> ★</td><td style="background-color:#660000;color:#00ffff;font-size:25px;" width="30" align="center">★</td></tr><tr><td style="background-color:#660000;color:#00ff00;font-size:25px;line-height:1.7;filter:chroma(color=#333333);" align="center">★<BR><font color="#333333">★</font><BR>★<BR>●<BR><font color="#333333">●</font><BR>●<BR><font color="#333333">●</font><BR>●<BR>★<BR><font color="#333333">★</font><BR>★</td><td style="filter:chroma(color=#000000);" align="center"><div style="overflow:auto;width:460px;height:460px;color:#000033;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#000000;scrollbar-highlight-color:#000000;scrollbar-arrow-color:#ff0000;scrollbar-3dlight-color:teal;scrollbar-darkshadow-color:teal;"><!--テキスト開始-->特定の１色を透過して表示してみましょう<BR>テーブル（３行３列）全体の設定<BR>背景画像の指定 background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/228.jpg)<BR>使う画像アドレスに変更してください。<BR>外周りの背景色 background-color:#660000<BR>特定の１色を透過して表示する設定<BR>１行２列目のセル filter:chroma(<font color="#cc0000">color=#333333</font>);<BR>２行１列目のセル filter:chroma(<font color="#cc0000">color=#333333</font>);<BR>２行３列目のセル filter:chroma(<font color="#cc0000">color=#333333</font>);<BR>３行２列目のセル filter:chroma(<font color="#cc0000">color=#333333</font>);<BR>２行２列目のセル スクロールバーを透過して背景画像を表示<BR> filter:chroma(<font color="#cc0000">color=#000000</font>);<BR>テキストボックス（div）タグに指定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本の色 scrollbar-base-color:#000000 （<font color="#cc0000">透過色</font>）<BR>矢印の色 scrollbar-arrow-color:#ff0000 （<font color="#cc0000">透過色</font>）<BR>ハイライト部分の色 scrollbar-highlight-color:#000000 （<font color="#cc0000">透過色</font>）<BR>ボタンのハイライト部分の色 scrollbar-3dlight-color:teal<BR>ボタンのシャドウ部分の色 scrollbar-darkshadow-color:teal<BR>文字色 color:#000033<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.5倍 line-height:1.5<BR> <!--テキスト終了--></div></td><td style="background-color:#660000;color:#00ff00;font-size:25px;line-height:1.7;filter:chroma(color=#333333);" align="center">★<BR><font color="#333333">★</font><BR>★<BR>●<BR><font color="#333333">●</font><BR>●<BR><font color="#333333">●</font><BR>●<BR>★<BR><font color="#333333">★</font><BR>★</td></tr><tr><td style="background-color:#660000;color:#00ffff;font-size:25px;" height="30" align="center">★</td><td style="background-color:#660000;color:#ff00ff;font-size:25px;filter:chroma(color=#333333);" align="center">★ <font color="#333333">★</font> ★ ● <font color="#333333">●</font> ● <font color="#333333">●</font> ● ★ <font color="#333333">★</font> ★</td><td style="background-color:#660000;color:#00ffff;font-size:25px;" align="center">★</td></tr></table>
2005年01月23日
コメント(5)
-
スクロールバーを透過して表示してみましょう。
★★ ★ ★ ● ● ● ● ● ★ ★ ★★★★★●●●●●★★★半透明のフィルタ処理 style=1 を使って枠飾りをしたテーブルスクロールバーを透過して背景画像を表示テーブル（３行３列）全体の設定背景画像の指定 background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/228.jpg)外周りの背景は 半透明のフィルタ処理共通する指定半透明にするフィルタの色 background-color:#660000 文字色 color:#00ffff color:#ff00ff color:#00ff00 フォントサイズ font-size:25px スタート地点の不透明度 opacity=100終了地点の不透明度 finishopacity=20線状の半透明処理 style=1スタート地点 と 終了地点 の座標１行１列目のセル startx=40,starty=40,finishx=80,finishy=80１行２列目のセル startx=0,starty=25,finishx=0,finishy=50１行３列目のセル startx=60,starty=40,finishx=20,finishy=80２行１列目のセル startx=25,starty=0,finishx=50,finishy=0２行３列目のセル startx=75,starty=0,finishx=50,finishy=0３行１列目のセル startx=40,starty=60,finishx=80,finishy=20３行２列目のセル startx=0,starty=75,finishx=0,finishy=50３行３列目のセル startx=60,starty=60,finishx=20,finishy=20２行２列目のセル 特定の１色を透過して表示する設定 style="filter:chroma(color=#000000)"テキストボックス（div）タグに指定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本の色 scrollbar-base-color:#000000 （透過色）矢印の色 scrollbar-arrow-color:#ff0000 （透過色）ハイライト部分の色 scrollbar-highlight-color:#000000 （透過色）ボタンのハイライト部分の色 scrollbar-3dlight-color:tealボタンのシャドウ部分の色 scrollbar-darkshadow-color:teal文字色 color:#000033フォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.5倍 line-height:1.5 詳細は特定の１色を透過を参考にしてください。★★★●●●●●★★★★★ ★ ★ ● ● ● ● ● ★ ★ ★★ＨＴＭＬタグ （ 半角で約２３００文字 ）<table style="background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/228.jpg);background-position:center center;" border="0" width="530" height="530" cellspacing="0" cellpadding="0" align="center"><tr><td style="background-color:#660000;color:#00ffff;font-size:25px;filter:alpha(opacity=100,finishopacity=20,style=1,startx=40,starty=40,finishx=80,finishy=80);" width="30" height="30" align="center">★</td><td style="background-color:#660000;color:#ff00ff;font-size:25px;filter:alpha(opacity=100,finishopacity=20,style=1,startx=0,starty=25,finishx=0,finishy=50);" width="470" align="center">★ ★ ★ ● ● ● ● ● ★ ★ ★</td><td style="background-color:#660000;color:#00ffff;font-size:25px;filter:alpha(opacity=100,finishopacity=20,style=1,startx=60,starty=40,finishx=20,finishy=80);" width="30" align="center">★</td></tr><tr><td style="background-color:#660000;color:#00ff00;font-size:25px;line-height:1.7;filter:alpha(opacity=100,finishopacity=20,style=1,startx=25,starty=0,finishx=50,finishy=0);" align="center">★<BR>★<BR>★<BR>●<BR>●<BR>●<BR>●<BR>●<BR>★<BR>★<BR>★</td><td style="filter:chroma(color=#000000)" align="center"><div style="overflow:auto;width:460px;height:460px;color:#000033;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#000000;scrollbar-highlight-color:#000000;scrollbar-arrow-color:#ff0000;scrollbar-3dlight-color:teal;scrollbar-darkshadow-color:teal;"><!--テキスト開始-->半透明のフィルタ処理 style=1 を使って枠飾りをしたテーブル<BR>スクロールバーを透過して背景画像を表示<BR>テーブル（３行３列）全体の設定<BR>背景画像の指定 background-image:url(http://plaza.rakuten.co.jp/img/user/75/61/3347561/228.jpg)<BR>使う画像アドレスに変更してください。<BR>外周りの背景は 半透明のフィルタ処理<BR>共通する指定<BR>半透明にするフィルタの色 background-color:#660000<BR>文字色 color:#00ffff color:#ff00ff color:#00ff00<BR>フォントサイズ font-size:25px<BR><BR>スタート地点の不透明度 opacity=100<BR>終了地点の不透明度 finishopacity=20<BR>線状の半透明処理 style=1<BR>スタート地点 と 終了地点 の座標<BR>１行１列目のセル startx=40,starty=40,finishx=80,finishy=80<BR>１行２列目のセル startx=0,starty=25,finishx=0,finishy=50<BR>１行３列目のセル startx=60,starty=40,finishx=20,finishy=80<BR>２行１列目のセル startx=25,starty=0,finishx=50,finishy=0<BR>２行３列目のセル startx=75,starty=0,finishx=50,finishy=0<BR>３行１列目のセル startx=40,starty=60,finishx=80,finishy=20<BR>３行２列目のセル startx=0,starty=75,finishx=0,finishy=50<BR>３行３列目のセル startx=60,starty=60,finishx=20,finishy=20<BR>２行２列目のセル 特定の１色を透過して表示する設定<BR> style="filter:chroma(<font color="#cc0000">color=#000000</font>)"<BR>テキストボックス（div）タグに指定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本の色 scrollbar-base-color:#000000 （<font color="#cc0000">透過色</font>）<BR>矢印の色 scrollbar-arrow-color:#ff0000 （<font color="#cc0000">透過色</font>）<BR>ハイライト部分の色 scrollbar-highlight-color:#000000 （<font color="#cc0000">透過色</font>）<BR>ボタンのハイライト部分の色 scrollbar-3dlight-color:teal<BR>ボタンのシャドウ部分の色 scrollbar-darkshadow-color:teal<BR>文字色 color:#000033<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.5倍 line-height:1.5<BR><!--テキスト終了--></div></td><td style="background-color:#660000;color:#00ff00;font-size:25px;line-height:1.7;filter:alpha(opacity=100,finishopacity=20,style=1,startx=75,starty=0,finishx=50,finishy=0);" align="center">★<BR>★<BR>★<BR>●<BR>●<BR>●<BR>●<BR>●<BR>★<BR>★<BR>★</td></tr><tr><td style="background-color:#660000;color:#00ffff;font-size:25px;filter:alpha(opacity=100,finishopacity=20,style=1,startx=40,starty=60,finishx=80,finishy=20);" height="30" align="center">★</td><td style="background-color:#660000;color:#ff00ff;font-size:25px;filter:alpha(opacity=100,finishopacity=20,style=1,startx=0,starty=75,finishx=0,finishy=50);" align="center">★ ★ ★ ● ● ● ● ● ★ ★ ★</td><td style="background-color:#660000;color:#00ffff;font-size:25px;filter:alpha(opacity=100,finishopacity=20,style=1,startx=60,starty=60,finishx=20,finishy=20);" align="center">★</td></tr></table>
2005年01月22日
コメント(3)
-
半透明のフィルタ処理 style=1 を使って枠飾りにしてみましょう。
●● ● ● ● ● ● ● ● ●●●●●●●●●●●半透明のフィルタ処理 style=1 を使って枠飾りにしてみましょう。テーブル（３行３列） 外周りの背景は 半透明のフィルタ処理共通する指定background-color:#ccccff 半透明にするフィルタの色color:#00cccc color:#cc00cc color:#00cc00 文字色font-size:30px フォントサイズスタート地点の不透明度 opacity=100終了地点の不透明度 finishopacity=30線状の半透明処理 style=1スタート地点 と 終了地点 の座標１行１列目のセル startx=50,starty=50,finishx=80,finishy=80１行２列目のセル startx=0,starty=25,finishx=0,finishy=50１行３列目のセル startx=50,starty=50,finishx=20,finishy=80２行１列目のセル startx=25,starty=0,finishx=50,finishy=0２行３列目のセル startx=75,starty=0,finishx=50,finishy=0３行１列目のセル startx=50,starty=50,finishx=80,finishy=20３行２列目のセル startx=0,starty=75,finishx=0,finishy=50３行３列目のセル startx=50,starty=50,finishx=20,finishy=20２行２列目のセル テキストボックス（div）タグに指定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本色 scrollbar-base-color:#ccccff背面部分の色 scrollbar-track-color:#e6e6fa矢印の色 scrollbar-arrow-color:#ff0000文字色 color:#000033フォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.5倍 line-height:1.5 詳細は半透明のフィルタを参考にしてください。●●●●●●●●●●● ● ● ● ● ● ● ● ●●ＨＴＭＬタグ （ 半角で約２１００文字 ）<table border="0" width="530" height="530" cellspacing="0" cellpadding="0" align="center"><tr><td style="background-color:#ccccff;color:#00cccc;font-size:30px;filter:alpha(opacity=100,finishopacity=30,style=1,startx=50,starty=50,finishx=80,finishy=80);" width="30" height="30" align="center">●</td><td style="background-color:#ccccff;color:#cc00cc;font-size:30px;filter:alpha(opacity=100,finishopacity=30,style=1,startx=0,starty=25,finishx=0,finishy=50);" width="470" align="center">● ● ● ● ● ● ● ● ●</td><td style="background-color:#ccccff;color:#00cccc;font-size:30px;filter:alpha(opacity=100,finishopacity=30,style=1,startx=50,starty=50,finishx=20,finishy=80);" width="30" align="center">●</td></tr><tr><td style="background-color:#ccccff;color:#00cc00;font-size:30px;line-height:1.7;filter:alpha(opacity=100,finishopacity=30,style=1,startx=25,starty=0,finishx=50,finishy=0);" align="center">●<BR>●<BR>●<BR>●<BR>●<BR>●<BR>●<BR>●<BR>●</td><td bgcolor="#e6e6fa" align="center"><div style="overflow:auto;width:460px;height:460px;color:#000033;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#ccccff;scrollbar-track-color:#e6e6fa;scrollbar-arrow-color:#ff0000;"><!--テキスト開始-->半透明のフィルタ処理 style=1 を使って枠飾りにしてみましょう。<BR>テーブル（３行３列） 外周りの背景は 半透明のフィルタ処理<BR>共通する指定<BR>background-color:#ccccff 半透明にするフィルタの色<BR>color:#00cccc color:#cc00cc color:#00cc00 文字色<BR>font-size:30px フォントサイズ<BR>スタート地点の不透明度 opacity=100<BR>終了地点の不透明度 finishopacity=30<BR>線状の半透明処理 style=1<BR>スタート地点 と 終了地点 の座標<BR>１行１列目のセル startx=50,starty=50,finishx=80,finishy=80<BR>１行２列目のセル startx=0,starty=25,finishx=0,finishy=50<BR>１行３列目のセル startx=50,starty=50,finishx=20,finishy=80<BR>２行１列目のセル startx=25,starty=0,finishx=50,finishy=0<BR>２行３列目のセル startx=75,starty=0,finishx=50,finishy=0<BR>３行１列目のセル startx=50,starty=50,finishx=80,finishy=20<BR>３行２列目のセル startx=0,starty=75,finishx=0,finishy=50<BR>３行３列目のセル startx=50,starty=50,finishx=20,finishy=20<BR>２行２列目のセル テキストボックス（div）タグに指定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#ccccff<BR>背面部分の色 scrollbar-track-color:#e6e6fa<BR>矢印の色 scrollbar-arrow-color:#ff0000<BR>文字色 color:#000033<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.5倍 line-height:1.5<BR><!--テキスト終了--></div></td><td style="background-color:#ccccff;color:#00cc00;font-size:30px;line-height:1.7;filter:alpha(opacity=100,finishopacity=30,style=1,startx=75,starty=0,finishx=50,finishy=0);" align="center">●<BR>●<BR>●<BR>●<BR>●<BR>●<BR>●<BR>●<BR>●</td></tr><tr><td style="background-color:#ccccff;color:#00cccc;font-size:30px;filter:alpha(opacity=100,finishopacity=30,style=1,startx=50,starty=50,finishx=80,finishy=20);" height="30" align="center">●</td><td style="background-color:#ccccff;color:#cc00cc;font-size:30px;filter:alpha(opacity=100,finishopacity=30,style=1,startx=0,starty=75,finishx=0,finishy=50);" align="center">● ● ● ● ● ● ● ● ●</td><td style="background-color:#ccccff;color:#00cccc;font-size:30px;filter:alpha(opacity=100,finishopacity=30,style=1,startx=50,starty=50,finishx=20,finishy=20);" align="center">●</td></tr></table>
2005年01月21日
コメント(5)
-
半透明のフィルタ処理 style=1 を使って枠飾りにしてみましょう。
半透明のフィルタ処理 style=1 を使って枠飾りにしてみましょう。１行１列目１行２列目１行３列目２行１列目２行２列目 テキストボックスを配置３行３列のテーブルにフィルタ処理を使って枠飾り１行１列目 右下から左上１行２列目 下から上１行３列目 左下から右上２行１列目 右から左２行３列目 左から右３行１列目 右上から左下３行２列目 上から下３行３列目 左上から右下２行３列目３行１列目３行２列目３行３列目 詳細は半透明のフィルタを参考にしてください。ＨＴＭＬタグ （ 半角で約１４００文字 ）<table border="0" width="530" height="530" cellspacing="0" cellpadding="0" align="center"><tr><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=75,starty=75,finishx=50,finishy=50);" width="30" height="30"></td><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=50,finishx=0,finishy=0);" width="470"></td><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=25,starty=75,finishx=50,finishy=50);" width="30"></td></tr><tr><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=50,starty=0,finishx=0,finishy=0);"></td><td bgcolor="#e6e6fa" align="center"><div style="width:460px;height:460px;color:#000033;font-size:12pt;text-align:left;line-height:1.5;"><!--テキスト開始-->テキストボックス （ 今回は div タグ に指定 ）<BR> 幅 width:460px;<BR>高さ height:460px;<BR> 文字色 color:#000033;<BR> フォントサイズ font-size:12pt;<BR>行揃え（左寄せ） text-align:left;<BR> １行の高さ（フォントサイズの1.5倍）line-height:1.5;<BR><!--テキスト終了--></div></td><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=50,starty=0,finishx=100,finishy=0);"></td></tr><tr><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=75,starty=25,finishx=50,finishy=50);" height="30"></td><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=50,finishx=0,finishy=100);"></td><td style="background-color:#ccccff;filter:alpha(opacity=100,finishopacity=0,style=1,startx=25,starty=25,finishx=50,finishy=50);"></td></tr></table>
2005年01月20日
コメント(1)
-
半透明のフィルタ処理 style=1 を使ってみましょう
半透明のフィルタ処理 style=1スタート地点 と 終了地点の座標を追加指定してみましょう。使うＨＴＭＬタグはfilter:progid:DXImageTransform.Microsoft.Alpha(★) ＩＥ5.5以上対応またはfilter:alfha(★) ＩＥ4.0以上対応★は 次の値を指定しますopacity スタート地点の不透明度finishopacity 終了地点の不透明度style=1 は線状の半透明処理 スタート地点 と 終了地点の座標を追加指定 幅または高さの割合で指定します。 startx スタート地点のＸ座標 （ 0 ～ 100 ） starty スタート地点のＹ座標 （ 0 ～ 100 ） finishx 終了地点のＸ座標 （ 0 ～ 100 ） finishy 終了地点のＹ座標 （ 0 ～ 100 ）詳細は半透明のフィルタを参考にしてください。 元画像 に半透明のフィルタをかけてみましょうopacity=100,finishopacity=0,style=1,startx=25,starty=25finishx=25finishy=25元画像と同じfinishx=25finishy=75上から下finishx=75finishy=25左から右finishx=75finishy=75左上から右下opacity=100,finishopacity=0,style=1,startx=25,starty=75finishx=25finishy=25下から上finishx=25finishy=75元画像と同じfinishx=75finishy=25左下から右上finishx=75finishy=75左から右opacity=100,finishopacity=0,style=1,startx=75,starty=25finishx=25finishy=25右から左finishx=25finishy=75右上から左下finishx=75finishy=25元画像と同じfinishx=75finishy=75上から下opacity=100,finishopacity=0,style=1,startx=75,starty=75finishx=25finishy=25右下から左上finishx=25finishy=75右から左finishx=75finishy=25下から上finishx=75finishy=75元画像と同じ
2005年01月19日
コメント(2)
-
楽天広場 レイアウトの標準設定
１８日よりトップページの表示が変わりました。楽天広場スタッフBlogをみると 日記表示の設定ができます。デザイン設定 → 表示件数の設定 → メインの表示件数設定日記 / 記事の投稿１ 省略表示 （ 以前と同じ表示 ）２ 全文表示デザインが崩れる場合があります。１ トップページのメインの幅よりも大きな画像を貼っている場合２ テーブルやボックスの幅を標準幅より大きく指定している場合デザインが崩れる場合の対処方法１ メインの幅より小さな画像にする２ テーブルやボックスの幅を標準幅より小さくする３ 管理画面で設定を変えてこれまでどおりタグを表示させないレイアウトの標準設定は 下のようになっています。1. 中央メイン型タイトル および ナビゲーション表示領域 幅 760px左側サブ項目表示幅180pxメイン項目余白を含む表示幅 400px表示できる幅 380px程度右側サブ項目表示幅180px2. 左メイン型タイトル および ナビゲーション表示領域 幅 760pxメイン項目余白を含む表示幅 580px表示できる幅 560px程度サブ項目表示幅180px3. 右メイン型タイトル および ナビゲーション表示領域 幅 760pxサブ項目表示幅180pxメイン項目余白を含む表示幅 580px表示できる幅 560px程度4. メイン型タイトル および ナビゲーション表示領域 幅 760pxメイン項目余白を含む表示幅 760px表示できる幅 730px程度5.旧広場型ナビゲーション表示幅120pxサブ項目表示幅120pxタイトル 表示幅 760pxメイン項目 余白を含む表示幅 760pxメイン項目 表示できる幅 730px程度日記表示領域余白を含む表示幅 570px表示できる幅 540px程度サブ項目表示幅 190px日記ページの標準設定は 下のようになっています。1. 中央メイン型 および 3. 右メイン型タイトル および ナビゲーション表示領域 幅 760pxカレンダーカテゴリ表示領域幅 180px日記表示領域余白を含む表示幅 580px表示できる幅 530px程度2. 左メイン型タイトル および ナビゲーション表示領域 幅 760px日記表示領域余白を含む表示幅 580px表示できる幅 530px程度カレンダーカテゴリ表示領域幅 180px4. メイン型タイトル および ナビゲーション表示領域 幅 760pxカテゴリ表示領域幅 760px日記表示領域余白を含む表示幅 760px表示できる幅 690px程度5.旧広場型ナビゲーション表示領域幅 120pxサブ項目表示領域幅 120pxタイトル 表示領域 幅 760pxカテゴリ表示領域幅 760px日記表示領域余白を含む表示幅 760px表示できる幅 700px程度
2005年01月18日
コメント(3)
-
半透明処理した背景のお遊び
テーブル（３行３列） ４隅の背景は 半透明のフィルタ処理１行１列目のセル 半透明のフィルタ処理した背景style=1,startx=55,starty=55,finishx=45,finishy=45１行２列目のセル１行３列のテーブル 半透明のフィルタ処理した背景をスクロール１行３列目のセル 半透明のフィルタ処理した背景style=1,startx=45,starty=55,finishx=55,finishy=45２行１列目のセル３行１列のテーブル 半透明のフィルタ処理した背景をスクロール２行２列目のセル テキストボックス（div）タグに指定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本色 scrollbar-base-color:#000066背面部分の色 scrollbar-track-color:#000033矢印の色 scrollbar-arrow-color:#ff0000文字色 color:#ffffccフォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.5倍 line-height:1.5２行３列目のセル３行１列のテーブル 半透明のフィルタ処理した背景をスクロール３行１列目のセル 半透明のフィルタ処理した背景style=1,startx=55,starty=45,finishx=45,finishy=55３行２列目のセル１行３列のテーブル 半透明のフィルタ処理した背景をスクロール３行３列目のセル 半透明のフィルタ処理した背景style=1,startx=45,starty=45,finishx=55,finishy=55ＨＴＭＬタグ （ 半角で約２６００文字 ）opacity スタート地点の不透明度はデフォルト値（ opacity=100 ）finishopacity 終了地点の不透明度はデフォルト値（ finishopacity=0 ）詳細は半透明のフィルタを使うを参考にしてください。<table border="0" width="520" height="520" cellspacing="0" cellpadding="0" align="center"><tr><td style="background-color:#330000;filter:alpha(style=1,startx=55,starty=55,finishx=45,finishy=45);" width="10" height="10"></td><td bgcolor="#330000"><marquee width="500" behavior="alternate" direction="right" scrollamount="4"><table border="0" width="300" height="10" cellspacing="0" cellpadding="0"><tr><td style="background-color:#ff0000;filter:alpha(style=2);"></td><td style="background-color:#ff00ff;filter:alpha(style=3);"></td><td style="background-color:#ffff00;filter:alpha(style=2);"></td></tr></table></marquee></td><td style="background-color:#330000;filter:alpha(style=1,startx=45,starty=55,finishx=55,finishy=45);" width="10"></td></tr><tr><td bgcolor="#330000"><marquee height="500" behavior="alternate" direction="down" scrollamount="4"><table border="0" width="10" height="300" cellspacing="0" cellpadding="0"><tr><td style="background-color:#ff0000;filter:alpha(style=3);"></td></tr><tr><td style="background-color:#ff00ff;filter:alpha(style=2);"></td></tr><tr><td style="background-color:#ffff00;filter:alpha(style=3);"></td></tr></table></marquee></td><td bgcolor="#000033" align="center"><div style="overflow:auto;width:490px;height:490px;color:#ffffcc;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#000066;scrollbar-track-color:#000033;scrollbar-arrow-color:#ff0000;"><!--テキスト開始-->テーブル（３行３列） ４隅の背景は 半透明のフィルタ処理<BR>１行１列目のセル 半透明のフィルタ処理した背景<BR>style=1,startx=55,starty=55,finishx=45,finishy=45<BR>１行２列目のセル<BR>１行３列のテーブル 半透明のフィルタ処理した背景をスクロール<BR>１行３列目のセル 半透明のフィルタ処理した背景<BR>style=1,startx=45,starty=55,finishx=55,finishy=45<BR>２行１列目のセル<BR>３行１列のテーブル 半透明のフィルタ処理した背景をスクロール<BR>２行２列目のセル テキストボックス（div）タグに指定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#000066<BR>背面部分の色 scrollbar-track-color:#000033<BR>矢印の色 scrollbar-arrow-color:#ff0000<BR>文字色 color:#ffffcc<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.5倍 line-height:1.5<BR>２行３列目のセル<BR>３行１列のテーブル 半透明のフィルタ処理した背景をスクロール<BR>３行１列目のセル 半透明のフィルタ処理した背景<BR>style=1,startx=55,starty=45,finishx=45,finishy=55<BR>３行２列目のセル<BR>１行３列のテーブル 半透明のフィルタ処理した背景をスクロール<BR>３行３列目のセル 半透明のフィルタ処理した背景<BR>style=1,startx=45,starty=45,finishx=55,finishy=55<BR><!--テキスト終了--></div></td><td bgcolor="#330000"><marquee height="500" behavior="alternate" direction="up" scrollamount="4"><table border="0" width="10" height="300" cellspacing="0" cellpadding="0"><tr><td style="background-color:#ffff00;filter:alpha(style=3);"></td></tr><tr><td style="background-color:#ff00ff;filter:alpha(style=2);"></td></tr><tr><td style="background-color:#ff0000;filter:alpha(style=3);"></td></tr></table></marquee></td></tr><tr><td style="background-color:#330000;filter:alpha(style=1,startx=55,starty=45,finishx=45,finishy=55);" height="10"></td><td bgcolor="#330000"><marquee width="500" behavior="alternate" direction="left" scrollamount="4"><table border="0" width="300" height="10" cellspacing="0" cellpadding="0"><tr><td style="background-color:#ffff00;filter:alpha(style=2);"></td><td style="background-color:#ff00ff;filter:alpha(style=3);"></td><td style="background-color:#ff0000;filter:alpha(style=2);"></td></tr></table></marquee></td><td style="background-color:#330000;filter:alpha(style=1,startx=45,starty=45,finishx=55,finishy=55);"></td></tr></table>
2005年01月17日
コメント(1)
-
グラデーション枠 と 半透明処理した背景のお遊び
外側のテーブル （３行３列）テーブルのセルを使って グラデーション枠を表示１行１列目のセル・１行３列目のセル・３行１列目のセル・３行３列目のセル背景色 #ff0000１行２列目のセル・２行１列目のセル 背景色をグラデーション表示#ffff0000 → #ffffff00 → #ff00ff00 → #ff00ffff → #ff0000ff → #ffff00ff → #ffff0000２行３列目のセル・３行２列目のセル 背景色をグラデーション表示#ffff0000 → #ffff00ff → #ff0000ff → #ff00ffff → #ff00ff00 → #ffffff00 → #ffff0000２行２列目のセル ３行３列のテーブルを配置内側のテーブル（３行３列） 半透明のフィルタ処理した背景をスクロール１行１列目のセル・１行３列目のセル・３行１列目のセル・３行３列目のセル半透明のフィルタ処理 style=1 スタート地点と終了地点の座標指定１行２列目のセル・２行１列目のセル・２行３列目のセル・３行２列目のセル半透明のフィルタ処理 style=2 ３種類をスクロール２行２列目のセル テキストを表示style=1style=2style=3style=3style=2style=1
2005年01月16日
コメント(4)
-
楽天広場 レイアウトの標準設定
楽天広場スタッフBlogをみると１８日よりトップページの表示が変わります。日記 / 記事欄で、画像・リンクなどのタグが表示されます。デザインが崩れる場合があるようです。１ トップページのメインの幅よりも大きな画像を貼っている場合２ テーブルやボックスの幅を標準幅より大きく指定している場合デザインが崩れる場合の対処方法１ メインの幅より小さな画像にする２ テーブルやボックスの幅を標準幅より小さくする３ 管理画面で設定を変えてこれまでどおりタグを表示させないレイアウトの標準設定は 下のようになっています。1. 中央メイン型タイトル および ナビゲーション表示領域 幅 760px左側サブ項目表示領域幅 180pxメイン項目余白を含む表示領域幅 400px右側サブ項目表示領域幅 180px2. 左メイン型タイトル および ナビゲーション表示領域 幅 760pxメイン項目余白を含む表示領域幅 580pxサブ項目表示領域幅 180px3. 右メイン型タイトル および ナビゲーション表示領域 幅 760pxサブ項目表示領域幅 180pxメイン項目余白を含む表示領域幅 580px4. メイン型タイトル および ナビゲーション表示領域 幅 760pxメイン項目余白を含む表示領域幅 760px5.旧広場型ナビゲーション表示領域幅 120pxサブ項目表示領域幅 120pxタイトル 表示領域 幅 760pxメイン項目余白を含む表示領域幅 570pxサブ項目表示領域幅 190px
2005年01月15日
コメント(4)
-
テーブル（ table ）のセルを使って枠飾り グラデーション枠にしてみましょう
テーブルのセルを使って枠飾りグラデーション枠にしてみましょう３行３列のテーブル全体の設定背景色 bgcolor="#ffffff" テーブルを中央に表示 align="center"１行１列目のセル背景色 #ff0000 を指定１行２列目のセル１行３列のテーブルの背景色をグラデーション表示#ffff0000 → #ffffff00 → #ff00ff00 → #ff00ffff１行３列目のセル背景色 #00ffff を指定２行１列目のセル３行１列のテーブルの背景色をグラデーション表示#ffff0000 → #ffffff00 → #ff00ff00 → #ff00ffff２行２列目のセル テキストボックス（ div タグ に指定 ）内容があふれた場合はスクロールバーをつけて表示 overflow:auto;スクロールバー色の設定基本色 scrollbar-base-color:#ffffcc;背面部分の色 scrollbar-track-color:#ffffff;矢印の色 scrollbar-arrow-color:#ff0000;文字色 color:#000099;フォントサイズ font-size:12pt;行揃えを左寄せ text-align:left;１行の高さフォントサイズの1.5倍 line-height:1.5;２行３列目のセル３行１列のテーブルの背景色をグラデーション表示#ff00ffff → #ff0000ff → #ffff00ff → #ffff0000３行１列目のセル背景色 #00ffff を指定３行２列目のセル１行３列のテーブルの背景色をグラデーション表示#ff00ffff → #ff0000ff → #ffff00ff → #ffff0000３行３列目のセル背景色 #ff0000 を指定グラデーションの指定（ ＩＥ5.5以上対応 ）グラデーションの方向を指定します。GradientType=0 縦方向効果 GradientType=1 横方向効果グラデーション開始時の 透明度 と 色 を指定します。StartColorStr=#aarrggbb設定値は８桁表示で#00000000～#ffffffffとなります。aaは透明度 rrggbbは赤・緑・青の６桁のカラーコードです。グラデーション終了時の 透明度 と 色 を指定します。EndColorStr=#aarrggbb指定方法は 開始時と同じＨＴＭＬタグ （ 半角で約２７００文字 ）は<table border="0" width="530" height="530" bgcolor="#ffffff" cellspacing="0" cellpadding="0" align="center"><tr><td width="10" height="10" bgcolor="#ff0000"></td><td width="510"><table border="0" width="100%" height="10" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff0000,EndColorStr=#ffffff00);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffffff00,EndColorStr=#ff00ff00);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ff00,EndColorStr=#ff00ffff);" width="33%"></td></tr></table></td><td width="10" bgcolor="#00ffff"></td></tr><tr><td height="510"><table border="0" width="10" height="510" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff0000,EndColorStr=#ffffff00);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff00,EndColorStr=#ff00ff00);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ff00,EndColorStr=#ff00ffff);" height="170"></td></tr></table></td><td align="center" valign="middle"><div style="overflow:auto;width:500px;height:500px;color:#000099;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#ffffcc;scrollbar-track-color:#ffffff;scrollbar-arrow-color:#ff0000;"><!--テキスト開始-->テーブルのセルを使って枠飾り<BR>グラデーション枠にしてみましょう<BR><BR>３行３列のテーブル<BR>全体の設定<BR>背景色 bgcolor="#ffffff" テーブルを中央に表示 align="center"<BR><BR>１行１列目のセル<BR>背景色 #ff0000 を指定<BR>１行２列目のセル<BR>１行３列のテーブルの背景色をグラデーション表示<BR>#ffff0000 → #ffffff00 → #ff00ff00 → #ff00ffff<BR>１行３列目のセル<BR>背景色 #00ffff を指定<BR><BR>２行１列目のセル<BR>３行１列のテーブルの背景色をグラデーション表示<BR>#ffff0000 → #ffffff00 → #ff00ff00 → #ff00ffff<BR>２行２列目のセル テキストボックス（ div タグ に指定 ）<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto;<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#ffffcc;<BR>背面部分の色 scrollbar-track-color:#ffffff;<BR>矢印の色 scrollbar-arrow-color:#ff0000;<BR>文字色 color:#000099;<BR>フォントサイズ font-size:12pt;<BR>行揃えを左寄せ text-align:left;<BR>１行の高さフォントサイズの1.5倍 line-height:1.5;<BR>２行３列目のセル<BR>３行１列のテーブルの背景色をグラデーション表示<BR>#ff00ffff → #ff0000ff → #ffff00ff → #ffff0000<BR><BR>３行１列目のセル<BR>背景色 #00ffff を指定<BR>３行２列目のセル<BR>１行３列のテーブルの背景色をグラデーション表示<BR>#ff00ffff → #ff0000ff → #ffff00ff → #ffff0000<BR>３行３列目のセル<BR>背景色 #ff0000 を指定<BR><!--テキスト終了--></div></td><td><table border="0" width="10" height="510" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ffff,EndColorStr=#ff0000ff);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff0000ff,EndColorStr=#ffff00ff);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff00ff,EndColorStr=#ffff0000);" height="170"></td></tr></table></td></tr><tr><td height="10" bgcolor="#00ffff"></td><td><table border="0" width="100%" height="10" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ffff,EndColorStr=#ff0000ff);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff0000ff,EndColorStr=#ffff00ff);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff00ff,EndColorStr=#ffff0000);" width="33%"></td></tr></table></td><td bgcolor="#ff0000"></td></tr></table>
2005年01月14日
コメント(4)
-
テーブル（ table ）のセルを使って枠飾り グラデーション枠にしてみましょう
テーブルのセルを使って枠飾りグラデーション枠にしてみましょう３行３列のテーブル全体の設定背景色 bgcolor="#000033" テーブルを中央に表示 align="center"１行１列目のセル背景色 #0000ff を指定１行２列目のセル１行３列のテーブルの背景色をグラデーション表示#ff0000ff → #ffff00ff → #ffff0000 → #ffffff00１行３列目のセル背景色 #ffff00 を指定２行１列目のセル３行１列のテーブルの背景色をグラデーション表示#ff0000ff → #ffff00ff → #ffff0000 → #ffffff00２行２列目のセル テキストボックス（ div タグ に指定 ）内容があふれた場合はスクロールバーをつけて表示 overflow:auto;スクロールバー色の設定基本色 scrollbar-base-color:#000066;背面部分の色 scrollbar-track-color:#000033;矢印の色 scrollbar-arrow-color:#ffffff;文字色 color:#ffffcc;フォントサイズ font-size:12pt;行揃えを左寄せ text-align:left;１行の高さフォントサイズの1.5倍 line-height:1.5;２行３列目のセル３行１列のテーブルの背景色をグラデーション表示#ffffff00 → #ff00ff00 → #ff00ffff → #ff0000ff３行１列目のセル背景色 #ffff00 を指定３行２列目のセル１行３列のテーブルの背景色をグラデーション表示#ffffff00 → #ff00ff00 → #ff00ffff → #ff0000ff３行３列目のセル背景色 #0000ff を指定グラデーションの指定（ ＩＥ5.5以上対応 ）グラデーションの方向を指定します。GradientType=0 縦方向効果 GradientType=1 横方向効果グラデーション開始時の 透明度 と 色 を指定します。StartColorStr=#aarrggbb設定値は８桁表示で#00000000～#ffffffffとなります。aaは透明度 rrggbbは赤・緑・青の６桁のカラーコードです。グラデーション終了時の 透明度 と 色 を指定します。EndColorStr=#aarrggbb指定方法は 開始時と同じＨＴＭＬタグ （ 半角で約２７００文字 ）は<table border="0" width="530" height="530" bgcolor="#000033" cellspacing="0" cellpadding="0" align="center"><tr><td width="10" height="10" bgcolor="#0000ff"></td><td width="510"><table border="0" width="100%" height="10" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff0000ff,EndColorStr=#ffff00ff);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff00ff,EndColorStr=#ffff0000);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff0000,EndColorStr=#ffffff00);" width="33%"></td></tr></table></td><td width="10" bgcolor="#ffff00"></td></tr><tr><td height="510"><table border="0" width="10" height="510" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff0000ff,EndColorStr=#ffff00ff);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff00ff,EndColorStr=#ffff0000);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff0000,EndColorStr=#ffffff00);" height="170"></td></tr></table></td><td align="center" valign="middle"><div style="overflow:auto;width:500px;height:500px;color:#ffffcc;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#000066;scrollbar-track-color:#000033;scrollbar-arrow-color:#ffffff;"><!--テキスト開始-->テーブルのセルを使って枠飾り<BR>グラデーション枠にしてみましょう<BR><BR>３行３列のテーブル<BR>全体の設定<BR>背景色 bgcolor="#000033" テーブルを中央に表示 align="center"<BR><BR>１行１列目のセル<BR>背景色 #0000ff を指定<BR>１行２列目のセル<BR>１行３列のテーブルの背景色をグラデーション表示<BR>#ff0000ff → #ffff00ff → #ffff0000 → #ffffff00<BR>１行３列目のセル<BR>背景色 #ffff00 を指定<BR><BR>２行１列目のセル<BR>３行１列のテーブルの背景色をグラデーション表示<BR>#ff0000ff → #ffff00ff → #ffff0000 → #ffffff00<BR>２行２列目のセル テキストボックス（ div タグ に指定 ）<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto;<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#000066;<BR>背面部分の色 scrollbar-track-color:#000033;<BR>矢印の色 scrollbar-arrow-color:#ffffff;<BR>文字色 color:#ffffcc;<BR>フォントサイズ font-size:12pt;<BR>行揃えを左寄せ text-align:left;<BR>１行の高さフォントサイズの1.5倍 line-height:1.5;<BR>２行３列目のセル<BR>３行１列のテーブルの背景色をグラデーション表示<BR>#ffffff00 → #ff00ff00 → #ff00ffff → #ff0000ff<BR><BR>３行１列目のセル<BR>背景色 #ffff00 を指定<BR>３行２列目のセル<BR>１行３列のテーブルの背景色をグラデーション表示<BR>#ffffff00 → #ff00ff00 → #ff00ffff → #ff0000ff<BR>３行３列目のセル<BR>背景色 #0000ff を指定<BR><!--テキスト終了--></div></td><td><table border="0" width="10" height="510" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff00,EndColorStr=#ff00ff00);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ff00,EndColorStr=#ff00ffff);" height="170"></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ffff,EndColorStr=#ff0000ff);" height="170"></td></tr></table></td></tr><tr><td height="10" bgcolor="#ffff00"></td><td><table border="0" width="100%" height="10" cellspacing="0" cellpadding="0"><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffffff00,EndColorStr=#ff00ff00);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ff00,EndColorStr=#ff00ffff);" width="33%"></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ffff,EndColorStr=#ff0000ff);" width="33%"></td></tr></table></td><td bgcolor="#0000ff"></td></tr></table>
2005年01月13日
コメント(0)
-
グラデーションのお遊び
グラデーションのお遊びグラデーションの方向を指定します。設定値は0、1となります。GradientType=0 または GradientType=10は 縦方向効果 1は 横方向効果デフォルト値は0です。グラデーション開始時の 透明度 と 色 を指定します。StartColorStr=#aarrggbb設定値は#00000000～#ffffffffとなります。設定値は８桁表示で#aarrggbbとなります。aaは透明度をあらわすアルファ値で00は透明となり、ffは不透明となります。rrggbbは赤・緑・青の６桁のカラーコードです。デフォルト値は#ff0000ff（ blue ）です。グラデーション終了時の 透明度 と 色 を指定します。EndColorStr=#aarrggbb指定方法は 開始時と同じデフォルト値は#ff000000（ black ）です。style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff0000ff,EndColorStr=#ff00000000);"のように指定します。（ ＩＥ5.5以上対応 ）グラデーションの透明度を変化させてみましょう透明度の指定によって背景（ 色や画像 ）の透過度が変化します。上段 開始時の 透明度 00（透明）→33→66→99→cc→ff（不透明）下段 終了時の 透明度 00（透明）→33→66→99→cc→ff（不透明）背景画像 の場合GradientType=0StartColorStr=#000000ff ～ StartColorStr=#ff0000ffEndColorStr=#ff000000透明度00透明度33透明度66透明度99透明度cc透明度ffデフォルト値GradientType=0StartColorStr=#000000ffEndColorStr=#00000000 ～ EndColorStr=#ff000000透明度00透明度33透明度66透明度99透明度cc透明度ffデフォルト値背景色 #ff0000 の場合GradientType=0StartColorStr=#000000ff ～ StartColorStr=#ff0000ffEndColorStr=#ff000000透明度00透明度33透明度66透明度99透明度cc透明度ffデフォルト値GradientType=0StartColorStr=#000000ffEndColorStr=#00000000 ～ EndColorStr=#ff000000透明度00透明度33透明度66透明度99透明度cc透明度ffデフォルト値背景色 #00ff00 の場合GradientType=0StartColorStr=#000000ff ～ StartColorStr=#ff0000ffEndColorStr=#ff000000透明度00透明度33透明度66透明度99透明度cc透明度ffデフォルト値GradientType=0StartColorStr=#000000ffEndColorStr=#00000000 ～ EndColorStr=#ff000000透明度00透明度33透明度66透明度99透明度cc透明度ffデフォルト値
2005年01月12日
コメント(2)
-
グラデーションのお遊び
左側は GradientType=0右側は GradientType=1#ffcccc00 → #ffcc0000#ffcc0000 → #ffcc00cc#ffcc00cc → #ff0000cc#ff0000cc → #ff00cccc#ff00cccc → #ff00cc00#ff00cc00 → #ffcccc00グラデーションのお遊びグラデーションの方向を指定します。設定値は0、1となります。GradientType=0 または GradientType=10は 縦方向効果 1は 横方向効果デフォルト値は0です。グラデーション開始時の 透明度 と 色 を指定します。StartColorStr=#aarrggbb設定値は#00000000～#ffffffffとなります。設定値は８桁表示で#aarrggbbとなります。aaは透明度をあらわすアルファ値で00は透明となり、ffは不透明となります。rrggbbは赤・緑・青の６桁のカラーコードです。デフォルト値は#ff0000ff（ blue ）です。グラデーション終了時の 透明度 と 色 を指定します。EndColorStr=#aarrggbb指定方法は 開始時と同じデフォルト値は#ff000000（ black ）です。style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffffffff,EndColorStr=#ffffff00);"のように指定します。（ ＩＥ5.5以上対応 ）カラーコード 00 と cc の組み合わせ例#ffffff#cccc00#cc0000#000000#cc0000#cc00cc#cc00cc#0000cc#0000cc#00cccc#00cccc#00cc00#00cc00#cccc00
2005年01月11日
コメント(2)
-
グラデーションのお遊び
左側は GradientType=0右側は GradientType=1#ffffff00 → #ffff0000#ffff0000 → #ffff00ff#ffff00ff → #ff0000ff#ff0000ff → #ff00ffff#ff00ffff → #ff00ff00#ff00ff00 → #ffffff00グラデーションのお遊びグラデーションの方向を指定します。設定値は0、1となります。GradientType=0 または GradientType=10は 縦方向効果 1は 横方向効果デフォルト値は0です。グラデーション開始時の 透明度 と 色 を指定します。StartColorStr=#aarrggbb設定値は#00000000～#ffffffffとなります。設定値は８桁表示で#aarrggbbとなります。aaは透明度をあらわすアルファ値で00は透明となり、ffは不透明となります。rrggbbは赤・緑・青の６桁のカラーコードです。デフォルト値は#ff0000ff（ blue ）です。グラデーション終了時の 透明度 と 色 を指定します。EndColorStr=#aarrggbb指定方法は 開始時と同じデフォルト値は#ff000000（ black ）です。style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffffffff,EndColorStr=#ffffff00);"のように指定します。（ ＩＥ5.5以上対応 ）カラーコード 00 と ff の組み合わせ例#ffffff#ffff00#ff0000#000000#ff0000#ff00ff#ff00ff#0000ff#0000ff#00ffff#00ffff#00ff00#00ff00#ffff00
2005年01月10日
コメント(1)
-
スクロールバーをグラデーションで表示してみましょう
グラデーション処理した テキストボックスグラデーションの方向を指定します。設定値は0、1となります。GradientType=00は 縦方向効果 1は 横方向効果 デフォルト値は0です。グラデーション開始時の 透明度 と 色 を指定します。StartColorStr=#ff666600設定値は#00000000～#ffffffffとなります。設定値は８桁表示で#aarrggbbとなります。aaは透明度をあらわすアルファ値で00は透明となり、ffは不透明となります。rrggbbは赤・緑・青の６桁のカラーコードです。デフォルト値は#ff0000ff （ blue ）です。グラデーション終了時の 透明度 と 色 を指定します。EndColorStr=#ff660066指定方法は 開始時と同じデフォルト値は#ff000000（ black ）です。テキストボックスは center タグに設定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本色 scrollbar-base-color:#660066背面部分の色 scrollbar-track-color:#660066矢印の色 scrollbar-arrow-color:#ffffff文字色 color:#ffff00フォントを太字 font-weight:boldフォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.5倍 line-height:1.5スクロールバーをグラデーションで表示 上のボックスに追加指定特定の１色（ #660066 ）を透過して表示させます。filter:progid:DXImageTransform.Microsoft.Chroma(color=#660066)上のボックスと同じ指定グラデーション処理した テキストボックスグラデーションの方向を指定します。設定値は0、1となります。GradientType=00は 縦方向効果 1は 横方向効果 デフォルト値は0です。グラデーション開始時の 透明度 と 色 を指定します。StartColorStr=#ff666600設定値は#00000000～#ffffffffとなります。設定値は８桁表示で#aarrggbbとなります。aaは透明度をあらわすアルファ値で00は透明となり、ffは不透明となります。rrggbbは赤・緑・青の６桁のカラーコードです。デフォルト値は#ff0000ff （ blue ）です。グラデーション終了時の 透明度 と 色 を指定します。EndColorStr=#ff660066指定方法は 開始時と同じデフォルト値は#ff000000（ black ）です。テキストボックスは center タグに設定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本色 scrollbar-base-color:#660066（ 透過色を指定 ）背面部分の色 scrollbar-track-color:#660066（ 透過色を指定 ）矢印の色 scrollbar-arrow-color:#ffffff文字色 color:#ffff00フォントを太字 font-weight:boldフォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.5倍 line-height:1.5グラデーション処理したテキストボックスのＨＴＭＬタグ（ 半角で約６００文字 ）は<table style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff666600,EndColorStr=#ff660066);" border="0" width="530" height="430" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="middle"><center style="overflow:auto;font-weight:bold;width:510px;height:410px;color:#ffff99;font-size:12pt;text-align:left;line-height:1.5;scrollbar-base-color:#660066;scrollbar-track-color:#660066;scrollbar-arrow-color:#ffffff;"><!--テキストボックスこの下から-->グラデーション処理した テキストボックス<BR>グラデーションの方向を指定します。設定値は0、1となります。<BR>GradientType=0<BR>0は 縦方向効果 1は 横方向効果 デフォルト値は0です。<BR>グラデーション開始時の 透明度 と 色 を指定します。<BR>StartColorStr=#ff666600<BR>設定値は#00000000～#ffffffffとなります。<BR>設定値は８桁表示で#aarrggbbとなります。<BR>aaは透明度をあらわすアルファ値で<BR>00は透明となり、ffは不透明となります。<BR>rrggbbは赤・緑・青の６桁のカラーコードです。<BR>デフォルト値は#ff0000ff （ blue ）です。<BR>グラデーション終了時の 透明度 と 色 を指定します。<BR>EndColorStr=#ff660066<BR>指定方法は 開始時と同じ<BR>デフォルト値は#ff000000（ black ）です。<BR>テキストボックスは center タグに設定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#660066<BR>背面部分の色 scrollbar-track-color:#660066<BR>矢印の色 scrollbar-arrow-color:#ffffff<BR>文字色 color:#ffff00<BR>フォントを太字 font-weight:bold<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.5倍 line-height:1.5;<BR><BR><BR><BR><BR><BR><BR><BR><BR><!--テキストボックスこの上まで--></center></td></tr></table>スクロールバーをグラデーションで表示したテキストボックスのＨＴＭＬタグ（ 半角で約７００文字 ）は赤色は追加部分<table style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff666600,EndColorStr=#ff660066);" border="0" width="530" height="430" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="middle"><center style="overflow:auto;font-weight:bold;width:510px;height:410px;color:#ffff99;font-size:12pt;text-align:left;line-height:1.5;filter:progid:DXImageTransform.Microsoft.Chroma(color=#660066);scrollbar-base-color:#660066;scrollbar-track-color:#660066;scrollbar-arrow-color:#ffffff;"><!--テキストボックスこの下から-->スクロールバーをグラデーションで表示 上のボックスに追加指定<BR>特定の１色（ #660066 ）を透過して表示させます。<BR>filter:progid:DXImageTransform.Microsoft.Chroma(color=#660066)<BR>上のボックスと同じ指定<BR>グラデーション処理した テキストボックス<BR>グラデーションの方向を指定します。設定値は0、1となります。<BR>GradientType=0<BR>0は 縦方向効果 1は 横方向効果 デフォルト値は0です。<BR>グラデーション開始時の 透明度 と 色 を指定します。<BR>StartColorStr=#ff666600<BR>設定値は#00000000～#ffffffffとなります。<BR>設定値は８桁表示で#aarrggbbとなります。<BR>aaは透明度をあらわすアルファ値で<BR>00は透明となり、ffは不透明となります。<BR>rrggbbは赤・緑・青の６桁のカラーコードです。<BR>デフォルト値は#ff0000ff （ blue ）です。<BR>グラデーション終了時の 透明度 と 色 を指定します。<BR>EndColorStr=#ff660066<BR>指定方法は 開始時と同じ<BR>デフォルト値は#ff000000（ black ）です。<BR>テキストボックスは center タグに設定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#660066（ 透過色を指定 ）<BR>背面部分の色 scrollbar-track-color:#660066（ 透過色を指定 ）<BR>矢印の色 scrollbar-arrow-color:#ffffff<BR>文字色 color:#ffff00<BR>フォントを太字 font-weight:bold<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.5倍 line-height:1.5;<BR><BR><BR><BR><BR><BR><BR><BR><BR><!--テキストボックスこの上まで--></center></td></tr></table>
2005年01月09日
コメント(3)
-
グラデーション処理 と 半透明のフィルタ処理したテーブル
☆★☆☆★☆３行３列のテーブルグラデーション処理 と 半透明のフィルタ処理テキストのセルグラデーション処理 と 半透明のフィルタ処理テキストボックスは center タグに設定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本色 scrollbar-base-color:#0000ff背面部分の色 scrollbar-track-color:#0000ff矢印の色 scrollbar-arrow-color:#ffffff文字色 color:#ffff00フォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.8倍 line-height:1.8;影を伸ばして表示影の色・影の伸びる方向（45度単位）・影の長さ（1～255）filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=20)☆★☆☆★☆ＨＴＭＬタグ（ 半角で約３７００文字 ）は<table style="font-weight:bold;background-color:#ffffff;" border="0" width="530" height="530" cellspacing="0" cellpadding="0" align="center"><tr><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#ff0000;" width="30" height="30" align="center"><!--１行１列目のセル--></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff00ff,EndColorStr=#ff00ffff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);" width="470" align="center"><!--１行２列目のセル--><marquee behavior="alternate" direction="left" scrollamount="25" scrolldelay="400"><P style="width:80px;height:10px;background-color:red;color:#ffffcc;font-size:20px;text-align:center;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#00ff00;" width="30" align="center"><!--１行３列目のセル--></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff00ff,EndColorStr=#ff00ffff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" height="470" align="center"><!--２行１列目のセル--><marquee height="470" behavior="alternate" direction="up" scrollamount="25" scrolldelay="400"><P style="width:30px;height:20px;background-color:red;color:#ffffcc;font-size:20px;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ccff00ff,EndColorStr=#cc00ffff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=30,style=2);background-color:#0000ff;" align="center" valign="middle"><center style="overflow:auto;width:440px;height:440px;color:#ffff00;font-size:12pt;text-align:left;line-height:1.8;filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=20);scrollbar-base-color:#0000ff;scrollbar-track-color:#0000ff;scrollbar-arrow-color:#ffffff;"><!--２行２列目のセル テキストボックスこの下から-->３行３列のテーブル<BR>グラデーション処理 と 半透明のフィルタ処理<BR>テキストのセル<BR>グラデーション処理 と 半透明のフィルタ処理<BR>テキストボックスは center タグに設定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#0000ff<BR>背面部分の色 scrollbar-track-color:#0000ff<BR>矢印の色 scrollbar-arrow-color:#ffffff<BR>文字色 color:#ffff00<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.8倍 line-height:1.8;<BR>影を伸ばして表示<BR>影の色・影の伸びる方向（45度単位）・影の長さ（1～255）<BR>filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=20)<BR><BR><!--２行２列目のセル テキストボックスこの上まで--></center></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ffff,EndColorStr=#ffff00ff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" align="center"><!--２行３列目のセル--><marquee height="470" behavior="alternate" direction="down" scrollamount="25" scrolldelay="400"><P style="width:30px;height:20px;background-color:#00ff00;color:#ffffcc;font-size:20px;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#00ff00;" height="30" align="center"><!--３行１列目のセル--></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ffff,EndColorStr=#ffff00ff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" align="center"><!--３行２列目のセル--><marquee behavior="alternate" direction="right" scrollamount="25" scrolldelay="400"><P style="width:80px;height:10px;background-color:#00ff00;color:#ffffcc;font-size:20px;text-align:center;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#ff0000;" align="center"><!--３行３列目のセル--></td></tr></table>
2005年01月08日
コメント(3)
-
グラデーション処理 と 半透明のフィルタ処理したテーブル
☆★☆☆★☆３行３列のテーブルグラデーション処理 と 半透明のフィルタ処理テキストのセルグラデーション処理 と 半透明のフィルタ処理テキストボックスは center タグに設定内容があふれた場合はスクロールバーをつけて表示 overflow:autoスクロールバー色の設定基本色 scrollbar-base-color:#ff00ff背面部分の色 scrollbar-track-color:#ff00ff矢印の色 scrollbar-arrow-color:#ffffff文字色 color:#ffff00フォントサイズ font-size:12ptテキスト位置 左揃え text-align:left１行の高さ 文字サイズの1.8倍 line-height:1.8;発光しているように表示発光の色 と 発光の強さ（1～255）filter:progid:DXImageTransform.Microsoft.Glow(color=#ff00ff,strength=10)☆★☆☆★☆ＨＴＭＬタグ（ 半角で約３７００文字 ）は<table style="font-weight:bold;background-color:#333333;" border="0" width="530" height="530" cellspacing="0" cellpadding="0" align="center"><tr><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#ff0000;" width="30" height="30" align="center"><!--１行１列目のセル--></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff00ff,EndColorStr=#ff00ffff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);" width="470" align="center"><!--１行２列目のセル--><marquee behavior="alternate" direction="left" scrollamount="25" scrolldelay="400"><P style="width:80px;height:10px;background-color:red;color:#ffffcc;font-size:20px;text-align:center;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#00ff00;" width="30" align="center"><!--１行３列目のセル--></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff00ff,EndColorStr=#ff00ffff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" height="470" align="center"><!--２行１列目のセル--><marquee height="470" behavior="alternate" direction="up" scrollamount="25" scrolldelay="400"><P style="width:30px;height:20px;background-color:red;color:#ffffcc;font-size:20px;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#cc000099,EndColorStr=#cc009999) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=30,style=2);background-color:#00ff00;" align="center" valign="middle"><center style="overflow:auto;width:455px;height:440px;color:#ffffff;font-size:12pt;text-align:left;line-height:1.8;filter:progid:DXImageTransform.Microsoft.Glow(color=#ff00ff,strength=10);scrollbar-base-color:#ff00ff;scrollbar-track-color:#ff00ff;scrollbar-arrow-color:#ffffff;"><!--２行２列目のセル テキストボックスこの下から-->３行３列のテーブル<BR>グラデーション処理 と 半透明のフィルタ処理<BR>テキストのセル<BR>グラデーション処理 と 半透明のフィルタ処理<BR>テキストボックスは center タグに設定<BR>内容があふれた場合はスクロールバーをつけて表示 overflow:auto<BR>スクロールバー色の設定<BR>基本色 scrollbar-base-color:#ff00ff<BR>背面部分の色 scrollbar-track-color:#ff00ff<BR>矢印の色 scrollbar-arrow-color:#ffffff<BR>文字色 color:#ffff00<BR>フォントサイズ font-size:12pt<BR>テキスト位置 左揃え text-align:left<BR>１行の高さ 文字サイズの1.8倍 line-height:1.8;<BR>発光しているように表示<BR>発光の色 と 発光の強さ（1～255）<BR>filter:progid:DXImageTransform.Microsoft.Glow(color=#ff00ff,strength=10)<BR><BR> <!--２行２列目のセル テキストボックスこの上まで--></center></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff00ffff,EndColorStr=#ffff00ff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" align="center"><!--２行３列目のセル--><marquee height="470" behavior="alternate" direction="down" scrollamount="25" scrolldelay="400"><P style="width:30px;height:20px;background-color:#00ff00;color:#ffffcc;font-size:20px;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#00ff00;" height="30" align="center"><!--３行１列目のセル--></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ff00ffff,EndColorStr=#ffff00ff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" align="center"><!--３行２列目のセル--><marquee behavior="alternate" direction="right" scrollamount="25" scrolldelay="400"><P style="width:80px;height:10px;background-color:#00ff00;color:#ffffcc;font-size:20px;text-align:center;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆★☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#ff0000;" align="center"><!--３行３列目のセル--></td></tr></table>
2005年01月07日
コメント(3)
-
グラデーション処理 と 半透明のフィルタ処理したテーブル
☆☆☆☆☆☆３行３列のテーブルグラデーション処理 と 半透明のフィルタ処理半透明のフィルタ処理style=3フィルタの色 #ff00ffグラデーション処理GradientType=1半透明のフィルタ処理style=2フィルタの色 #ff00ff半透明のフィルタ処理style=3フィルタの色 #ffff00グラデーション処理GradientType=0半透明のフィルタ処理style=2フィルタの色 #ff00ffテキストのセルグラデーション処理GradientType=0半透明のフィルタ処理style=2フィルタの色 #ff00ff半透明のフィルタ処理style=3フィルタの色 #ffff00グラデーション処理GradientType=1半透明のフィルタ処理style=2フィルタの色 #ff00ff半透明のフィルタ処理style=3フィルタの色 #ff00ff☆☆☆☆☆☆ＨＴＭＬタグ（ 半角で約３５００文字 ）は<table style="font-weight:bold;font-size:14pt;color:#ffffcc;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff000099,EndColorStr=#ff330033);" border="0" width="530" height="530" cellspacing="0" cellpadding="0" align="center"><tr><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" width="30" height="30" align="center"><!--１行１列目のセル--></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffff00ff,EndColorStr=#ffffff00) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=10,style=2);background-color:#ff00ff;" width="470" align="center"><!--１行２列目のセル--><marquee behavior="alternate" direction="left" scrollamount="25" scrolldelay="400"><P style="width:80px;height:10px;background-color:red;color:#ffffcc;font-size:20px;text-align:center;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆☆☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ffff00;" width="30" align="center"><!--１行３列目のセル--></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffff00ff,EndColorStr=#ffffff00) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#ff00ff;" height="470" align="center"><!--２行１列目のセル--><marquee height="470" behavior="alternate" direction="up" scrollamount="25" scrolldelay="400"><P style="width:30px;height:20px;background-color:red;color:#ffffcc;font-size:20px;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆☆☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ff000099,EndColorStr=#ff330033);line-height:1.3;" align="center" valign="top"><!--２行２列目のセル テキスト開始-->テキスト位置横方向 中央揃え縦方向 上<!--テキスト終了--></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff00,EndColorStr=#ffff00ff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#ff00ff;" align="center"><!--２行３列目のセル--><marquee height="470" behavior="alternate" direction="down" scrollamount="25" scrolldelay="400"><P style="width:30px;height:20px;background-color:blue;color:#ffffcc;font-size:20px;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆☆☆</P></marquee></td></tr><tr><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ffff00;" height="30" align="center"><!--３行１列目のセル--></td><td style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#ffffff00,EndColorStr=#ffff00ff) progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=2);background-color:#ff00ff;" width="500" align="center"><!--３行２列目のセル--><marquee behavior="alternate" direction="right" scrollamount="25" scrolldelay="400"><P style="width:80px;height:10px;background-color:blue;color:#ffffcc;font-size:20px;text-align:center;padding:3px;filter:alpha(opacity=100,finishopacity=0,style=2);">☆☆☆</P></marquee></td><td style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100,finishopacity=0,style=3);background-color:#ff00ff;" align="center"><!--３行３列目のセル--></td></tr></table>
2005年01月06日
コメント(5)
-
スクロールの時間間隔を変えて点滅しているように表示 ★ 表示されない時は再表示して見てね
スクロールの速度を変えて点滅しているように表示してみましょう。今回はテーブル幅６００px １行表示 に指定してみます。フォントサイズ毎にスクロールする速度を変えています。スクロールする速度によって再表示する時間間隔を変えています。 フォントサイズ 25px 速度 25 時間間隔 200・400・600フォントサイズ 25px 速度 25 時間間隔 200フォントサイズ 25px 速度 25 時間間隔 400フォントサイズ 25px 速度 25 時間間隔 600フォントサイズ 20px 速度 20 時間間隔 200・400・600フォントサイズ 20px 速度 20 時間間隔 200フォントサイズ 20px 速度 20 時間間隔 400フォントサイズ 20px 速度 20 時間間隔 600フォントサイズ 15px 速度 15 時間間隔 200・400・600フォントサイズ 15px 速度 15 時間間隔 200フォントサイズ 15px 速度 15 時間間隔 400フォントサイズ 15px 速度 15 時間間隔 600フォントサイズ 10px 速度 10 時間間隔 200・400・600フォントサイズ 10px 速度 10 時間間隔 200フォントサイズ 10px 速度 10 時間間隔 400フォントサイズ 10px 速度 10 時間間隔 600ＨＴＭＬタグ フォントサイズ毎に３種類（ 時間間隔を変更する と 表示間隔が変わります ）フォントサイズ 25px 速度 25 時間間隔 200・400・600<table border="0" width="600" height="25" align="center"><tr><td><marquee style="font-size:25px;" height="25" behavior="scroll" direction="up" scrollamount="25" scrolldelay="200"><font color="#ffff00">フォントサイズ 25px 速度 25 時間間隔 200</font></marquee></td></tr></table><table border="0" width="600" height="25" align="center"><tr><td><marquee style="font-size:25px;" height="25" behavior="scroll" direction="up" scrollamount="25" scrolldelay="400"><font color="#ff00ff">フォントサイズ 25px 速度 25 時間間隔 400</font></marquee></td></tr></table><table border="0" width="600" height="25" align="center"><tr><td><marquee style="font-size:25px;" height="25" behavior="scroll" direction="up" scrollamount="25" scrolldelay="600"><font color="#00ffff">フォントサイズ 25px 速度 25 時間間隔 600</font></marquee></td></tr></table>フォントサイズ 20px 速度 20 時間間隔 200・400・600<table border="0" width="600" height="20" align="center"><tr><td><marquee style="font-size:20px;" height="20" behavior="scroll" direction="up" scrollamount="20" scrolldelay="200"><font color="#ffff00">フォントサイズ 20px 速度 20 時間間隔 200</font></marquee></td></tr></table><table border="0" width="600" height="20" align="center"><tr><td><marquee style="font-size:20px;" height="20" behavior="scroll" direction="up" scrollamount="20" scrolldelay="400"><font color="#ff00ff">フォントサイズ 20px 速度 20 時間間隔 400</font></marquee></td></tr></table><table border="0" width="600" height="20" align="center"><tr><td><marquee style="font-size:20px;" height="20" behavior="scroll" direction="up" scrollamount="20" scrolldelay="600"><font color="#00ffff">フォントサイズ 20px 速度 20 時間間隔 600</font></marquee></td></tr></table>フォントサイズ 15px 速度 15 時間間隔 200・400・600<table border="0" width="600" height="15" align="center"><tr><td><marquee style="font-size:15px;" height="15" behavior="scroll" direction="up" scrollamount="15" scrolldelay="200"><font color="#ffff00">フォントサイズ 15px 速度 15 時間間隔 200</font></marquee></td></tr></table><table border="0" width="600" height="15" align="center"><tr><td><marquee style="font-size:15px;" height="15" behavior="scroll" direction="up" scrollamount="15" scrolldelay="400"><font color="#ff00ff">フォントサイズ 15px 速度 15 時間間隔 400</font></marquee></td></tr></table><table border="0" width="600" height="15" align="center"><tr><td><marquee style="font-size:15px;" height="15" behavior="scroll" direction="up" scrollamount="15" scrolldelay="600"><font color="#00ffff">フォントサイズ 15px 速度 15 時間間隔 600</font></marquee></td></tr></table>フォントサイズ 10px 速度 10 時間間隔 200・400・600<table border="0" width="600" height="10" align="center"><tr><td><marquee style="font-size:10px;" height="10" behavior="scroll" direction="up" scrollamount="10" scrolldelay="200"><font color="#ffff00">フォントサイズ 10px 速度 10 時間間隔 200</font></marquee></td></tr></table><table border="0" width="600" height="10" align="center"><tr><td><marquee style="font-size:10px;" height="10" behavior="scroll" direction="up" scrollamount="10" scrolldelay="400"><font color="#ff00ff">フォントサイズ 10px 速度 10 時間間隔 400</font></marquee></td></tr></table><table border="0" width="600" height="10" align="center"><tr><td><marquee style="font-size:10px;" height="10" behavior="scroll" direction="up" scrollamount="10" scrolldelay="600"><font color="#00ffff">フォントサイズ 10px 速度 10 時間間隔 600</font></marquee></td></tr></table>
2005年01月05日
コメント(1)
-
フリーページの自動改行 や 日記ページで テーブル（ table ）を使う
フリーページの自動改行 や 日記ページでtableタグ を使う場合は 改行に注意 が必要です。テーブルの指定 <table>～</table>横１列の指定 <tr>～</tr>セルの指定 <td>～</td>などの指定項目が多くなります。ＨＴＭＬタグの書き方により上部に空白ができます。フリーページの場合 編集タイプは２種類あります。日記ページの場合 編集タイプを選択できません。フリーページ 自動改行（初心者向け）「 自動改行 」は、入力したとおりに表示されます。空白文字や改行がそのまま反映されます。タグを繋げて書かないと上部に空白ができます。テーブル（２行２列）の記述例赤色はタグを繋げて書く部分上部に空白ができません赤色はタグ部分緑色は自動改行される部分９行分上部に空白ができます<table><tr><td>１行１列目の内容</td><td>１行２列目の内容</td></tr><tr><td>２行１列目の内容</td><td>２行２列目の内容</td></tr><table><table> 自動改行１<tr> 自動改行２<td>１行１列目の内容</td> 自動改行３<td>１行２列目の内容</td> 自動改行４</tr> 自動改行５<tr> 自動改行６<td>２行１列目の内容</td> 自動改行７<td>２行２列目の内容</td> 自動改行８</tr> 自動改行９</table>フリーページ 自動改行なし（ <BR>タグで指定 ）「 自動改行なし 」は、改行したい位置に<BR>タグを記述します。空白文字は、無視されます。タグを繋げて書かなくても上部に空白はできません。日記ページの場合編集タイプを選択できませんが 自動改行 の設定です。タグを繋げて書かないと上部に空白ができます。自動改行でのテーブル位置の違いの例 （３種類のタグ記述）フリーペｰジで 自動改行なし を選択した場合 いずれも空白はできません。番号高さ表示テーブル幅 １４８上部の空白 と ＨＴＭＬタグ１テーブル高２０８1-11-21-32-12-22-33-13-23-3ＨＴＭＬタグを繋げて書いた場合空白はできない<table border="5" bordercolor="blue" width="148" height="208" cellpadding="5" cellspacing="3" bgcolor="#ccccff"><tr><td width="30" height="50" bgcolor="#ffffcc">1-1</td><td width="30" bgcolor="#ffcccc">1-2</td><td width="30" bgcolor="#ffccff">1-3</td></tr><tr><td height="50" bgcolor="#ffcccc">2-1</td><td bgcolor="#ffccff">2-2</td><td bgcolor="#ffffcc">2-3</td></tr><tr><td height="50" bgcolor="#ffccff">3-1</td><td bgcolor="#ffffcc">3-2</td><td bgcolor="#ffcccc">3-3</td></tr></table>２テーブル高２０８1-11-21-32-12-22-33-13-23-3ＨＴＭＬタグを１行毎に書いた場合４行空白ができる１行毎に色を変えています<table border="5" bordercolor="blue" width="148" height="208" cellpadding="5" cellspacing="3" bgcolor="#ccccff"><tr><td width="30" height="50" bgcolor="#ffffcc">1-1</td><td width="30" bgcolor="#ffcccc">1-2</td><td width="30" bgcolor="#ffccff">1-3</td></tr><tr><td height="50" bgcolor="#ffcccc">2-1</td><td bgcolor="#ffccff">2-2</td><td bgcolor="#ffffcc">2-3</td></tr><tr><td height="50" bgcolor="#ffccff">3-1</td><td bgcolor="#ffffcc">3-2</td><td bgcolor="#ffcccc">3-3</td></tr></table>３テーブル高２０８1-11-21-32-12-22-33-13-23-3ＨＴＭＬタグをセル毎に書いた場合１６行空白ができる１行毎に色を変えています<table border="5" bordercolor="blue" width="148" height="208" cellpadding="5" cellspacing="3" bgcolor="#ccccff"><tr><td width="30" height="50" bgcolor="#ffffcc">1-1</td><td width="30" bgcolor="#ffcccc">1-2</td><td width="30" bgcolor="#ffccff">1-3</td></tr><tr><td height="50" bgcolor="#ffcccc">2-1</td><td bgcolor="#ffccff">2-2</td><td bgcolor="#ffffcc">2-3</td></tr><tr> <td height="50" bgcolor="#ffccff">3-1</td><td bgcolor="#ffffcc">3-2</td><td bgcolor="#ffcccc">3-3</td></tr></table>
2005年01月04日
コメント(7)
-
スクロールの速度を変えて点滅しているように表示 ★ 表示されない時は再表示して見てね
スクロールの速度を変えて点滅しているように表示してみましょう。今回はテーブル幅６００px ６行表示 に指定してみます。フォントサイズ毎にスクロールする速度を変えて複数表示しています。スクロールする速度によって再表示する時間間隔を変えています。 ＨＴＭＬタグは２日の日記を参考にしてください。フォントサイズ 20ptフォントサイズ 20pt 速度 20 時間間隔 120フォントサイズ 20pt 速度 20 時間間隔 120フォントサイズ 20pt 速度 20 時間間隔 120フォントサイズ 20pt 速度 20 時間間隔 120フォントサイズ 20pt 速度 20 時間間隔 120フォントサイズ 20pt 速度 20 時間間隔 120 フォントサイズ 20pt 速度 25 時間間隔 150フォントサイズ 20pt 速度 25 時間間隔 150フォントサイズ 20pt 速度 25 時間間隔 150フォントサイズ 20pt 速度 25 時間間隔 150フォントサイズ 20pt 速度 25 時間間隔 150フォントサイズ 20pt 速度 25 時間間隔 150 フォントサイズ 20pt 速度 30 時間間隔 90フォントサイズ 20pt 速度 30 時間間隔 90フォントサイズ 20pt 速度 30 時間間隔 90フォントサイズ 20pt 速度 30 時間間隔 90フォントサイズ 20pt 速度 30 時間間隔 90フォントサイズ 20pt 速度 30 時間間隔 90 フォントサイズ 18ptフォントサイズ 18pt 速度 20 時間間隔 200フォントサイズ 18pt 速度 20 時間間隔 200フォントサイズ 18pt 速度 20 時間間隔 200フォントサイズ 18pt 速度 20 時間間隔 200フォントサイズ 18pt 速度 20 時間間隔 200フォントサイズ 18pt 速度 20 時間間隔 200 フォントサイズ 18pt 速度 25 時間間隔 420フォントサイズ 18pt 速度 25 時間間隔 420フォントサイズ 18pt 速度 25 時間間隔 420フォントサイズ 18pt 速度 25 時間間隔 420フォントサイズ 18pt 速度 25 時間間隔 420フォントサイズ 18pt 速度 25 時間間隔 420 フォントサイズ 18pt 速度 30 時間間隔 100フォントサイズ 18pt 速度 30 時間間隔 100フォントサイズ 18pt 速度 30 時間間隔 100フォントサイズ 18pt 速度 30 時間間隔 100フォントサイズ 18pt 速度 30 時間間隔 100フォントサイズ 18pt 速度 30 時間間隔 100 フォントサイズ 14ptフォントサイズ 14pt 速度 15 時間間隔 130フォントサイズ 14pt 速度 15 時間間隔 130フォントサイズ 14pt 速度 15 時間間隔 130フォントサイズ 14pt 速度 15 時間間隔 130フォントサイズ 14pt 速度 15 時間間隔 130フォントサイズ 14pt 速度 15 時間間隔 130 フォントサイズ 14pt 速度 20 時間間隔 600フォントサイズ 14pt 速度 20 時間間隔 600フォントサイズ 14pt 速度 20 時間間隔 600フォントサイズ 14pt 速度 20 時間間隔 600フォントサイズ 14pt 速度 20 時間間隔 600フォントサイズ 14pt 速度 20 時間間隔 600 フォントサイズ 14pt 速度 25 時間間隔 109フォントサイズ 14pt 速度 25 時間間隔 109フォントサイズ 14pt 速度 25 時間間隔 109フォントサイズ 14pt 速度 25 時間間隔 109フォントサイズ 14pt 速度 25 時間間隔 109フォントサイズ 14pt 速度 25 時間間隔 109 フォントサイズ 12ptフォントサイズ 12pt 速度 15 時間間隔 220フォントサイズ 12pt 速度 15 時間間隔 220フォントサイズ 12pt 速度 15 時間間隔 220フォントサイズ 12pt 速度 15 時間間隔 220フォントサイズ 12pt 速度 15 時間間隔 220フォントサイズ 12pt 速度 15 時間間隔 220 フォントサイズ 12pt 速度 20 時間間隔 100フォントサイズ 12pt 速度 20 時間間隔 100フォントサイズ 12pt 速度 20 時間間隔 100フォントサイズ 12pt 速度 20 時間間隔 100フォントサイズ 12pt 速度 20 時間間隔 100フォントサイズ 12pt 速度 20 時間間隔 100
2005年01月03日
コメント(0)
-
スクロールの速度を変えて点滅しているように表示 ★ 表示されない時は再表示して見てね
スクロールの速度を変えて点滅しているように表示してみましょう。今回はテーブル幅５００px ６行表示 に指定してみます。フォントサイズによってテーブル高さを変えています。スクロールする速度 と 再表示する時間間隔 を変えています。 フォントサイズ 24pt のＨＴＭＬタグ<table border="0" width="500" height="35" align="center"><tr><td><marquee style="font-size:24pt;" height="35" behavior="scroll" direction="up" scrollamount="35" scrolldelay="85"><font color="#00ffff">style="font-size:24pt;"</font><BR><font color="#ff00ff">height="35"</font><BR><font color="#ffff00">behavior="scroll"</font><BR><font color="#00ff00">direction="up"</font><BR><font color="#0000ff">scrollamount="35"</font><BR><font color="#ff0000">scrolldelay="85"</font> </marquee></td></tr></table>フォントサイズ 20pt のＨＴＭＬタグ<table border="0" width="500" height="30" align="center"><tr><td><marquee style="font-size:20pt;" height="30" behavior="scroll" direction="up" scrollamount="25" scrolldelay="150"><font color="#00ffff">style="font-size:20pt;"</font><BR><font color="#ff00ff">height="25"</font><BR><font color="#ffff00">behavior="scroll"</font><BR><font color="#00ff00">direction="up"</font><BR><font color="#0000ff">scrollamount="25"</font><BR><font color="#ff0000">scrolldelay="150"</font> </marquee></td></tr></table>フォントサイズ 18pt のＨＴＭＬタグ<table border="0" width="500" height="25" align="center"><tr><td><marquee style="font-size:18pt;" height="25" behavior="scroll" direction="up" scrollamount="25" scrolldelay="420"><font color="#00ffff">style="font-size:18pt;"</font><BR><font color="#ff00ff">height="25"</font><BR><font color="#ffff00">behavior="scroll"</font><BR><font color="#00ff00">direction="up"</font><BR><font color="#0000ff">scrollamount="25"</font><BR><font color="#ff0000">scrolldelay="420"</font> </marquee></td></tr></table>フォントサイズ 14pt のＨＴＭＬタグ<table border="0" width="500" height="20" align="center"><tr><td><marquee style="font-size:14pt;" height="20" behavior="scroll" direction="up" scrollamount="20" scrolldelay="600"><font color="#00ffff">style="font-size:14pt;"</font><BR><font color="#ff00ff">height="20"</font><BR><font color="#ffff00">behavior="scroll"</font><BR><font color="#00ff00">direction="up"</font><BR><font color="#0000ff">scrollamount="20"</font><BR><font color="#ff0000">scrolldelay="600"</font> </marquee></td></tr></table>フォントサイズ 12pt のＨＴＭＬタグ<table border="0" width="500" height="20" align="center"><tr><td><marquee style="font-size:12pt;" height="20" behavior="scroll" direction="up" scrollamount="15" scrolldelay="220"><font color="#00ffff">style="font-size:12pt;"</font><BR><font color="#ff00ff">height="20"</font><BR><font color="#ffff00">behavior="scroll"</font><BR><font color="#00ff00">direction="up"</font><BR><font color="#0000ff">scrollamount="15"</font><BR><font color="#ff0000">scrolldelay="220"</font> </marquee></td></tr></table>
2005年01月02日
コメント(3)
-
あけましておめでとうございます ★ 表示されない時は再表示して見てね
１月 カレンダーSunMonTueWedThuFriSat１２３４５６７８９１０１１１２１３１４１５１６１７１８１９２０２１２２２３２４２５２６２７２８２９３０３１あけましておめでとうございます。今年もよろしくお願い致します。
2005年01月01日
コメント(9)
全31件 (31件中 1-31件目)
1
