『リンク』を作ってみようその2:改行と新しいタブで開く

先回リンクをつくってみましたが、もう少し設定してみます。

改行するには

前回、このようにファイルを作りました
前回のページはこちらをクリック

メモ帳で開くと、このように改行されているのに、、

ブラウザを開くと、「あれ?横並びになってるぞ?」と思った方もいらっしゃると思います。

メモ帳での見た目と、ブラウザの見た目は、違うのです。

ブラウザで開いたときに、改行をするためには、改行のするためのhtmlタグをわざわざ記入しなければなりません。

改行のhtmlタグは 『<br>』です。

『ハロー』の部分と『ヤフー』の部分の間に 『<br>』を書き入れてみましょう。

そして上書き保存

index.htmlをブラウザで開いて見ましょう

もしも、変化がない場合は

  • ちゃんと上書き保存しているか
  • 『更新(リロード)ボタン』を押してみましょう。(丸い矢印のマークです)

メモ帳での改行はブラウザで無視されます

ブラウザで開いたときの改行はタグで決められるので、

こんなふうに続けて書いても

こんなふうにたくさん改行しても結果は同じ

たくさん改行したいときは

こんなふうに、改行タグをたくさん入れると

改行が増えます

※注意※ 改行したり行間を広げたりする方法には、様々な手段があります今回は改行タグをたくさんつけることによって、行の間を空けましたが、そのほかにも様々な方法を使って行間をあけることがあります。
また設定によっては改行タグをつなげても、行が開かない場合もあります。詳しくはもっと他のタグやCSS(スタイルシート)というものを知ってからわかるようになります。

今は、「メモ帳で改行しても、ブラウザでは改行にならない。ブラウザで改行するためには、改行タグを入れる方法がある」ということだけ理解しておいてください。

別のタブで開くには

今つくってあるリンクでは

リンクをクリックすると

同じタブのページが変わるという状態でした。

通常はこれでもいいのですが、たとえば自分のホームページから、よそのホームページへのリンクをクリックした場合、同じタブの中でページが移動すると、二度と自分のホームページに戻ってきてくれないことがあるかもしれません。

(『← 戻る矢印』で、前のページに戻ることも可能なのですが、何ページか進んでいったり、閉じたら分からなくなってしまう方が多いです。)

ですので、

今のページはそのままに

新しいタブで、リンク先のページを開く、という設定をしてみようと思います。

『新しいタブを開く』リンクタグの書き方

リンク先を設定している『href=”xxxx.html”』の後に、半角空白を空けて『target=”_blank”』と書いてください。

ヤフー

『target』 とは、ターゲット、日本語で『的(まと)』のことです。開くウインドウのあて先のこと。

『_blank』とは、ブランク、空白のことです。

『target=”_blank”』とすることで、『新しいタブで開く』と設定していることになります。

何も書かないと、『同じタブで開く』ということになっています。

※なぜ『_blank』と、『_』(アンダーバー)がつくの?つけずに『blank』と指定すると、『blank』という名前のウインドウをめがけて開くと言う意味になってしまいます。
『_』をつけることで、あらかじめ決まっているウインドウを指定することになります。target には _blank のほかに _top や _parent のようにあらかじめ決まったものがあります。
今はとりあえず、『_blank は新規ウインドウ』これだけ覚えておけばいいでえしょう。

そして、上書き保存して、index.htmlを開いて見ます。

『ヤフー』のところをクリックしてみると・・・

『index.html』のタブはそのまま、『Yahoo! Japan』のタブが開くはずです。

そこでindex.html のタブをクリックすれば、元のページに戻りますし、『x』を押すとそのタブだけ閉じることができます。

上手く新規タブが開かない場合は・・・

きちんと書けているか、良く見直してください

よくある間違いは、

  • 半角空白が開いてない(続けて書いちゃってる)
  • ダブルクォーテーションが半角じゃない(全角『”』になってる)
  • target や blank等、つづりがまちがっている

調べ物などはタブを新規で開くのが便利

何かホームページやブログを開くたびにブラウザを毎回『閉じる』ボタンで全て閉じて、立ち上げて開きなおす方がいらっしゃいますが、続けて調べ物などをする場合はタブを次々開いて、切り替えていくのが便利です。

いちいち『x』で閉じる必要はない

開いておきたいページはそのままにしておいて、『新しいタブを開く』部分をクリックし、新しいタブを開き、そこで検索などをし、タブを次々切り替えて作業すると大変効率が良いです。

※ただし、あまりにたくさんタブを開きすぎると、コンピューターのメモリーがいっぱいになって動作が遅くなりますのでほどほどに・・・

『改行』と『リンクを新しいタブで開く』のまとめ

メモ帳で改行されていても、改行タグ『<br>』などを入れないと改行はブラウザ上では反映されない。

リンクを新しいタブで開きたいときはリンクタグに『(半角空白)target=”_blank”』を追加する。

タイトルとURLをコピーしました