HTML

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのリンクで別ウィンドウを開く方法について解説しています。リンクから別のページに移動するときの仕組みと、別ウィンドウでリンクを開くときの書き方について実際に書きながら学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLのリンクで別ウィンドウを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

別ウィンドウとは

ブラウザは複数のウィンドウを立ち上げることが可能で、別ウィンドウとは、現在Webサイトを開いているウィンドウとは別のウィンドウのことを指します。

通常のリンクでは、同じウインドウ内でページを移動します。

[PR] Webデザインで副業する方法とは

HTMLのリンクで別ウィンドウを開く方法

HTMLでは、別ウィンドウを立ち上げることができません。

代替案として、同じウィンドウの別タブでページを開くことができます。

外部リンク（現在閲覧しているWebサイトとは別のサイトを参照する）の場合や、お問い合わせなどの入力フォームで、「プライバシーポリシー」のページを表示する際など、現在のページをキープしながら別のページを見せたいときに、別タブで開く方法が用いられていることが多いです。

どうしても別タブではなく、別ウィンドウでWebサイトを開きたい場合には、JavaScriptで新規ウィンドウを開く方法を現役エンジニアが解説【初心者向け】の記事を参考にしてください。

別タブ（GoogleChrome）

別ウィンドウ（GoogleChrome）

別タブでページを開きたい場合にも、通常のリンクと同様に<a>タグを使用します。

TechAcademyマガジンのトップページに移動するリンクを配置したい場合、HTMLは以下のように書きます。

<a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a>

別タブでページを開く場合には、<a> タグに target=”_blank” を追加して、以下のように書きます。

<a href="https://techacademy.jp/magazine/" target="_blank">TechAcademyMagazine</a>

ただし、別タブで外部ページを開く場合には注意が必要です。

別タブで開いたWebサイト上に悪意のあるプログラムが書かれていた場合に、元のタブのWebサイトにアクセスされて別の悪意のあるWebサイトに移動されてしまう可能性があります。

これを回避するための方法として、target=”_blank”を使用する際には<a>タグにさらに、rel=”noopener” または rel=”noreferrer” を追加し、以下のように書くとよいです。

<a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener">TechAcademyMagazine</a>

<a href="https://techacademy.jp/magazine/" target="_blank" rel="norefferrer">TechAcademyMagazine</a>

こうすることで、別タブで開いたWebサイトに万が一、悪意のあるプログラムが書かれていても安心です。

rel="noopener" や rel="noreferrer" はあってもなくても動作に変わりはありません。

IE11では rel="noopener"が非対応（2021/2/10）ですので、rel="noopener noreferrer" としておくとよいでしょう。

参考：https://web.dev/external-anchors-use-rel-noopener/

実際に書いてみよう

テックアカデミーマガジンのWebサイトをそのままのタブで開くリンクと、別タブで開くリンクを書いてみます。

通常のリンク（同じタブでページを移動）

<a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a>

実際のリンク > TechAcademyMagazine

別タブで開くリンク

<a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener noreferrer">TechAcademyMagazine（別タブで開きます）</a>

実際のリンク > TechAcademyMagazine

執筆してくれたメンター

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。おうち大好きマンです。

内容わかりやすくて良かったです！

ゆかりちゃんもわからないことがあったら質問してね！

わかりました。ありがとうございます！

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい
副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTMLで画像を画面サイズに合わせて表示する方法を現役デザイナーが解説【初心者向け】

モバイルファースト時代の昨今、WebページはスマホやタブレットやPC、様々な画面で見られています。 Webページに表示する画像も、ユーザーの画面に合わせて...

HTML

HTMLで日付の入力欄を作る方法を現役デザイナーが解説【初心者向け】

HTMLで日付の入力欄を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、H...

HTML

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事ではWebページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法について、テックアカデミーのメンター（現役エンジニア）が実...

HTML

HTMLでvideo要素で動画が自動再生されない原因と対処法を現役エンジニアが解説【初心者向け】

HTMLでvideo要素で動画が自動再生されない原因と対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

HTMLでのselectedによる初期値の設定方法を現役エンジニアが解説【初心者向け】

HTMLでのselectedによる初期値の設定方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLのdl要素を使って説明リストを作る方法を現役エンジニアが解説【初心者向け】

HTMLのdl要素を使って説明リストを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

