ホームページ製作に関連する質問や情報集です。

画像を透明にするにはどうするの?
画像のアドレスってどういうもの?
C:\Documents and Settings\○○○ というアドレスって、一体何?
電光掲示板(流れる文字の応用)の文字の流れるスピードを遅く(速く)するには?
同じページ内をジャンプするリンクを作るには?
スクロールバーを透明にするには?
入力した文字が全部反対になるというタグは?
ホームページにカウンターを設置するにはどうすればいいの?

Q.画像を透明にするにはどうするの?
A.画像作成時に透明色を設定しておくことをおすすめします。

ホームページなどに使う画像の場合、通常は、画像ファイルに透明色も付けておきます。
使用するソフトによって設定方法が違うので、方法が分からない場合は、ソフトの説明書やヘルプなどを見ると、分かることがあります。
(注意:ソフトウェアによっては、透明色を設定する機能を備えていない場合があります)

また、透明色を設定できるソフトを使用している場合、透明にしたい色と設定した色が少しでも異なると、透明にならないので、白や黒、青緑など、単純な色を使用すると、こうした失敗が減らせるのではないかと思います。

これらの方法を利用しない場合、他に違うやり方としては、ホームページの背景の色と同じ背景の色の画像を作成し、背景に溶け込ませるという方法があります。ただし、そのページの背景の色を変えれば、合わなくなってしまい、画像を再作成しなくてはならず、その分大変です。
また、背景に画像を使用している場合は、表示環境(ウィンドウサイズ/ツールメニューの表示・非表示/ブラウザーソフトの設定・種類等)によってズレが起こるので、この方法では困難だと思われます。

ちなみに、ホームページに使用する画像の場合、透明色を付けられるフォーマットは GIF と PNG くらいです。JPEG ・ BMP フォーマットではできませんのでご注意ください。(BMP についてはWindows以外では表示されない可能性があります)



Q.画像のアドレスってどういうもの?
A.ホームページにそのページ用のアドレスがあるように、画像にもその画像のアドレス(URL)が存在します。

ホームページアドレスは、人それぞれ違います。アドレス部分をそのページのものに書き換えて使用してください。
※ここで紹介しているアドレスは架空のものです。

(例)『 http://www.○△□.ne.jp/ichigo.gif 
画像のアドレスは、.gif.jpgなどで終わります。これは、http://www.○△□.ne.jpというホームページに使われているいちごの画像のアドレス「ichigo.gif」です。このように、画像1つ1つには、画像のアドレス(URL)が存在します。
(画像のアドレスを確認する方法として、インターネット上にある画像にマウスカーソルを重ねて、右クリックなどをしてメニューを出して、プロパティを選びます。そのプロパティに表示されているアドレスが画像専用のアドレスとなります。そのアドレスをアドレスバーに入力すると・・・)

画像を表示させるには、このアドレスをそのまま書き換えてください。
【タグ見本】<IMG SRC="http://www.○△□.ne.jp/ichigo.gif">

アドレスが長くて書き換えるのが大変です!HTMLファイルと画像のファイルを同じフォルダ内に置くと、こういう方法でもできます。
【タグ見本】<IMG SRC="ichigo.gif">

このように、画像のファイル名(ichigo)と、どんな種類のファイルなのかを表す拡張子(.gif、写真などは.jpg)のみで表示することが可能です。

さらに高度な使い方……1つ上のフォルダにある画像を表示させるには、アドレスの部分を『../画像のファイル名.gif』に、さらに下のフォルダにある画像(但し、HTMLファイルと画像の入っているフォルダが同じ場所にあることが条件)を表示させるには、アドレス部分を『フォルダ名/画像のファイル名.gif』に書き換えます。



Q.C:\Documents and Settings\○○○ というアドレスって、一体何?
(OSの種類や設定によって異なります)
A.これは、パソコンの中のファイルで、他の人が見ることは出来ないので、ホームページ公開サービスなどを利用してください。

インターネット上にあるホームページは、http://○○〇 で始まるアドレスになっています。もしアドレスが、C:\○○○ で始まっている場合(Cドライブの場合)は、パソコン内のファイルになり、他の人からは見れません。(この場合の\は通貨単位ではなく、フォルダ名を区切る記号になります)

ホームページスペースにもいろいろあり、有料で貸し出しているものや、広告が付くが、無料で使えるものなどもあります。

まず、ホームページを公開するには、インターネット上にあるホームページスペース(Webサーバー)をレンタルする必要があるので、登録などを行う必要があります。
ホームページスペースに、HTMLファイルや、画像ファイルなどのデータをアップロード(送る)する事により、他の人でも見ることが出来ます。(入力するだけで簡単に作れるサービスなどもあるようです)
また、利用方法などもさまざまに異なりますので、詳しくは、サービスを提供しているサイトをご覧下さい。



Q.電光掲示板(流れる文字の応用)の文字の流れるスピードを遅く(速く)するには?
A.流れる速さを変えるには、「SCROLLAMOUNT」を使った方法がきれいに流れるのでおすすめです。

