コーディング
schedule2011.6.22

リンク要素の簡単リスト｜HTMLタグ

HTML

HTMLタグのリンク”link要素”に関するリストです。Webサイトでとても重要な要素です。他のページへ移動させる事ができます。
リンク要素の中には多くの属性を指定をすることができます。また、画像にリンク領域を複数埋め込む要素も紹介しています。

<ol>
  <li>リンゴ</li>
  <li>桃</li>
  <li value="5">いちご</li>
  <li>オレンジ</li>
  <li>キウイ</li>
</ol>
<ol>
  <li>リンゴ</li>
  <li>桃</li>
  <li value="5">いちご</li>
  <li>オレンジ</li>
  <li>キウイ</li>
</ol>

function post_has_archive( $args, $post_type ) {
  if ( 'post' == $post_type ) {
    $args['rewrite'] = true;
    $args['has_archive'] = 'blog'; //任意のスラッグ名
  }
  return $args;
}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );

<p>テキスト</p>

a href=”★”

リンク要素の基本。hrefにリンク先のアドレスを指定。
画像を指定した場合はブラウザーに画像のみ表示、ZIPファイル等を指定した場合ダウンロードをさせることもできる。
アドレスの指定は絶対パス（http:***）と相対パス（このページから～）が使える。
画像にもa要素を指定できるのでイメージボタンを制作できる。
a要素をスタイルシートでブロック要素に変換するとエリア（領域）を拡大してクリックさせることもできる。

オレのWEBPADは&amp;amp;amp;lt;a href="https://webpad.work/"&amp;amp;amp;gt;こちら&amp;amp;amp;lt;/a&amp;amp;amp;gt;

オレのWEBPADは&amp;amp;amp;lt;a href="https://webpad.work/"&amp;amp;amp;gt;こちら&amp;amp;amp;lt;/a&amp;amp;amp;gt;

href=”mailto:★”

メールアドレスを指定。ユーザーの環境に合わせたメールソフトが起動する。

ご連絡は&amp;amp;amp;lt;a href="mailto:＊＊＊＊@＊＊＊.com"&amp;amp;amp;gt;こちら&amp;amp;amp;lt;/a&amp;amp;amp;gt;

href=”URL#★”

特定のページ内の指定したid属性へ移動。id属性は<div>や<h1～6>等のセレクタ名に付ける。id属性がつけれる要素であれば種類は問わない。

XHTML1.0の場合は『Transitional』で使える。

&amp;amp;amp;lt;!--特定ページのidを参照--&amp;amp;amp;gt;
ご連絡は&amp;amp;amp;lt;a href="URL#mailform"&amp;amp;amp;gt;こちら&amp;amp;amp;lt;/a&amp;amp;amp;gt;

name=”★”

a要素のリンク表示先をこのname属性にする。アンカーポイントの指定。上記の#と同じく任意のタグ内に記述。

同じページである場合はURLを省く事ができる。日本語も記述できるが英字が無難。W3Cにこだわるのであれば空タグは禁止。

&amp;amp;amp;lt;!--リンクボタン--&amp;amp;amp;gt;
ご連絡は&amp;amp;amp;lt;a href="URL" name="mailform"&amp;amp;amp;gt;こちら&amp;amp;amp;lt;/a&amp;amp;amp;gt;

&amp;amp;amp;lt;!--移動先のアンカーポイント--&amp;amp;amp;gt;
&amp;amp;amp;lt;h2&amp;amp;amp;gt;御用の方はこちらからお送りください&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
&amp;amp;amp;lt;a name="mailform"&amp;amp;amp;gt;&amp;amp;amp;lt;/a&amp;amp;amp;gt;

なお、返信はできかねます。

target=”★”

リンク要素をクリックした場合にどのような動作を行うか指定。

XHTMLでこの属性を使う場合は文章型を『Transitional』で記述。

&amp;amp;amp;lt;!--新しいページを開く--&amp;amp;amp;gt;
&amp;amp;amp;lt;a href="index.html" target="_blank" rel="noopener"&amp;amp;amp;gt;クリック&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;!--現在のウィンドウ/フレームにリンク先を表示--&amp;amp;amp;gt;
&amp;amp;amp;lt;a href="index.html" target="_self" rel="noopener"&amp;amp;amp;gt;クリック&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;!--親フレームにリンク先を表示--&amp;amp;amp;gt;
&amp;amp;amp;lt;a href="index.html" target="_parent" rel="noopener"&amp;amp;amp;gt;クリック&amp;amp;amp;lt;/a&amp;amp;amp;gt;

accesskey=”★”

リンク要素にショートカットキーを指定できる。キーボードの操作でリン要素をクリックしてページ移動。携帯端末などで便利な属性。
Winの場合はAlt、Macの場合はCtrlと同時押しで有効となる。

