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でフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】

ここでは、HTMLの入力フォームに必要な送信ボタンの設置方法について解説していきます。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方...

HTML

Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】

Herokuを使ってHTMLのwebサイトを公開する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...

HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

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

HTML

HTMLエスケープとURLデコードの違いを現役エンジニアが解説【初心者向け】

HTMLエスケープとURLデコードの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そも...

HTML

HTMLで404errorが起こる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLで404 errorが起こる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでlegendタグの使い方を現役デザイナーが解説【初心者向け】

HTMLでlegendタグの使い方について、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

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

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

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

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] Webデザインで副業する方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

Webデザイン

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

別ウィンドウとは

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

実際に書いてみよう

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

別タブで開くリンク

執筆してくれたメンター

HTMLを学習中の方へ

関連するキーワード

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

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

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

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

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

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

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

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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

別ウィンドウとは

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

実際に書いてみよう

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

別タブで開くリンク

執筆してくれたメンター

HTMLを学習中の方へ

記事を検索

関連するキーワード

関連する記事

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

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

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