あわせてよく読まれている記事

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、いったい何を作っているんだろう Webページは、どういう仕組みで動いているんだろうこんな疑問を持っている方は、ぜひこの記事を読んでみてください。どういう仕組みでWebページができているのか理解できますよ。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次別ウィンドウとはHTMLのリンクで別ウィンドウを開く方法実際に書いてみよう執筆してくれたメンターHTMLを学習中の方へそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLとは何かについて詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】 HTMLとは HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略。簡単にいうと、コンピュータが理解できる、マークアップをするための言葉です。マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。「この文章はタイトルです」「この3つの文章が1セットで記事です」というような、注釈のようなものですね。 Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。例えば、このような情報をホームページにしたいと思います。ニュース孫が生まれて、ついにおじいちゃんになりました。この情報に対して、日本語で文章構成を指示してみます。 <ここから見出し>ニュース<ここまで見出し> <ここから本文>孫が生まれて、ついにおじいちゃんになりました。<ここまで本文> これを、HTMLを使ってマークアップすると、このようになります。 <h1>ニュース</h1> <p>孫が生まれて、ついにおじいちゃんになりました。</p> HTMLという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。このHTMLを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。 Webページの裏側を見る普段から私たちがブラウザで見ているWebも、裏側はHTMLでできています。実際に見てみましょう、HTMLがどんな言葉なのか、より分かってくると思います。たとえば、テックアカデミーのWebページも、裏側はHTMLです。 Webページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。すると、英単語と記号が組み合わさった文章が出てきます。これが、Webページの裏側にある、HTMLで記述された文章。 ChromeやSafariといったWebブラウザがこのHTML文章を読み、Webページをどのように表示するか判断しているのです。 HTMLのような言葉を使って、英単語や記号を組み合わせて書いた、コンピュータが読める文章を、「コード」や「ソースコード」と言います。 Webページは、どのようなWebページにするか、HTMLなどのコードを書いて指示を出して作っていきます。どのようなWebページでも、裏側のソースコードを表示することができますので、ぜひ試してみてくださいね。 [PR] Webデザインで副業する方法とはHyper Text Link（ハイパーテキストリンク） HTMLがハイパーテキスト・マークアップ・ランゲージの略、ではハイパーテキストって何でしょう？ハイパーテキストとは、ハイパーな文章、つまり文章を超えた文章のことです・・・といってもよくわかりませんよね。インターネットが生まれる前、コンピュータは、学者が論文など、文章を共有するために使われていたのです。そんな中、この共有された多数の文章が、お互いに関連付けられてリンクすることで、情報が無数に広がる。「文章がリンクする」ことで、文章を超えるという仕組み、Hyper Text Link（ハイパーテキストリンク）を考えだしました。ハイパーテキストリンクでできたつながりは、蜘蛛の巣のように複雑に広がっていくので、Web（蜘蛛の巣）と呼びます。 Webを世界中につなげよう、というプロジェクトが、WWWやW3と示されている、ワールドワイドウェブ（World Wide Web）です。今でもURLの先頭にhtpps://www.xxxxx.com のように、wwwをつけていることもありますよね。 HTMLは、ハイパーテキストリンクを実現するための、文章同士のリンクをマークアップすることができる言葉として生まれ、ワールドワイドウェブとともに育ちました。いまや世界中がWebでつながり、どこにいても瞬時に様々なWebページを見ることができます。 Webの根源となっている考え方がハイパーテキストリンクで、Webを実現する言葉がHTMLなのです。ハイパーテキストリンクの例【矢印の部分をクリックすると別のページへ移動する】 HTMLのコード【上記ページの裏側（ユーザーには見えない部分）の構造】 HTMLの種類 HTMLには「HTML4」「XHTML」「HTML5」など、バージョンや亜種があり、それぞれ文法や表現できることが少し違いますので注意しましょう。現在は、HTMLのバージョン5である、「HTML5」が一番よく使われています。大石ゆかりソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか？田島悠介 HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。大石ゆかりなるほど！じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか？田島悠介リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。 HTMLファイルの作り方最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。リンクを表示するリンクを作成した場所へページが移動しました。リンクを作成するには<a>タグを使用します。 <a>タグの書き方 <a href="リンク先へのパス">リンクを貼るテキストや画像</a> hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。最後に必ず終了タグ</a>を入力します。使用例実際に<a>タグを使用してテキストにリンクを貼ります。今回は以下のURLを使って、「Coolors」というサイトへのリンクをつなげてみます。 https://coolors.co/ コード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body>

HTML

Pythonで画像の座標を取得する方法を現役エンジニアが解説【初心者向け】

