ホームページを多彩にするページ

    コンピュータの広場   HP作成教室＞

　

　

　

　

上は、「ダイナミックHTML効果を使って、テキスト、画像を表示する」例です。再度、効果を確認する場合は、F5キー（＝[表示Menu]―[最新の情報に更新]）を押してください。

こちらからコピーしてください。 さらに、下のanimate.ｔｘｔを右クリックし（開かない、左クリックはだめ）、「対象をファイルに保存」を選び、「animate.js」に名称変更し、自分のhtml内に格納し、アップロードしてください。 →animate.txt 　

　

他のブラウザでは、正常に表示されない場合があります。）

  • 画像を自動的に動かす
  • 画像を背景にする
  • 検索エンジンのヤフーとグーグルを設置する
  • ダイナミックHTML効果を使って、ページを表示する→ この上トップ
  • 表：800ピクセルで、罫線なしの表をつくる
  • 表：写真の右側に説明文が来るように表をつくる
  • ホバーをかける（テキストにマウスを乗せると色が変わる）
  • フォントサイズ(文字の大きさ)を指定する
  • ページの切り替え効果を使用する
  • マーキーをかける（文字をスクロールさせる）
  • 文字にグラデーションをかける
  • 文字にフィルターをかける
  • 文字を反転させる

  • ルビをふる

　

CSSのページ に下はあります。

  • 全ページのスタイルを一括記述する

  • リンクテキストのアンダーラインを表示しない

  • リンク文字にマウスを乗せると色が変わる

　

ジャバスクリプト（JS）のページ も参照してください。

　

その他

  • 無料カウンタを設置する。 →    カウンタYahoo!

  • 無料掲示板を設置する。→  掲示板 Yahoo!

　

画像を自動的に動かす  

 こちらからコピーしてください。

　

この kumablue.gifの絵 を、G-TOOL などを参考にして、 他のgifに変えて使ってください。

　

画像を背景にする

背景をタージマハールにしてみました。

好みの画像を背景にするには、下の"../mas/97in34.jpg" を変更します。その際、画像を自分のサイトに保存し、アップロードすることを忘れないでください。

<body onload="func()" background="../mas/97in34.jpg" bgproperties="fixed">

　

こちらからコピーしてください。

→ G-TOOL の「バックグラウンド」

→ 検索は「素材 背景」で。

検索エンジンのヤフーとグーグルを設置する
   
            

 こちらからコピーしてください。

スクリプト全体を <!-- と // --> でコメントアウトしてください。// を書き忘れると、Netscapeなどの ブラウザでエラーとなってしまいます。
表：800ピクセルで、罫線なしの表をつくる

　

この表の中に、自分の作品、テキストをいれると見やすくなります。

　

クマ研のディレクトリが、800ピクセルです。

クマ研のトップは、画像性能の悪いコンピュータでも表示できるように640ピクセルにしてあります。このページの表も640ピクセルです。640ならば携帯にも表示することができます。

こちらからコピーしてください。

　

ダイナミックHTML効果を使って、ページを表示する → この上トップ

表：写真の右側に説明文が来るように表をつくる

　

640ピクセルの表に、2列の表をはめ込みました。

　

原理は次の通りです。

1 1行1列の表をつくります。

2 その中に、1行2列の表を挿入します。

3 左のコラムに写真を、右側に説明文を挿入します。

　

こちらからコピーしてください。

ホバーをかける（テキストにマウスを乗せると色が変わる ） IEで閲覧してください。

「学問の広場」をポイントしてください。

  学問の広場
　

こちらからコピーしてください。

「学問の広場」を他の文字に変えて使用してください。

　

フォントサイズ(文字の大きさ)を指定する

例

<font size=1>の文字  
<font size=2>の文字  
<font size=3>の文字＝規定値  
<font size=4の文字  
<font size=5>の文字  
<font size=6>の文字  
<font size=7>の文字

　

こちらからコピーしてください。

何も指定しないとフォントサイズは3になります。
ページの切り替え効果を使用する

こちらからコピーしてください。

ブレンド：現在のページが次第に消えていき、新しいページが徐々に表示されます。

ボックスイン：現在の四角いページが次第に消えてい行きます。

ボックスアウト：

サークルイン：

サークルアウト：

上へワイプ：

下へワイプ：

右へワイプ：

左へワイプ：

たてにブラインド：

よこにブラインド：

ヨコにチェッカー：

下にチェッカー：

ランダム ディゾルブ：

左右から結合：

左右に分割：

上下から結合：

上下に分割：

左下へストリップ：

左上へストリップ：

右下へストリップ：

右上へストリップ：

水平ランダムバー：垂直ランダムバー：

ランダム：

　

マーキーをかける（文字をスクロールさせる）  IEで閲覧してください。

　
このページで、ホームページを多彩にしましょう。 ＼(^ω^)／♪ 　(^_-) 　　

　

こちらからコピーしてください。

marquee[マーキ＾ー]とは、もともとは劇場などの玄関入り口のひさしのことで、題名や出演者名をここに掲げておりました。

文字にグラデーションをかける

画像を利用せずに、タグだけでグラデーションをかける方法です。文字を変更してください。

色 彩 の ペ ー ジ 　 （ カ ラ ー の ペ ー ジ ） 　

 

こちらからコピーしてください。

ＲＧＢ値（カラー属性）については、色彩のページ を参照してください。
文字にフィルターをかける　
　

動く キーボード のページ

　

こちらからコピーしてください。

さらに、細かい設定は次のようにします。

Waveは、「動く」のように波を打った効果をだします。Freq=2は波の数です。LightStrength=50は波の明暗を指定します。Strength=4は波の大きさを指定します。

Shadowは、「キーボード」のように尾を引いた効果をだします。Direction=255は尾が伸びる方向を角度で指定しています。真上が0度です。

DropShadowは、「のページ」のように影をつけます。OffX=5は下方向の距離を、OffY=5は右方向の距離をあらわします。Positive=1は影が不透明であることをあらわします。
文字を反転させる：　

秋葉原のページ


こちらからコピーしてください。

タグだけを使った反転文字です。

ルビをふる

　

順風 満帆じゅんぷう まんぱん

 

こちらからコピーしてください。

<HEAD>〜</HEAD>に、<STYLE TYPE="text/css">…</STYLE>を挿入します。

<BODY>〜</BODY>に、<TABLE>…</TABLE>を挿入します。