HTMLの練習　中級編！
Internet Explorerでも
Netscape Navigatorでも
同じ大きさのフォントで表示!

これがスタイルシートです。インターネットエクスプローラーでもネットスケープにおいても初期設定が異なっているのでどちらで開いてもちゃんと同じイメージで見れるよう解決するためにスタイルシートを使用します。上記のものはSIZE1のときは１CMで作ってね！って言う指示をしました。つぎはSIZE2のときは20ptで！という指示をします。

SIZE2の設定を指示しました。
その指示に中央寄せを使用しているだけです。

最初に設定しているだけでSIZEの指示をださなければこのように普通のまま表示されます。この場合、SIZE1や2の二つだけですが、いくつでも設定できます。また1や2でなくともAやBでも大丈夫です。サイズの大きさの設定もcm・mm・px・%・exと色々あります。次のページにおいてでも使用してみようと思います。

前回の復習もかねてフォントカラーについてやってみようとおもいます。初級編においてはこのようにPINKのように色をそのまま指定しましたが、今回は16進数のカラーコードを指定する方法をやってみます。

このような用事の仕方の2通りあります。16進数のコードにおいてはカラーチャートを探してください。書きなぐるのが容易じゃないんで・・・・・・使い方は今まで色の指定をしていた所に暗号じみたこのカラーコードを入力するだけです。FONTSIZEと併用してみました。次に行きます。

項目の設定です。

毎回項目においてフォントの色大きさを設定するのはめんどくさいのでこれもまたスタイルシートを使用して設定します。 HTMLソースのHEADの下の部分にkoumokuの設定があるのが分かると思います。ではkoumoku2を使ってみます。

これがkoumoku2です。

色が上記の項目より大きく、また色も赤を指定していますのでこのように表示されています。これにおいてもフォントのスタイルシート同様1，2・・・・でもA・B・・・・でもOKです！

線の使用

前回同様、下線はＵタグですが、取り消し線は~~こんな感じで~~ｓタグを使用します。ｓでなくともstrikeでも同様です。しかし、将来的にこのタグはなくなってしまいそうらしいので、スタイルシートを使用したほうがいいそうです。中級2でやってみようと思います。では、次です。

これがページのキーワード！

ロボット型検索エンジンはこのHタグによってホームページの情報を取得して検索をしているそうなので、検索に引っかかるようなタイトルを使用し、毎回使用するようなタグではありません！と言う事です。

HTMLのテキストをそのまま表示！

preタグで囲まれたテキストはスペース・改行がそのまま表示されます。次の通りです。


　　　　■　　　　■　■　■　　　　■　　　　　■　　　■■
　　　　■■　　　■　■　■■　　　■　　　　　■　　■　　■　
　　　　■　■　　■　■　■　■　　■　　　　　■　　■　　■
　　　　■　　■　■　■　■　　■　■　■　　　■　　■■■■
　　　　■　　　■■　■　■　　　■■　■　　　■　■　　　　■
　　　　■　　　　■　■　■　　　　■　　■■■　　■　　　　■

　　　　私のバイクは
　　　　　　　　　ＧＰＺ９００Ｒ
　　　　　　　　　　　　　　　ＮＩＮＪＡの
　　　　　　　　　　　　　　　　　　　　Ａ１です。

このようになります。フォント的に文字の見た目は悪くなります。上のフォントとこの文章のフォントを比べると多少上記のほうが小さいような感じです。これは等幅フォントが使用されているからです。

スクロールでのインパクト！

marpueeタグを使用するとこのようにインパクトを与えられます。このほかSLIDE（スクロールが端までいくと止まる）・ALTEMATE（スクロールが前後する）などがあります。alignがbottomとなっているのは下に文字列をあわせてスクロールの意味！widthが80％というのはブラウザ全体を100％とした割合！behavior（振る舞い）はスクロールになってます。directionはどの方向へながすか。loopは何回繰り返すか？この数字をinfiniteとすると無限に繰り返します。scrollamountはスクロールの早さで、数字が小さければ小さいほど遅く動きます。。そしてbgcolor・fontについてはいつもどおりです。

上のデータをleftからupに変えてみました。かなりみにくいです。これに色々BRタグでかきこんでいって映画のエンディングもどきがつくれそうだ！

四方向、上下左右とスクロールさせてみました！四方向だけでなく上と右を使えば右上にスクロールもします。下とひだりなら左下にスクロールというわけです。しかし斜めへのスクロールは試してみましたがかなりみくくくてやめたほうがいいでしょう！

チョットかっこいいかも？でしょ。こんなスクロール画面。言語で書いているのでデータ的にも軽々ですし！これをホームページビルダーのWebアニメーションなどで制作したらかなりのデータ量になると思います。現に私のマシーン1/2においては開きが遅すぎる！なぜなら30枚以上ものjpg画像を使ってアニメーション化させているからです。

これが「カチッ」っととまる方のslideです。

そのほかscrolldelayというスクロールの間隔を決めるものもありますが、やりすぎてもなんなので・・・・というより覚えきれるのかな？ってかんじでしょ！

HTML中級の練習　②へ！