← designg.info トップページに戻る(文字を中心にしたページ)← designg.info トップページに戻るdesigng.info トップに戻る→HTML トリック リスト一覧→ページにスパイス
サイトマップへ
サイトの使い方
カラフル・セレクティブその他(リンクなど)コミュニケーション(掲示板・ウェブログ)ダウンロードイントロデュースサイトのカラーリングアイディアノート ページにスパイス

ページにスパイス あなたのホームページをガラリと変えるテクニック達。

ホームページは、見るだけでなく、自分で作成して全世界に見てもらうことができるすばらしいメディア。 でも、ただ普通のホームページとして作るだけでは、なんだか味気なくないですか?

  • 「ただのホームページ・スタイルだとなんとなくもったいない」
  • 「みんなとちょっと変わった事を取り入れてみたい」
  • 「来てくれた人に少しでも楽しんでもらえる仕掛けを作りたい」

… そんな人へ、デザイングドットインフォも、(まだ少ないですが)いくつかのテクニックという形で、あなたのホームページ作りのお手伝いをいたします。 テクニックも、デザイン性に入っていると製作者は考えています。そして、これらのテクニックという「スパイス」をふりかけて、あなたのホームページ、もっともっと便利に、上品・驚きをプラスしてみてください!

リンク編
リンクの下線を消す

リンクをたどるには下線の入ってる文字をクリックするのが常識、という概念を一掃する、下線を表示していない文字にリンクを設定するテクニックです。
リンク先が1ページの中に非常に多いページにはすっきりと写ると思いますが、下線が入っていた方が分かりやすい場合もあるので、状況に応じて使い分けるようにしましょう。

ステータスバーに文字を挿入する

ブラウザの一番下にある「ステータスバー」。ここは通常はリンク先のアドレスやアクセスの状況を表示したりするのに使われます。ここに少し遊び心をプラスするテクニックです。
リンク先のアドレスの代わりに、わかりやすく日本語での説明を表示させることが出来る、という物です。
また、リンク先のアドレスも一緒に付け添えると、親切でわかりやすくなります。 

リンクの箇所にマウスを乗せて特定の部分にメッセージを出す

このテクニックは、各リンク先にマウスカーソルを乗せると、同じページ内の指定された場所の文字が入れ替わる、というテクニックです。ここで紹介する「onMouseover」や「onMouseout」といったタグを使います。応用すれば、対象となるアイテムは文字だけでなく、画像も利用可能になります。 

表示編
スクロールバーの色を変える

Windowsのインターネットエクスプローラー バージョン5.5〜のみの対応となる、少し特殊なテクニックです。ブラウザのスクロールバーに構成されている各部分、合計8つのパーツの色を、自由自在に色替えをすることが出来ます。
これはwindows XPでも利用可能。このテクニックを使ったページでは、XP独特の水色のスクロールバーの代わりに、色の設定がされたスクロールバーが現れます。
ただし、この技はインターネットエクスプローラー以外のブラウザや、他のOSでは全く反映しないので、全てのユーザーにお勧め、という類には含まれませんので、あしからず。 

タイトルバーの文字をスクロールする

タイトルバーの文字をスクロールさせ、動きのあるページを作る技です。
タスクバーでの文字の表示も一緒にスクロールするので、とにかく目立ちます。
このテクニックはタイトルが長いページに使えば、より効果的です。
 

画像データを一定時間ごとに切り替えて表示する

あらかじめ用意しておいた数枚の画像を、一定時かごとに交代して表示させるテクニックです。
この特徴は、GIFアニメーション画像と違い、それぞれ別の画像として読み込ませてから一定時間ごとに切り替えるので、画像としてのサイズの重さがあまり気にならなくなります。
 

ページを自動でスクロールする

このテクニックは、適用したいページの縦の長さと一回ごとにスクロールする分の大きさ、スクロールごとの間隔の3つの数値を入れることで、ブラウザーで自動的にスクロールをさせる、という物です。
長文の読み物の時に、いちいちスクロールをさせずにじっくりと読めます。

指定した文字列に独自のカーソルで表示する

指定した文字列の上にマウスポインタを載せると、あらかじめ作っておいたオリジナルのカーソルを呼び出し、表示させることが出来るテクニックです。
ここぞ、といった時に分かりやすいガイドの代わりに、使ってみませんか?

背景画像を用意せずに背景をグラデーション化させる

これはグラデーションの向きと、開始の色、終了の色、この3つを指定することで、自由自在にグラデーションを欠けられるテクニックです。わざわざグラデーションの画像を用意しなくてすむのは非常にメリットの高いものです。

文字の均等割付をする NEW

皆さんは、普段は文字をどのように揃えていますか?
ホームページというメディアは基本的に全世界が対象にする、見る・見られる情報発信のため、横書きが基本です。日本国内のみを対象にした、日本独特の「縦書き」のサイトもありますが、ここでは横書きに焦点を絞った「文字の揃え」に関するテクニックです。
普通は「左揃え」「中央揃え」「右揃え」の3種類しかないと思われがちですが(実際に制作ソフトでも3種類から選択になっている物が多いです)、Internet Explorerのバージョン5以上からの拡張スタイルシートに「均等割り付け」をサポートしているのです。
このテクニックではそういった均等割り付けを文字に適応する方法をご紹介。

メール編
メールにリンクする時に自動で件名と内容を追加する

メールアドレスをクリックすると、メールソフトが開く・・・そこから先の「件名」と「内容」の文字をあらかじめ入力された状態にする、というテクニックです。
これはメールを送る内容が決まっているときに、特に威力を発揮します。なんと言ったって、「件名は『あなたが行きたい宇宙旅行の場所とその値段について』、本文は『このサイトで募集していた宇宙旅行の件についてメールします』から書き始めて下さい」といった記述文を載せなくていいわけなのですから。

ブラウザの対応と
参考ページへのリンク
各テクニックのタイトルの下に、このテクニックがきちんと表示されるかの、ブラウザ対応の表記をしてあります。参考にどうぞ。
参考先マークのあるものはそのテクニックに関する参考ページへのリンクを別ウインドウで表示できるようになっています。

ページの上へ
このサイトの制作者、takkaについて。これから先にこのサイトに掲載する予定の企画やコンテンツをこのページで紹介していますインフォメーションメールの受付やオンラインの確認はこちらからどうぞサイトマップへ
コピーライト