質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

2276閲覧

html5のtarget属性について

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2016/04/19 00:13

編集2016/04/20 00:04

###前提・実現したいこと
target属性についてわからないことがあります。複数のリンク先に同じ属性値を指定している場合、続けてリンクをクリックすると後からクリックしたリンクが、先にクリックして開いたタブで、ページを切り替えて表示されるとのことですが、どうもうまくいきません。

エラーメッセージ
エラーメッセージはないのですが、挙動がおかしいです。下記のソースのリンク先をクリックすると、はじめにgoogle.comをクリックし、その後facebook.comをクリックするとgoogle.comを開いてタブでfacebook.comが開かれるのですが、逆にfacebook.comをはじめに開き、次にgoogle.comを開くと別のタブでgoogle.comが開かれます。何かが作用してこのようなことが起こっているのであれば、その原因として何が考えられるでしょうか。

###該当のソースコード
<!DOCTYPE html>

<html lang="ja"> <head> <meta charset="utf-8"> <title>ページのタイトル</title> <link rel="stylesheet" href="../common/css/normalize.css"> <link rel="stylesheet" href="../common/css/style.css"> </head> <body> <div id="page"> <header id="pageHead"> <h1 id="siteTitle">komorikomasha</h1> <p id="catchcopy">1人じゃできないことも、力を合わせればできる。やってみたいをカタチにする、3人の楽しいものづくり。</p> </header> <div id="pageBody">
<div id="pageBodyMain"> <article> <header class="articleDetailHead"> <h1 class="pageTitle">Cafe Debut</h1> <figure> <img src="./images/img-01-01.jpg" alt="" width="720" height="390"> </figure> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞 (<a href="http://contest.basercms.net/">受賞結果はこちら</a>)</p> </header> <section class="articleDetailBody"> <h2 class="heading-typeA">いますぐ、はじめられるカフェサイトテーマ!</h2> <p>baserCMSは、「コーポレートサイトにちょうどいい」をキャッチコピーにしたcake PHPベースの国産CMS。Cafe Debutは、baseCMSのテーマコンテスト2012に応募するために、チームこもりこましゃで作成しました。</p> <p>baserCMSのインストールと、Cafe Debutテーマの初期設定を行ったら、あとはあなたのスマートフォンのInstagramで写真を撮っていくだけ。</p> <p>Instagramのおしゃれ写真で、すぐに素敵なカフェサイトが出来上がっちゃうフォトログ風baserCMSテーマです。</p> <table> <caption>制作担当</caption> <tr> <th>コモモ</th> <td>企画・デザイン・baserCMSテーマのベース組込み担当</td> </tr> <tr> <th>モリコ</th> <td>HTML/CSSコーディング担当</td> </tr> <tr> <th>ひろましゃ</th> <td>プラグイン制作、テーマ実装の難しいところとか担当</td> </tr> </table> <section> <h3 class="heading-typeB">プラグインでInstagramと連携</h3> <p>プラグインでInstagramと連携して、トップページにInstagramで撮影した写真がすぐに反映されます。</p> <figure> <img src="./images/img-01-01.jpg" alt="撮影した料理の写真もすぐにトップページ確認できます。" width="720" height="390"> <figcaption>今日のランチのローストビーフサンドを撮影♪</figcaption> </figure> </section> <section> <h3 class="heading-typeB">レスポンシブデザインでスマートフォン、タブレット表示も快適</h3> <p>さまざまなデバイスの表示対応に、レスポンシブデザインを採用しました。Instagramでお店のメニューを撮影してすぐにスマートフォンで確認できるのも嬉しい♪</p> <figure> <img src="./images/img-01-01.jpg" alt="スマートフォン・タブレット・パソコンで表示を確認すると、それぞれレイアウトが変わります。" width="720" height="390"> <figcaption>左からiPhone、iPad、MacBook Airで表示確認</figcaption> </figure> </section> <section> <h3 class="heading-typeB">Webフォントだから、飾り文字やアイコンもキレイ</h3> <p>サイトのタイトルやナビゲーション、主要な見出しはGoogle Web Font、アイコンはウェブフォント(Fontello)を採用しています。拡大縮小されるスマートフォンやタブレットでも解像度を気にすることなくキレイな文字とアイコン表示を実現できました。</p> <figure> <img src="./images/img-01-01.jpg" alt="スマートフォンの画面でも文字とアイコンの表示が劣化しません。" width="720" height="390"> <figcaption>iPhoneの画面に近づいても・・( ゚д゚)ハッ!キレイ</figcaption> </figure> </section> </section> <footer class="articleDetailFoot"> <section> <h2 class="heading-typeC">関連リンク</h2> <ul> <li><a href="http://basercms.net/themes/archives/14">Cafe Debutのダウンロードページ</a></li> <li><a href="http://cafedebut.cat-speak.net/">Cafe Debutのデモページ</a></li> <li><a href="http://basercms.net/">baser CMS公式サイト</a></li> <li><a href="http://instagram.com/">Instagram公式サイト</a></li> </ul> </section> <aside class="creditUnit"> <p>撮影協力</p> <h2 class="heading-typeC">kitchen nest</h2> <p>北海道札幌市中央区南3条西8丁目 大洋ビル2階</p> <ul> <li><a href="http://www.google.com" target="new">http://www.google.com</a></li> <li><a href="http://www.facebook.com" target="new">Facebookページ</a></li> </ul> <p>Cafe Debutテーマのイメージ撮影にご協力いただきました。とっても素敵なお店です。</p> </aside> </footer> </article> </div> <div id="pageBodySub"> <section class="newsList"> <h2>おしらせ</h2> <ul> <li><time datetime="2013-10-01">2013.10.01</time> コモモとモリコで、書籍「HTML/CSSの教科書(仮題)」を執筆中です。お楽しみに。</li> <li><time datetime="2013-10-01">2013.10.01</time> コモモ・モリコ・ひろましゃ3人のサイト「komorikomash」をオープンしました。</li> </ul> </section> </div>
</div> <footer id="pageFoot"> <p id="copyright"><small>Copyright&copy; 2013 @komorikomasha All Rights Reserved.</small></p> </footer> </div> </body> </html>

###試したこと
友人のパソコンでもやってみましたが、やはり同じことが起こっていました。また、上のように設定すると、普通はきちんと動作することが確認できました。すなわち、はじめにgoogleを選択しようが、facebookを選択しようが同じタブで開かれます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こちらが参考になるのでは。

別ウィンドウ target="new" - HTML 解決済 | 教えて!goo
http://oshiete.goo.ne.jp/qa/4344852.html

投稿2016/04/19 07:42

zico_teratail

総合スコア907

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問