HTMLを本格的に勉強し始めて約一年経つのだが、良く忘れるので備忘録的にメモをしておく。
<a>タグを使うと文字にハイパーリンクを張れる。
通常は青い文字で表示され、下線が付く表示になるやつだ。
その文字をクリックすると色んな動作をさせる事が可能だ。
- <a>タグの文字列をクリックで同じページ内の他の位置にジャンプする動作
- <a>タグの文字列をクリックで他のURLにジャンプする動作
- <a>タグの文字列をクリックで何らかの関数を実行する動作
この記事では、これらの手法をまとめてみた。
<a>タグの文字列をクリックで同じページ内の他の位置にジャンプする動作
例えば、ページの先頭付近にそのページ内の索引あるいは見出しのような項目を配置して、その文字列をクリックしたら、そのページ内の後方部分にあるその項目の本体位置にジャンプしたい。
そういう時に使うのがシャープ記号#を使う手法だ。
まず、こう言う風にaタグの中のhrefの部分に#ラベル という記述をする。
<a href="#jumpHereLabel1">jumpHereLabel1へジャンプする</a>
一方、目的の場所にある文字列 jumpHereLabel1クリックでここに来る を同じくaタグで囲う。その時に、先ほどのラベル文字を使ってaタグの属性 name=”ラベル” を追加する（下図）。
<a name="jumpHereLabel1">jumpHereLabel1クリックでここに来る</a>
これで、jumpHereLabel1へジャンプするをクリックするとその場所が表示出来る。
なお、 name 属性は aタグ以外のタグにも使っても問題はないようだが、Chromeブラウザーで試した限りでは、例えば h1 タグに name=ラベル を付けてもその位置にジャンプしなかった。
なので、ジャンプ先のラベルとして使う場合には aタグに name=ラベル を付けるのが正統派のようだ。
<a>タグの文字列をクリックで他のURLにジャンプする動作
この場合はhrefの部分に目的のページのURLを指定すれば良い。
<a href="http://www.yahoo.co.jp/" target="_blank" >ヤフーのページを新しいタブで開く</a>
上記の例では外部のYahooのサイトにジャンプしているが、同じドメインのページでも良い。
例えば現在表示されているページが HtmlPage1.html で、そのページ内にある
HtmlPage2.htmlを新しいタブで開く
と言う文字列をクリックした場合に、同じドメイン内の HtmlPage2.html を開きたい場合には、HtmlPage1.html ファイルの中で、
<a href="HtmlPage2.html" target="_blank">HtmlPage2.htmlを新しいタブで開く</a>
こんなふうに書けば良い。
なお、これらの例にある target=”_blank” は、この記述があるとハイパーリンクのクリックで新しいタブに目的のページを表示する。
もし target=”_blank” を省略すると今開いているページが新しいページに置き換わる。
<a>タグの文字列をクリックで何らかの関数を実行する動作
では、aタグでハイパーリンクが張ってある文字列をクリックした場合に、何らかの関数を実行したい場合には、以下のように記述すれば良い。
<a href="#" target="_blank" onclick="myfunc(); return false">関数myfunc()を実行する</a>
ここで href=”#” の部分は本来はそのページのトップにジャンプする動作であるが、 return falseを実行するとそのトップに戻る動作を中止出来る。
なぜ href=”#” が有るかと言うと、hrefの記述が無いとハイパーリンクの下線が出ないので。
なので、 href=”” などでも良いかもしれない。
さて、では画像とかアイコンをクリックした場合に、他のURLにジャンプする動作をさせたい場合にはどうすれば良いか？
その場合もaタグを利用して行う事が可能だ。
aタグを利用して画像とかアイコンをクリックした場合に、他のURLにジャンプする動作をさせる
この場合には、以下のように記述すれば良い。
<a href="#" onclick="document.location='http://www.wareko.net/WarekoMapsMobile/';return false;" target="_blank"> <img src="http://www.wareko.net/maps/v3.9.7/waremoba32x32.ico" /> </a>
この例ではアイコン ico をクリックすると、ワテ自作の ワレモバ のサイトにジャンプする動作だ。
上の例を実際に表示すると下のようになる。
ただし、本ページはWordPressが表示しているがWordPressではonclick=”…” の部分が勝手に除去されるようなので↓のリンクをクリックして開く新ページにはワレモバの地図サイトは開かずに、このページの複製が開いてその先頭位置にジャンプする動作となる。
この場合にも取り合えず href=”#” の小細工を使っている。画像なのでハイパーリンクの下線は出ないが、 href=”#” を付けておくとマウスカーソルを画像に近づけた場合に手のアイコンに変わるなどのブラウザー固有の動作をさせたいからだ。
その時には return false; も忘れないように実行する。
まとめ
HTMLやCSSの設定や記述方法は種類が多くて良く忘れる。
さらに、日進月歩で新しい仕様が制定されるので、新しい文法をドンドン覚える必要がある。
アマゾンでランキングの高い本を見る
![デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ (Design&IDEA)](https://m.media-amazon.com/images/I/41YXUWBgsAL._SL160_.jpg)
![ノンデザイナーズ・デザインブック [第4版]](https://m.media-amazon.com/images/I/51HKaOqL-RL._SL160_.jpg)
この三冊をまとめて買う人も多いようだ。
あるいは、現場のプロのテクニックを知りたいならこの本が良い。
でもワテは読んでいない。
コメント