例えば…
<MARQUEE BGCOLOR="Black" SCROLLAMOUNT="2">
<FONT SIZE="2" COLOR="Lime">ここに電光掲示板に表示する内容を書きます〜★</FONT>
</MARQUEE>


SCROLLAMOUNT="2" の数字の部分を増やせば早くなって、減らせば遅くなりますので微調整が出来ます。


[さらに追加情報]
<MARQUEE STYLE="background-color:#000000" SCROLLAMOUNT="2">
<FONT SIZE="2" COLOR="Lime">ここに電光掲示板に表示する内容を書きます〜★</FONT>
</MARQUEE>

Netscapeの一部バージョン(7.1等)のソフトで見ると流れるとこが黒くならない場合がありますが、このようにスタイルシートを使うことで黒くなります。



Q.同じページ内をジャンプするリンクを作るには?
A.次の2種類のタグが必要になります。

同じページ内にある別の場所へジャンプするリンクの作り方は少し複雑になります。また、リンクとリンク先を関連付ける同一の名前を考える必要があります。(例の場合は「Q7」)

▼ 同じページへジャンプするリンクを作る
<A HREF="#Q7">リンクにしたい文字または画像</A>
(通常はリンク先のアドレスを入れますが、今回は同ページ間ということで最初に半角の「#」(シャープ)を入れ、続けて考えた名前「Q7」を入れます。)

【 使用例 】
<A HREF="#Q7">7.好きなアーティスト</A>


▼ リンク先(Q7)の設定
<A NAME="Q7">リンク先の文字または画像</A>
(これは設定しても見た目に変化はありません。但し、2つ以上リンク先を設定する場合、それぞれ異なる名前で設定しないと、思うように動かない場合があります。)

【 使用例 】
<A NAME="Q7">Q7.あなたの好きなアーティストは?</A>
私の好きなアーティストは○○です。


≪注意点≫
Q7」の部分は変更しても構いませんが、リンクとリンク先を関連付ける名前は同じにしてください。また、スクロールバーが出ていない場合は、リンク先が表示されているため、動作しない可能性があります。



Q.スクロールバーを透明にするには?
A.TEXTAREAなどで透明・半透明にすることが出来ます。

いつも横に出ているスクロールバーを透明にする事は(私の知っている限りでは)無理みたいですが、<TEXTAREA>のタグを使うことで出来るスクロールバーなら透かすことが出来ます。

半透明にするには、<TEXTAREA>などに STYLE="filter:alpha(opacity=50)" を付けてみてください。(知っている限りでは効果があったのはInternet Explorerのみ)

例えば…
<TEXTAREA COLS="40" ROWS="4" STYLE="filter:alpha(opacity=50)">データその1
データその2
データその3
データその4
データその5…</TEXTAREA>


(opacity=50) の、数字「50」の部分を変えると、好みに合わせて透明度を変えることが出来ます。(0〜100で、数字が小さいほど薄くなります。)

これで、中身が白っぽいのが気になる場合は、 background-color:transparent を付けて、中身を完全な透明にする事も出来ます。

例:
<TEXTAREA COLS="40" ROWS="4" STYLE="filter:alpha(opacity=50);background-color:transparent">データその1
データその2
データその3
データその4
データその5…</TEXTAREA>


(いつも横に出ているスクロールバーは、フレームやスタイルシート、Flashなどを使って透けているように見せることは出来るかもしれません。)


filter:chroma(color=スクロールバーの色) を使って、スクロールバーを透明にする方法
使用例
<TEXTAREA COLS="40" ROWS="4" STYLE="filter:chroma(color=#FFFFFF);scrollbar-base-color:#FFFFFF">データその1
データその2
データその3
データその4
データその5…</TEXTAREA>

スクロールバーのいろいろな部分の色を変えることでいろいろなパターンが出来ます。 【ソフト別タグ対応 Internet Explorer 6:○ Netscape 7.1:×】



Q.入力した文字が全部反対になるというタグは?
A.<BDO dir="rtl">あいうえお</BDO>

とすると「おえういあ」と表示されたりします。
(ちなみに、このタグはアラビア語など右から左へ書く文章があるためだと思われます)



Q.ホームページにカウンターを設置するにはどうすればいいの?
A.主に次のような方法があります。

ホームページにアクセスされた件数を表すカウンターについて、通常はレンタルのカウンターを利用する方法をおすすめします。こちらも参考にしてみてください。

● レンタルのカウンターを利用する
この場合、無料で使えるものと、お金が必要な物があり、ほとんどの場合、画像のデザインはいくつか種類がありますが決まっています。登録してから使いますが、たいていのサービスの場合、カウンターを使うために挿入するタグが書いてありますので、それをホームページ内に挿入するだけで使えます。
(無料のものは通常、広告表示やリンクが要求されます。)

● プログラムをホームページスペースに置く
プログラムがないとカウンターは動きません。そのプログラムはインターネット上で公開されていて、これを使用する場合、好きなデザインにできますが、CGIの使えるホームページスペースが必要で、CGIの知識もある程度ないと動かないので、難しく、上級者向けです。