柴犬けんたの日記 Part2

スクロールバーの活用

普通のスクロールバー

<center><table width="440"><tr><td> <td> <table> <tr><td align="left" bgcolor="#FFFFFF"><p style="width:300px; height:200px;overflow:auto;text-align:left;padding:8px;border-style:solid;border-width:1px;border-color:#CCFFCC;scrollbar-bace-color:#FFFFFF;scrollbar-arrow-color:#CCFFCC;scrollbar-face-color:#22AA21;scrollbar-3dlight-color:#CCFFCC;scrollbar-darkshadow-color:#FFFFFF;scrollbar-shadow-color:#CCFFCC">
　文章や
　画像とか
　なんでも書いて
　大丈夫
　工夫すれば
　いろんなことが
　できるね</p></td></tr></table> </td></tr></table></center>

文章や

　画像とか

　なんでも書いて

　大丈夫

　工夫すれば

　いろんなことが

　できるね

背景画像つきスクロールバー

<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.4;width:400px;background: url(http://背景画像.jpg) no-repeat center center;"><div style="margin:0px;padding:10px;line-height:1.4;overflow:auto;font-family:'HG丸ｺﾞｼｯｸM-PRO','HGP創英角ﾎﾟｯﾌﾟ体','ＭＳＰゴシック',Osaka;text-align:center;font-size:160%;height:280px;">

　柴犬けんたの日記　以下、文字画像など普通に書いていくのだ</div></div></div>

　url(http://背景画像.jpg) の( )の中が、背景画像のアドレスだよ。http://～背景画像.jpgまでの部分を入れるんだ。

　フォントは好きなフォントを入れるといいね。familyのすぐ後ろの字体が適用されるよ。

練習　1

　柴犬けんたの日記

　は

　ん

　せ

　い

　し

　た

　か

　ら

　頂

　戴

練習　2

ワ
|
プ
!!

何食べてるの？・・・お母さん

えへへ posted by(C)Kenta

　ちょっと、遊んでみるヾ(＠^▽^＠)ﾉ

　スクロールにマーキーを組み合わせてみた。

<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.4;width:450px;background: url(http://art15.photozou.jp/pub/337/180337/photo/23167464.jpg) no-repeat center center;"><div style="margin:0px;padding:0px;line-height:1.4;overflow:auto;font-family:'HG丸ｺﾞｼｯｸM-PRO','HGP創英角ﾎﾟｯﾌﾟ体','ＭＳＰゴシック',Osaka;text-align:center;font-size:160%;height:360px;">
<marquee loop="1" direction="UP" height="300" scrolldelay="50" scrollamount="4" width="100%"><font size="5"><font color="#FFFFFF"><strong><DIV align=center>
　朝、起きて外を見たらほんの少しだけ雪が積もっていたのだ。

　寒い朝。今日は11月11日。

　11月1日が、わんわんわんで犬の日だったから、

　今日も犬の日に違いないと思って探したけど、

　どこにも載っていない。

<DIV align=center>
<img src="http://art21.photozou.jp/pub/337/180337/photo/29139693.jpg" alt="薄化粧" width="448" height="336" style="border:0" /><br />薄化粧 posted by(C)Kenta</DIV>

　庭の木は、ほんのり薄化粧

　おしまい

</font></strong></font></font></div></div></div></div></marquee>
</div style></div style>

　marquee loop="1"　の"1"は、繰り返す数字。なければ一回でお終い。"3"だと、3回繰り返すよ。

　朝、起きて外を見たらほんの少しだけ雪が積もっていたのだ。

　寒い朝。今日は11月11日。

　11月1日が、わんわんわんで犬の日だったから、

　今日も犬の日に違いないと思って探したけど、

　どこにも載っていない。

薄化粧 posted by(C)Kenta

　庭の木は、ほんのり薄化粧

　おしまい

　今までのところは、ここまでだよ。

　また、増やしていけるといいなあ。

HTMLの基本
文字の装飾
文字や画像の配置とまわりこみ
文字や画像を動かして遊ぼう
表をつくってかっこよくしてみよう
画像を使ってリンクするのだ
スクロールバーを活用してみた