Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【HTML】Aタグに関する小技

 どうも!LSSです!!

 

今回は「それほど特別な知識じゃないけど、知ってるとちょっと嬉しいかも?」な部分について書いてみます。

 

 

Aタグについて

世界中の情報が網のように繋がるインターネット。

そのサイトとサイト、ページとページを繋ぐ役割を担う、基本にして最重要とも言えるタグ、それがリンクを形成する「Aタグ」です。

 

基本的な書式(書き方)は次のようになります。

 

コード

<a href="リンク先のURL">リンクがかかる文字</a>

 

赤と青の太字部分は、それぞれ書き換えて使用する事になります。

例えば、

 

<a href="https://little-strange.hatenablog.com/">Little Strange Software</a>

 

とコードを書き、ブラウザで表示すると、

 

Little Strange Software

 

こうなります。

これを、見た人がクリックする事で次から次に見たいページを移動していける仕組みですね。

 

 

小技その1 別ウィンドウ(別タブ)で開くリンク

先ほどのコードに少し、手を加えてみます。

 

コード

<a href="https://little-strange.hatenablog.com/" target="_blank">Little Strange Software</a>

 

半角でスペースを開けて、target="_blank"を追加しました。

すると、

 

Little Strange Software

 

見た目は全く変わりません。

が、クリックした時に、最初に書いたほうだと今開いているページを開いているブラウザがリンク先に移動するのに対し、target="_blank"を入れた方は
「元のページから離脱せずに、新しいウィンドウ(タブブラウザなら新しいタブ)が追加されてそちらにリンク先が表示される」
ことになります。

 

なお、はてなブログの場合は、「編集 見たまま」画面にURLっぽい文字列をコピペすると、自動的にリンクに仕立ててくれますので、そうした上で、別タブで開かせたい部分だけ、HTML編集画面でtarget="_blank"を追記するのがお手軽です。

 

例えばですが「自分のサイト内のリンクはそのまま移動、他サイトへのリンクは target="_blank" 」といったような使い分けが考えられますね。
(どっちをどうするかはお好みで^^)

 

あと、余談ですが「とにかく全部、別タブで開くようにしたい!全部にtarget="_blank"を入れるのは面倒!!」という方には

www.421miyako.com

421miyakoさん(id:m421miyako)の↑の記事が役立ちます!

 

 

小技その2 同じページの一番上に戻るリンク

たいていのWebページ・ブログ記事は縦に長く、画面スクロールして読み進めていきますが、どこか途中で「一番上に戻りたい」場合。

リンク先URLの部分にある記号だけを入れる事で、対応できます。 

 

コード

<a href="#">一番上に戻る</a>

 

このコードをブラウザで見ると、

 

一番上に戻る

 

こうなります。

クリックすると、ページ移動はせずに、画面が一番上まで一気に戻ります!

もちろん、「一番上の戻る」の文字の部分は好きな文言に変更できます^^

 

 

小技その3 サイトトップページに戻るリンク

それぞれのサイト・それぞれのブログ、のトップページに戻るリンクを入れたい場合があります。

 

最初にサンプルとしてあげたように

<a href="https://little-strange.hatenablog.com/">Little Strange Software</a>

トップページのURLを指定すると、もちろんトップページに移動するリンクになりますが、これをより簡単に書く方法があります! 

 

コード

<a href="/">Little Strange Software</a>

 

このコードをブラウザで開くと、

 

Little Strange Software

 

動作としては同じくトップページに戻るのですが、URLをわずか「/」1文字で表現できます!

 

これは、例えばそのページが

https://little-strange.hatenablog.com/entry/2020/01/04/000100

といったURLだった場合。

 

https://little-strange.hatenablog.com/entry/2020/01/04/000100

 

https//で始まるサイトアドレスの次、最初の「/」以降をバッサリとカットしたURLがリンク先、って事になります。

  

 

あとがき

targetの指定先は、実は_blankの他にもあったりもしますが、もっとも有用なのはやはり_blankかな?と思いますね。(あとはだいたいフレーム関連で、フレームを使用したページを作成した際には必須となりますが、フレーム自体流行ってなさそうw)

 

小技その2、サイトのトップに戻る、はお手軽ですね^^

なお、ここで使う「#」はその後に文字を指定する事で「ページ内の指定位置に飛ぶ」という使い方が元々の用途?で、はてなブログの「目次」にはその用途で使用されていたりもします。

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^