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

Purple town

Purple town

おまけ

●タグ使いの小技●

自分好みのレイアウト。実は他のブラウザーで見るとレイアウトが崩れている可能性もあります。
WindowsでOKなレイアウトでもMacintoshでみるとNG(その逆もあり)というのもよく見かけます。特に画像が文字にかぶってたりすることしばし(涙)
だからこそ私はテーブルタグを利用することをお勧めします。
最初に制限枠を作ってからタグなりスタイルなりを入れていくと極端に崩れることがないからです。

私はWindowsもMacintoshも両方使っているので特にそういうのが気になっちゃうんですよね(^^;
基本はあくまでも↓です

<TABLE><!--テーブル開始 -->
<TR><!--セル列開始 -->
<TD><!--セル行開始 -->
</TD><!--セル行終了 -->
</TR><!--セル列終了 -->
</TABLE><!--テーブル終了 -->

レイアウトに迷ったらテーブルを組んでみてください。
後は好みに応じて大きさを変えたり色を付けたり装飾したり。

こんなことも
やってみたり

講座ではやってませんが動く文字「marquee」。

<div style="border:solid 1px #90eeaa;padding:2px;width:341px;">
<marquee width="335" scrollamount="1" scrolldelay="10" style="font-size:10pt;color:#339966">
電光掲示板のように文字が流れます。スピードは1。IE専用なのでNNでは見れません。
</marquee>
</div>

電光掲示板のように文字が流れます。スピードは1。IE専用なのでNNでは見れません。

<div style="border:solid 1px #90eeaa;padding:2px;width:341px;">
<marquee width="335" scrollamount="10" scrolldelay="10" style="font-size:10pt;color:#339966">
『scrollamount』は、数値が大きいほど早くなります。
</marquee>
</div>

『scrollamount』は、数値が大きいほど早くなります。

<div style="border:solid 1px #90eeaa;padding:2px;width:341px;">
<marquee width="335" behavior="alternate" scrollamount="10" scrolldelay="10" style="font-size:10pt;color:#339966">
『scrolldelay』は、数値が小さいほど壁に吸収されるように見えます。
</marquee>
</div>

『scrolldelay』は、数値が小さいほど壁に吸収されるように見えます。

<div style="border:solid 1px #90eeaa;padding:2px;width:341px;">
<marquee width="335" behavior="alternate" scrollamount="10" scrolldelay="200" style="font-size:10pt;color:#339966">
『behavior="alternate"』文字が跳ね返ってきます。
</marquee>
</div>

『behavior="alternate"』文字が跳ね返ってきます。

<div style="border:solid 1px #90eeaa;padding:2px;width:341px;">
<marquee width="335" behavior="slide" scrollamount="10" scrolldelay="200" style="font-size:10pt;color:#339966">
『behavior="slide"』文字が到着地点で止まります。
</marquee>
</div>

『behavior="slide"』文字が到着地点で止まります。

<div style="border:solid 1px #90eeaa;padding:2px;width:341px;">
<marquee width="335" height="30" behavior="alternate" scrollamount="3" direction="up" style="font-size:10pt;color:#339966">
『direction="up"』文字が上下移動します。
</marquee>
</div>

『direction="up"』文字が上下移動します。

<div style="border:solid 1px #90eeaa;padding:2px;width:341px;">
<marquee width="335" height="30" behavior="scroll" scrollamount="3" direction="down" style="font-size:10pt;color:#339966">
『behavior="scroll"』文字が縦にスクロールします。
</marquee>
</div>

『behavior="scroll"』文字が縦にスクロールします。


おまけ
アワワ ヽ(´Д`;≡;´Д`)丿 アワワ


* * * * * *

(((( ;゜Д゜)))ガクガクブルブル


© Rakuten Group, Inc.