HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

最安値でイッキにまとめ買いブックオフオンラインのオトナ買い [PR]

● リンクする

ウェブサイトはページどうしの繋がり・・・リンク(ハイパーリンク、ウェブリンク)によって成り立っています。
ページに表示された文字やイメージをクリックするだけで関連する何らかのリソース (ウェブページとは限らない)へ移動することが出来ますシステムです。
リンクはA(anchor)要素によって表現され、 ウェブ文書の別の場所や別のウェブ文書、その中のある部分、アーカイブ、画像、ビデオクリップ、サウンドファイルなど 様々なものに、マウスのクリック動作やキーボードによる実行命令で移動させられます。

<A href="http://www.yahoo.co.jp/" target="_blank">Yahoo!JAPAN</A><BR>
Yahoo!JAPAN

このリンク先のリソース(URL)を『href』属性に設定し、 目標となるウィンドウ(フレーム)を『target』属性に設定します。 ここではhref属性の属性値に『Yahoo!JAPANのURL』を設定し、target属性の属性値に『_blank』を設定しているので、 Yahoo!JAPANのホームページが新しいウィンドウで開きます。
リソース(URL)の設定の仕方は別ページで・・・
ハイパーリンクは実行した時に、何処に移動するかと共に、そのリンク先をどのウィンドウ(フレーム)に表示するかを設定します。 ハイパーリンクが実行された時、今のページが必要無くなるような、例えば次のページへと移動するのであれば、同じウィンドウで開く方が良く、 まだ、今のページを必要としており、参考程度に開くページならば、別に新しくウィンドウで表示された方が良いでしょう。
このような目的に添って目標となるウィンドウ(フレーム)を『target』属性に設定します。 属性値には標準で以下の4つが用意されており、未設定の場合は『_self』となります。

_blank』とすれば、新しいウインドウを作って、そこに表示します。
_self』とすれば、リンクが書かれてあるページに、リンク先のページが表示されます。
_top』とすれば、ブラウザが表示しているウインドウ全体に、リンク先のページが表示されます。
_parent』とすれば、リンクが書かれてあるページとセットになっているフレームに、リンク先のページが表示されます。
フレーム(ウインドウを分割して表示するページ)を利用していないと、 _topと_parentは_selfと変わりません。
≪参考≫

ちなみに要素で使用している『A』はアンカー(anchor)のAです。 これをリンク要素と呼んでしまうと、『LINK』という要素がありますのでご注意を。

基本となるアドレス・ターゲットの設定

ページ内の相対パスはBASE要素を設定することにより絶対パスにすることができます。 BASE要素はHAED部分に記述し、URLが記述されているどのような要素よりも先に記述しておきます。
BASE要素に『href』を使用して記述された値は、 以降に記述された『相対パス』の『基本パス』となります
つまり、以下のようにBASE要素に『http://www.domain.co.jp/user/』を基本パスとして設定した場合、 ページ内のハイパーリンクに設定した『./index.htm』は『http://www.domain.co.jp/user/index.htm』へのリンクとなります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<BASE href="http://www.domain.co.jp/user/" target="_parent">
<TITLE>かわだ亭</TITLE>
</HEAD>
<BODY>
<P>
当サイトは<A href="./index.htm">こちらです</A>。
</P>
</BODY>
</HTML>

また、同様にBASE要素によって基本となる目標を定めることができます。 BASE要素に『target』属性を設定した場合、 その属性値は以降に記述されたA要素等の『目標』の標準設定となります
上の『こちらです』にはターゲット属性が設定されていないので、 本来は『_self』となりますが、BASE要素で『_parent』が設定されているので、このページでは『_parent』になります。

ファイルへのリンク

リンク先は主にファイルになり、htmlファイル(ウェブページ)に限らず、 画像ファイル(jpg、gif、png)や圧縮ファイル(lzh、zip)をはじめ、 どんなファイルでも設定可能ですが、 リンク先に移動したあとの振る舞いは、閲覧者の環境に依存します。
例えば、MS WORD(docファイル)をリンク先に設定していた場合、 docファイルを開ける環境で有れば、自動的に開くような動作をするでしょうが、 開けない場合はそのファイルはダウンロードするように促され、未登録のファイルとして保存されるでしょう。
そのため、なるべく環境に依存しないファイルを設置する必要があります。
文書ファイルをWORDや一太郎などで提供すると、そのアプリケーションがインストールしていないと見ることができません。 そのために、例えば、pdfファイル(AdobeAcrobat)があります。 作成するには専用アプリケーションを購入する必要がありますが、 読むだけならAcrobatReaderという無料のアプリケーションで可能です(最近のメーカーPCにはインストール済みが多い)。
(アドビホームページ>>http://www.adobe.co.jp/)
音声ファイルや動画ファイルも同様ですが、こちらの場合はほとんど環境に依存することはないでしょう。
アプリケーションとしては、
Windows Media Player(http://www.microsoft.com/japan/windows/windowsmedia/players.asp)
RealPlayer(http://www.jp.real.com/)
QuickTime(http://www.apple.co.jp/quicktime/)
Winamp(http://www.winamp.com/)・・・Netscapeに付いてくる
が有名でしょう。
対応のファイル形式は互いに干渉しているところが多く、『対応ファイルを関連づけますか?』と、インストールするたびに奪い合います。
ダウンロードさせる場合は、どのアプリケーションを対象に提供しているかを明示し、 ダウンロード先に(バナー付きで)リンクしておくのが一般的のようです。
音声データ、動画データはファイル容量が大きいので、設置先の利用規約(容量制限)に十分おきおつけ下さい。 サービスによって一部のファイルの設置禁止にしているところもあるようです。

リンク先の環境を設定する

あるリンクをたどると文字化けしてしまうなどという経験はないでしょうか?
例えばYAHOO!(http://www.yahoo.co.jp)やgoo(http://www.goo.ne.jp)などの検索サイトは 『EUC』という文字コードを使用しています。 YAHOO!はHEAD部分の行頭に『EUC』にしかない文字を記述し、gooではMETAタグで 使用文字コードが『EUC』であることを明示しているので文字化けを起こしにくいのですが、 そのような処置がなされていないページへリンクすると、ブラウザは文字コードの判断を誤って 不可解な文字を表示することがあります。
もし自分のサイトから、そのようなページにリンクを張りたい場合、A要素でリンク先の文字コードを設定することで 閲覧者がリンク先を障害無くみることができます。
A要素内にHEAD部分のMETAタグで使用した『charset』という属性を記述してあげれば良いのです。

<A href="URL" charset="EUC-JP"> リンク先は『EUC-JP』の文字コードが設定されます。</A>

同様にリンク先のデータの種類(Content-Type)を『type』属性で設定することができます。
ブラウザがここで設定されているMIMEタイプを参考にして対応をとることができます。 ただし、これらの設定では、リンク先との矛盾が生じないよう十分な注意が必要です。 とくに『type』属性ではブラウザの挙動をおかしくさせる可能性がありますので、下手に使用しないようが良いと思います。
他にも・・・
hreflang属性で言語コード(『ja』が日本語、『en』が英語等)
rel属性でrev属性で リンクタイプ (この文書から見た関係 / リンク先から見た関係)
などを設定できます。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09