HTMLタグ講座
© 2000–2011 Atelier TM. All rights reserved. |
基本はこのタグを使用します。
<A HREF=ジャンプ先のURL又はファイル名(画像）>表記文字</A>
御注意です！！必ず</A>で閉じてください。
URLはhttp://〜ですね。
※前の階層のファイルを指定する時は、../で指定します。例は、<a href="../main.html">
同じページ内にジャンプさせます。ジャンプさせたい部分のすぐ上あたりに、
A NAME= を使って重複しないよう名前をつけます。
タグはこれを使用します。
<A NAME="001">
</A>
例えばこのページのファイル名がlink.htmlで、飛ばしたいところが001ですと、次のようにします。
<A HREF="link.html#001">表記文字や画像</A>
html ファイルに＃をつけ、続いて NAME=
で決めた名前をつけるとその場所に移動できます。
最上部を、示す時は＃の指定はしなくてもいいですね。
フレーム内で、他のページにリンクさせるのは、
<A HREF=ジャンプ先のURL又はファイル名(画像）
>表記文字</A>です。
あるフレームのリンクをクリックして別のフレームに内容を出すとき…
たとえばこのコーナーのように左のフレームのメニューをクリックすると内容のページが変わるような仕組みは次のようにします。
まずフレームを決めるタグの中で、それぞれのフレームに名前をつけます。
名前は name=
オプションでつけることができます。
<FRAME src="menu1.html" name="menu"
>←メニューのフレーム名を menu
に
<FRAME src="page01.html" name="main"
>←内容のフレーム名を main に
そして menu1.html
のリンクを次のようにします。
<A href="page02.html" target="main"
>ページ２</A >
このように、リンク先のページを表示するフレームの名前を
target= で指定します。
フレームについては、フレームを参照してね。
target=
を使います。タグはこんな感じです。
リンク先を別窓で表示
<A HREF="URL"
target="_blank">ATELIER TM </A>
現ページをリンク先のページで置きかえる。フレームは解除されます。
<A HREF="URL"
target="_top">ATELIER TM </A>
_blank
は、別に好きな名前でもかまいません。
フレームの中から別サイトにリンクするときは、必ず
_blank か _top を指定してください。
フレーム解除の時は_topを使います。
タグの配列はこれです。画像背景のところにも書いてありますが・・・
<A HREF="リンク先の URL">画像のタグ </A> とします。例えばこんなふうです。
<A HREF="index.html"><IMG src="gazou.gif" width=10 height=15 ALT="トップ" border="0"></A>
画像タグに BOTDER=0 をつけると周囲にリンクの枠が出なくなります。
画像は width= height= でサイズを設定出来ます。
ALT= に続いてマウスが乗ったときに出す説明文を入れられます。
<A HREF="ファイルの URL ">テキストなど </A> とします。
タグの表記はこうなります。
<A HREF="http://www... /.../gazou.zip">gazou.zip(100KB)</A>
テキストにはファイル名やファイルサイズなど書いておくと親切ですね。
ネスケなど、LZH ファイルのダウンロードがうまくできないものもあります。
そのときは Shift を押しながらクリックしてもらうか、
一度解凍して頂いて、転送できるファイル名に圧縮しなおして
アップロードして頂きますと出来ます。
文字の前に<font color="カラーコード、色">で指定すれば色が優先的に変わりますね。タグです。
<A href="http://www....html"><FONT COLOR="blue">ATELIER TM</FONT></A>
またはスタイルシートで指定
<A href="http://www....html" STYLE="COLOR:blue">ATELIER TM</A>
BODY タグで一括指定
旧式のブラウザでもサポートされますが、色の優先順位は最下位になります。
<BODY bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#0000ff" alink="#0000ff">
link=(色)：リンクの色
vlink=(色)：訪問済みリンクの色
alink=(色)：リンクをクリックした瞬間の色・あまり使いません
スタイルシートで一括指定
BODY タグの指定より優先されます。<HEAD>〜</HEAD> の間に書きます。
<STYLE TYPE="text/css">
<!--
a:link {font-size: 10pt; color:blue } /*未訪問リンク */
a:visited {font-size: 10pt; color:blue } /*訪問済みリンク */
a:active {font-size: 10pt; color:blue } /*クリックしたとき */
a:hover {font-size: 10pt; color:blue } /*マウスが乗ったとき */
-->
</STYLE>
リンクをすべて 青色(blue) にし、フォントサイズを 10pt にします。
リンクすべてに同じ設定を適用するなら次のようにまとめちゃいます。
a {font-size: 10pt;color:blue }
上記のスタイルシートで text-decoration:none; を加えると出来ます。
例です。
スタイルシートでページ一括指定
<HEAD>〜</HEAD> の間に書きます
<STYLE TYPE="text/css">
<!--
a:link {font-size: 10pt;text-decoration:none; color:blue } /* 未訪問リンク */
a:visited {font-size: 10pt;text-decoration:none; color:blue } /* 訪問済みリンク */
a:active {font-size: 10pt;text-decoration:none; color:blue } /* クリックしたとき */
a:hover {font-size: 10pt;text-decoration:none; color:blue } /* マウスが乗ったとき */
-->
</STYLE>
リンクをすべて 青色(blue) にし、下線を消してフォントサイズを 10pt にします。
リンクすべてに同じ設定を適用するなら次のようにまとめます。
a {font-size: 10pt;text-decoration:none; color:blue }
ワンポイントで下線を消す
ひとつのリンクだけアンダーラインを消すには次のようにします。
<A HREF="abc.html" STYLE="text-decoration:none">ABC</A>
アンダーラインを出したいとき
この状態で ある部分的だけアンダーラインを出したいときは、そこを<UL>〜</UL> でくくるか、
<A href="http://www......html" STYLE="text-decoration:UNDERLINE">ATELIER TM</A>
のように明示的にアンダーラインを表示させます。
上記のスタイルシートのhoverの部分に、text-decoration:UNDERLINE;color:(色又はカラーコード) を付け加えます。
勿論、ほかの文字のリンクの属性は text-decoration:none; とし、hover と違う色にしておきます。
例です。リンクをすべて 青色(blue) にし、下線を消してフォントサイズを 10pt にします。
リンクにマウスが乗ったときだけアンダーラインを出し、リンクの文字色を赤にします
スタイルシートで一括指定します。
これも<HEAD>〜</HEAD> の間に書きます。
注意です！！hover は必ず a:link や a:visited の後に書いてください (CSS2 の仕様)。
<STYLE TYPE="text/css">
<!--
a:link {font-size: 10pt;text-decoration:NONE; color:blue } /* 未訪問リンク */
a:visited {font-size: 10pt;text-decoration:NONE; color:blue } /* 訪問済みリンク */
a:active {font-size: 10pt;text-decoration:NONE; color:blue } /* クリックしたとき */
a:hover {font-size: 10pt;text-decoration:UNDERLINE;color:red } /* マウスが乗ったとき */
-->
</STYLE>
ステータスバーは、左下に文字が出るんです。
タグはこのように使います。
<A HREF=".../.../html" onMouseOver="window.status='説明文';return true"
onMouseOut="window.status='';return true">
<IMG src="画像又はURLのファイル名" width="32" height="32" border="0">又は表記文字
</A>
メールを送る時はこのようなタグを使用します。
<A HREF="mailto:メールアドレス">〜</A>
ここで入力したアドレスにメールが送れます。
メールに題名をセットする場合、メールアドレスに続けて ?subject=(題名)とします。
メールの内容をセットする場合は、メールの内容をセットするには、メールアドレスに続けて ?body=(内容)とします。
題名、内容共にセットする場合は、メールアドレスに続けて ?subject=(題名)&body=(内容)とします。
宛先もセットできます。題名に続いて cc(※) や bcc(※) も同時にセットするには、メールアドレスに続けて
(メールアドレス)?subject=(題名)&cc=(宛先)
(メールアドレス)?subject=(題名)&bcc=(宛先) とします。
※cc (カーボンコピー)
メインの宛先と同時に配信する宛先です。受信者にはcc の一覧も配信されますので、誰と誰に送ったかが一目でわかります。
※bcc(ブラインドカーボンコピー)
cc と同じく本文が同時配信されますが、受信者には bcc の部分のアドレスが隠されます。
このため同時配信先を伏せて送るときに利用されます。
メールアドレスに続く最初のオプションには？を使い、その次のオプションからは＆を使うと覚えると簡単ですね。
IE. 4 以上のユーザーは、ワンクリックでブラウザのお気に入りに追加できます!! ネスケで言うBOOK MARKです。下のように出ます。
Windows のデスクトップアイコン (ico) を用意します。
これに favicon.ico(半角英数) と名前をつけて、トップページのあるフォルダに転送してください。
これでIEの「お気に入り」に登録されると、このアイコンが読み込まれます。
一度登録したアイコンを変更すると、相変わらず前のアイコンが出てくることがあります。
このときはブラウザの「お気に入り」からリンクを削除し、再起動します。
そして、[ツール]→[インターネットオプション]から
インターネット一時ファイルを削除してください。
パソコンを再起動し、登録をやり直してみてください。
上下左右斜めの矢印を選択した場合、ＩＥ6.0では⇔のような矢印に見えます。
とっても見づらいので、リンクには矢印を選択しないことをおすすめします（;￣ー￣A
設定方法
特定の枠のポインタの形を変えます。
上記タグを使用した場合
| ヘルプ |