デフォルトでブラウザメニューに設定されているキーは避けるのが無難。

Firefoxの場合

  • Win:Alt+Shift
  • Mac:Ctrl
  • Opera:Shift+Escを押した後キーを押す
オレのWEBPADは&amp;amp;amp;lt;a href="https://webpad.work/" accesskey="1"&amp;amp;amp;gt;こちら（1）&amp;amp;amp;lt;/a&amp;amp;amp;gt;

base href=”★” target=”★”

リンク要素の相対パスの設定や開くアクションの設定。この属性でサイトトップURLを設定しているとサイトトップからの相対パスとなる。

記述箇所は<head>内で指定。
XHTML2.0では廃止されxml:base属性で指定する。

XHTMLでは />で閉じる。

&amp;amp;amp;lt;!--サイトトップURLを定義 _blankで開く--&amp;amp;amp;gt;
&amp;amp;amp;lt;a base="" href="https://webpad.work/" target="_blank" rel="noopener"&amp;amp;amp;gt;クリック&amp;amp;amp;lt;/a&amp;amp;amp;gt;

img src=”★” usemap=”#★”

画像上の任意のエリアをリンク領域（クリッカブルマップ）として指定する。複数のエリアを指定する事も可能。目には見えない。

クリッカブルマップは<map name="★"></map>内に<area ★>で記述。

XHTMLでは />で閉じる。また『Transitional』で使用可。XHTML1.1以降は廃止されている。

&amp;amp;amp;lt;!--HTML--&amp;amp;amp;gt;
&amp;amp;amp;lt;img src="images/map.jpg" usemap="#map"&amp;amp;amp;gt;

&amp;amp;amp;lt;map name="map"&amp;amp;amp;gt;
&amp;amp;amp;lt;area sharp="rect" coords="10, 5, 10, 8" href="https://webpad.work/" alt="オレのWEBPAD"&amp;amp;amp;gt;
 &amp;amp;amp;lt;/map&amp;amp;amp;gt;&amp;amp;amp;lt;!--XHTML--&amp;amp;amp;gt;
&amp;amp;amp;lt;img src="images/map.jpg" usemap="#map"&amp;amp;amp;gt;

&amp;amp;amp;lt;map name="map"&amp;amp;amp;gt;
&amp;amp;amp;lt;area sharp="rect" coords="10, 5, 10, 8" href="https://webpad.work/" alt="オレのWEBPAD"&amp;amp;amp;gt;
 &amp;amp;amp;lt;/map&amp;amp;amp;gt;

area sharp=”★” coords=”★” href=”★” alt=”★”

上記にあるusemap属性の座標を指定する属性。マップネームを合わせることで反映させる。

多角形となると座標を調べるのは中々困難なため、専用のソフトを使うのが吉。

XHTMLでは />で閉じる。また『Transitional』で使用可。XHTML1.1以降は廃止されている。

areaに記述する属性

  • sharp=”★” rect（四角形）,circle（円形）,poly（四角形）
  • coords=”★”
    rect（左上X座標,左上Y座標,右下X座標,右下Y座標）
    circle（円の中心X座標,円の中心Y座標,円の半径）
    poly（X座標,Y座標,X座標,Y座標, …）
&amp;amp;amp;lt;img src="images/map.jpg" usemap="#map"&amp;amp;amp;gt;

&amp;amp;amp;lt;map name="map"&amp;amp;amp;gt;
&amp;amp;amp;lt;area sharp="rect" coords="10, 5, 10, 8" href="https://webpad.work/rect.htm/" alt="四角形の領域"&amp;amp;amp;gt;
&amp;amp;amp;lt;area sharp="circle" coords="30, 15, 50" href="https://webpad.work/circle.htm/" alt="円形の領域"&amp;amp;amp;gt;
&amp;amp;amp;lt;area sharp="poly" coords="15, 15, 35" href="https://webpad.work/poly.htm/" alt="多角形の領域（三角）"&amp;amp;amp;gt;
 &amp;amp;amp;lt;/map&amp;amp;amp;gt;

tabindex=”★”

TABを押すことで上から順番にリンク領域を選択できるが、その順番を任意で並び替える属性。

&amp;amp;amp;lt;a base="" href="https://webpad.work/" tabindex="2"&amp;amp;amp;gt;クリック&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;a base="" href="https://webpad.work/" tabindex="3"&amp;amp;amp;gt;クリック&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;a base="" href="https://webpad.work/" tabindex="1"&amp;amp;amp;gt;クリック&amp;amp;amp;lt;/a&amp;amp;amp;gt;

最新記事一覧

もっと見る