Pythonで画像の座標を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 OpenCVという画像を扱うためのライブラリを使用します。目次別ウィンドウとはHTMLのリンクで別ウィンドウを開く方法実際に書いてみよう執筆してくれたメンターHTMLを学習中の方へそもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonで画像の座標を取得する方法について詳しく説明していくね！大石ゆかりお願いします！ OpenCVとは OpenCVとは、画像処理・画像解析のために開発されたオープンソースのライブラリで、Python、C++など様々な言語で利用できます。 OpenCVを使うことでエッジや輪郭の抽出、物体検出などの画像処理をPythonで簡単に行えます。 OpenCVを利用する前にインストールする必要があります。例えば、下記のようなコマンドでインストールしてから使ってみてください。 pip install opencv-python OpenCVでマウスクリックした場所の座標を取得する方法それでは、OpenCVを使って画像の特定の場所の座標を取得する方法を説明します。以下の2つの機能を順番に使います。 OpenCVを使って画像を表示する OpenCVで表示した画像のクリックされた座標を取得する 1. OpenCVを使って画像を表示する最初に、OpenCVで画像をGUI表示する方法を紹介します。 OpenCVは、下記のようにインポートして使います。処理の際は、imread()によって画像を読み込みます。 import cv2 img = cv2.imread('読み込みたい画像のパス') 読み込んだ画像は、下記のようにimshow()を使うことで、別ウィンドウに表示できます。指定した名前の別ウィンドウが開き、画像が表示されます。 OpenCVで画像を表示する際は、waitKey()でキー入力を待つようにします。待ち時間には0を指定することで、入力されるまで無制限で待ち続けることができます。下記のコードで画像を表示し、何かキーを押すと閉じるという処理が記述できます。 cv2.imshow('ウィンドウ名', img) cv2.waitKey(待ち時間) 2. OpenCVで表示した画像のクリックされた座標を取得する次に、別ウィンドウで表示した画像をクリックして、クリックされた位置の座標を取得します。 OpenCVではコールバック関数を使うことで、ホイール操作、ダブルクリックなどimshowのウィンドウ上での動作に対する処理を記述できます。例えば、マウスを左クリックしたときの座標を表示するなら、以下のようなコールバック関数を書くことができます。 def onMouse(event, x, y, flags, params): if event == cv2.EVENT_LBUTTONDOWN: print(x, y) コールバック関数は呼び出されたときに、引数でコールバックイベントの種類、イベント発生時のx座標、y座標を取得できます。 x, yにはクリックされた位置のx座標, y座標が自動で入ります。左クリックでは、cv2.EVENT_LBUTTONDOWNというイベントが発生するため、上記の関数で左クリックされた際に座標を表示できます。上で定義したコールバック関数を表示する画像のウィンドウに設定するためには、cv2.setMouseCallback()を使います。第1引数には画像をマウス操作の処理を実行するウィンドウ名、第2引数には実行するコールバック関数を指定します。 cv2.setMouseCallback('ウィンドウ名', コールバック関数) [PR] Webデザインで副業する方法とは実際に書いてみよう以上の内容を踏まえて、マウスをクリックした場所の座標を取得するサンプルコードを書いてみます。例として下の画像を使いますので、sample.pngという名前で保存してください。以下のサンプルコードを、画像と同じディレクトリに保存して実行してください。 import cv2 def onMouse(event, x, y, flags, params): if event == cv2.EVENT_LBUTTONDOWN: print(x,

Python

CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】

CSSのリンクの色を変えない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次別ウィンドウとはHTMLのリンクで別ウィンドウを開く方法実際に書いてみよう執筆してくれたメンターHTMLを学習中の方へそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 CSSのリンクの色を変えない方法について詳しく説明していくね！大石ゆかりお願いします！リンクの色とはリンクとは、今表示されているページ上で、他のページに移動できるURLが含まれた場所です。例えば1をクリックすると、https://techacademy.jp/magazine/category/webdesign/css　というページに移動します。 2をクリックすると、現在ご覧いただいているページである、https://techacademy.jp/magazine/21233　に移動します。リンクの色とは、3（以下の画像）のようにページ内の文字に対してリンクを指定する場合、文字色が黒色からリンクを表す色に変化した状態（画像では青色）で表示されることを意味します。リンクの色が変わってしまう原因未訪問のサイトと訪問済みのサイトでリンクの色が異なっていることや、マウスカーソルを当てた際、マウスクリックした際にリンクの色が変わることがあります。これらはaタグの:link, :visited, :hover, :active擬似クラスの設定が原因です。 :linkは未訪問のリンク、:visitedは訪問済みのリンク、:hoverはマウスカーソルが当たっているリンク、:activeはマウスクリック中のリンクを指します。 [PR] Webデザインで副業する方法とはリンクの色が変わらないためにすること「aタグの色を指定して、各擬似クラスの設定は行わない」という方法と、「すべての擬似クラスで同じ色を指定する」という方法があります。「aタグの色を指定して、各擬似クラスの設定は行わない」場合には、以下のようにaタグで色指定するだけで良いです。 a { color: blue; } 「すべての擬似クラスで同じ色を指定する」場合には、:link, :visited, :hover, :active擬似クラスで同じ色を指定すれば良いです。 a:link, a:visited, a:hover, a:active { color: blue; } 基本動作を実際に書いてみようまずはデフォルト動作を見てみましょう。リンクの訪問や、マウスホバー、クリックでリンクの色が変わります。 ※CodePenでは、標準でマウスホバーやクリックで色が変わらないため、:hoverと:activeの設定をしています。 HTML <a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a> CSS a:hover { color: red; } a:active { color: green; } CSS解説 1行目のa:hover {では、HTMLの aタグで囲まれた標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる) 　という文字の上に、マウスカーソルを移動させた場合に、color: red;で色を赤色にするように指定しています。 4行目のa:active {では、HTMLの aタグで囲まれた標準リンク(リンク訪問や、マウスホバー、クリックで色が変わる) 　をクリックしたとき、color: green;で色を緑色にするように指定しています。 aタグのことをアンカータグといいます。実行結果 See the Pen link1 by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 各擬似クラスの設定は行わない方法次に「aタグの色を指定して、各擬似クラスの設定は行わない」方法です。 no-color-changeクラスで色を一括指定しています。リンクの色が変わらないことを確認しましょう。 HTML <a href="https://techacademy.jp/programming" target="_blank" rel="noopener noreferrer"> <p>色の変わるリンク(リンク訪問や、マウスホバー、クリックで色が変わる)</p> </a> <a

CSS

HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】

HTMLをリンクして新しいウィンドウで開く方法について解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方の記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLをリンクして新しいウィンドウで開く方法について詳しく説明していくね！大石ゆかりお願いします！リンクタグとはリンクタグは、ブラウザの画面を閲覧中のHTML文書(Webサイト)から他のHTML文書に移動させるものです。ブラウザで閲覧中の画面の内容が変更されることから、「ページ(画面)遷移」とも呼ばれています。そして、「ページ遷移」を実現するための代表的な手法として、「リンクタグ」(aタグ)があります。そして、aタグとタグに付随する属性(href)を記述し実装します。以下がリンクタグを用いるコードの例となります。 HTML <a href="https://techacademy.jp">テックアカデミー</a> テックアカデミー属性の使い方と新しいウィンドウで開く方法 aタグに付随する属性は、約10種類以上もあるものの、おもに使用するのは2種類のみです。「リンクタグ」の説明でもふれたhref属性、その「ページ遷移」を実現するための対象を定めるtarget属性です。この他の属性は、ブラウザの種類によっては、挙動として不安定な動作があるため、細かく知らなくても問題ありません。以下のコードは新しいウィンドウを開くためのコードの例となります。 HTML <a href="https://techacademy.jp">テックアカデミー｜同一の画面</a> <a href="https://techacademy.jp" target="_blank">テックアカデミー｜新しいウィンドウ(タブ)</a> テックアカデミー｜同一の画面テックアカデミー｜新しいウィンドウ(タブ) 同一の画面の方は新規のタブを開くことなく、そのままリンク先に移動します。対して、新しいウィンドウ(タブ)の方はtarget属性の値として_blankを設定しているため、href属性の値として指定されたURL(リンク先)がブラウザの新しいタブで表示されます。また、余談として、新しいタブが作られる場合に、タブの機能がなかった古いブラウザでは、リンク先が文字どおり「新しいウィンドウ」と表示されていました。 [PR] Webデザインで副業する方法とは新しいウィンドウで開く場面同じドメインのWebサイトから、他のドメインのWebサイトを表示させる場合では、「新しいウィンドウ（タブ）」が活用されています。また、閲覧中のWebサイトからユーザーを離脱させたくないなどの理由がある場合は、「新しいウィンドウ（タブ）」で表示させる方法がよく選ばれています。監修してくれたメンター井内洋平 TechAcademyの現役メンター。元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。大石ゆかり HTMLをリンクして新しいウィンドウで開く方法がよくわかりました！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

JavaScriptでリンク先を新しいタブで開く方法を現役エンジニアが解説【初心者向け】

JavaScriptでリンク先を新しいタブで開く方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでリンク先を新しいタブで開く方法について詳しく説明していくね！大石ゆかりお願いします！ JavaScriptでリンク先を新しいタブで開く方法 JavaScriptで新しい画面で指定したリンク先に移動する方法を紹介します。Windowオブジェクトの”open”メソッドを利用し、新しい画面を開くと同時にページ遷移を行います。 “open”メソッドは新しい画面を開くメソッドです。第一引数に遷移したいURL(パス)を指定し、第二引数には、Window名を指定します。第三引数にはオプションを指定します。また、第三引数を省略するとブラウザーによっては、新しいTABを開くことになります。 Point：引数は全て、ダブルコーテーションで囲む必要があります。オプション内容を下記に示します。 top：画面上からの位置を数値で指定します left：画面左からの位置を数値で指定します width：ウィンドウの幅を数値で指定します height：ウィンドウの高さを数値で指定します menubar：メニューバーの有無をyes、noで指定します toolbar ツールバーの有無をyes、noで指定します location アドレスバーの有無をyes、noで指定します resizable ウィンドウのリサイズ可否をyes、noで指定します scrollbars スクロールバーの有無をyes、noで指定します ※ブラウザーによって利用できるオプションが異なる為、一般的に位置指定のオプションを利用します。実際に書いてみようでは、実際に書いてみましょう <html> <head> <title>javaScriptでリンク先を新しいタブで開く方法サンプル</title> </head> <body> 新しいタブで開く(※TAB表示できるブラウザーのみ)<br> <button onclick="newtab()">New Tab</button><br> <br> 新しい画面で開く<br> <button onclick="newwindow()">New Window</button><br> <script type="text/javascript"> var window_A,window_b; function newtab() { window_A = window.open("https://www.google.com", "google"); } function newwindow() { window_b = window.open("https://www.google.com", "google", "width=500,height=500"); } </script> </body> </html> 以上で解説を終わります。シンプルなものですが、利用頻度は多いと思いますので覚えておきましょう。 [PR] Webデザインで副業する方法とは筆者プロフィール小宮山晃史（こみやまこうじ）現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】

JavaScriptでPDFファイルを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PDFファイルを開く方法について詳しく説明していくね！大石ゆかりお願いします！ PDFファイルとは PDFファイルとは電子化された書類のことを指します。単純にワードファイルやエクセルファイルをPDF化できるだけでなく、スキャナされたものもPDFファイルとして扱えるので、その利用法は多岐にわたるといえるでしょう。 JavaScriptでPDFファイルを開く方法システムによってはJavaScriptでPDFファイルを開く必要があります。 JavaScriptでPDFファイルを開く方法として、 document.location.href = “XXX.pdf” を使用しましょう。 XXXには、PDFの存在する場所とファイル名を記載することで使用できます。 [PR] Webデザインで副業する方法とは新規タブでPDFファイルを開く方法 JavaScriptの新規タブでPDFを開く方法は、 window.open( ‘XXX.pdf’ ) といったコードを使用しましょう。実際に書いてみようここでは、実際にコードに記述していきます。まずは、PDFファイルを開く方法からコードを記述していきます。 PDFファイルはHTMLファイルと同じフォルダ内に配置してみましょう。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScript</title> </head> <body> <script> document.location.href = "こんにちは.pdf"; </script> </body> </html> それでは、次に新規タブでPDFを開きます。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScript</title> </head> <body> <script> window.open( 'こんにちは.pdf' ); </script> </body> </html> まとめ JavaScriptでPDFファイルを開く方法を現役エンジニアが解説しました。 PDFは電子書類として最も利用されているファイル形式と言っても過言ではありません。この機会に扱い方をマスターしましょう。執筆してくれたメンターメンターTK 大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。大石ゆかり JavaScriptでPDFファイルを開く方法が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

目次

別ウィンドウとは

HTMLのリンクで別ウィンドウを開く方法

実際に書いてみよう

通常のリンク（同じタブでページを移動）

別タブで開くリンク

執筆してくれたメンター

HTMLを学習中の方へ

関連するキーワード

あわせてよく読まれている記事

今さら聞けない！HTMLとは【初心者向け】

Pythonで画像の座標を取得する方法を現役エンジニアが解説【初心者向け】

CSSのリンクの色を変えない方法を現役エンジニアが解説【初心者向け】

HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】

JavaScriptでリンク先を新しいタブで開く方法を現役エンジニアが解説【初心者向け】

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

別ウィンドウとは

HTMLのリンクで別ウィンドウを開く方法

実際に書いてみよう

通常のリンク（同じタブでページを移動）

別タブで開くリンク

執筆してくれたメンター

HTMLを学習中の方へ

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