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

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

ただいまの
回答率

88.37%

aタグの画面遷移させない方法について

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 8,700

k499778

score 542

現在上記タグの技術を使ってアプリ開発を行っています。

aタグで囲んでいるところをjQueryで処理するため、画面遷移させないようにしました。

調べると以下で無効にできると知りました。

<a href="javascript:void(0);">テスト</a>

ただ実装していて以下だけでも遷移を無効にすることができました。

<a>テスト</a>

私はマウスポインタを変えたかっただけなので、上の書き方で全く問題なかったのですが、

なぜこの書き方がサイトに記されていないのでしょうか?

<a href="javascript:void(0);">テスト</a>
なんて回りくどいことしなくても
<a>テスト</a>
で画面遷移しないのに。
と些細な疑問を持ちましたので、
・とくにこの書き方で問題ないのか?
・<a href="javascript:void(0);">テスト</a>した方がいい理由
・問題なし
など意見を頂けると有り難いです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+4

これはHTML5とそれ以外で答えが変わります。
<a>テスト</a>はHTML5ならOK、HTML4.01とかではNGです。
というのも、HTML5になったときに、それまでa要素はhrefが必須属性でしたが、それがオプションに変更になりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/25 23:00

    回答ありがとうございます。
    そういう経緯があったんですね。知りませんでした。勉強になります。
    ただ逆を言えば、
    HTML5だとaタグのみでも適用できるということなんですね。

    スッキリしました。

    キャンセル

+4

「マウスカーソルを指に変えたいだけ」ならば、「見た目の変更」ですので、以下のようにCSSで記述するのがベストです。

<div class="app-cursor-pointer">テスト</div>
.app-cursor-pointer{
  cursor:pointer;
}

なお、aタグにhrefを書かない場合だと、ブラウザによってはリンクと認識せず、結果としてテキストをhoverしても指カーソルにならない場合があります。(aタグには本来href属性が必須です)
なので上述したようにCSSを使ってスタイリングを行うことを推奨します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/25 23:05

    なぜかスルーされていますが、私もCSSによる実装に同意します。
    HTML5では「a要素がhref属性を持たない場合、要素が関連していたならば、要素は、要素のコンテンツからなる、リンクが別の方法で置かれているかもしれない場所に対するプレースホルダーを表す」とあります。
    すなわち、プレースホルダーではない場合にa要素でマークアップすべきではありません。
    http://momdo.github.io/html51/text-level-semantics.html#the-a-element

    キャンセル

  • 2016/05/25 23:08

    回答ありがとうございます。

    CSSでスタイリングするのも1つですよね。

    今回は自分の意図としては見た目を指カーソルに変えるだけのためにaタグを使っていたのですが、
    そもそもデザインのモックがaタグであり、そこにclass属性を設定していて、幅や高さ、デザインも適用しています。

    なので極力DOMを変えたくないのでaタグのまま使っているという経緯もありました。

    ただあまりCSSで指ポインタを表示するようにしたことがないので、今後参考にさせていただきます。

    ありがとうございました。

    キャンセル

  • 2016/05/25 23:11

    think49さん

    スルーした訳ではなく、今まさに書いていたのです。書きたいことも多かったので最後に書いていました。

    そのようなルールもあるのですね。参考にさせていただきます。

    キャンセル

+2

hrefがなくてもOKなのはHTML5からじゃなかったっけ?

あと、onClickでなんかしたい場合はあると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/25 23:02

    回答ありがとうございます。

    もちろんonClickを使うときは
    <a href="javascript:void(0);">を使うというのは認識しています。

    HTML5から任意になったのですね。
    スッキリしました。ありがとうございます。

    キャンセル

+1

とくにこの書き方で問題ないのか? 

html5だと
hrefを指定しないアンカータグはプレースホルダを意味するものになります。
タグの意味と項目の意図が合っているなら問題なし。

<a href="javascript:void(0);">テスト</a>した方がいい理由 

なし
アンカーにカーソルをもっていくと、リンク先がブラウザに表示されるが
遷移先がjavascript:void(0)になり遷移先が不明なため、ただの不安材料

自分の場合javascript:void(0)よりも
<button type="button">テスト</button>にしてスタイルを調整して使う。

そもそも構造として
遷移も移動もしないのにアンカー張ってどうするんでしょうか?

カーソルの変更だけであれば、cssを使うべきです。

.selector:hover {
    cursor: pointer; /* ポインタ */
    /*        text     テキスト その他いろいろ…*/
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/25 23:35 編集

    回答ありがとうございます。

    プレースホルダを意味するのですか。
    やはりCSSが推奨なのですね。

    遷移する部分ではあるんです。
    遷移はするので元々はaタグだったのですが、
    遷移する前に処理が必要になったため、javascriptで遷移処理をしています。

    そこでaタグはhref属性を指定せず、遷移させないようにしました。
    その時にこの疑問が生まれたのです。
    遷移する部分ではあるので指ポインタにする必要があり、aタグをこのように使っていいのか、あるいはCSSでスタイリングした方がいいのか、といった悩みも解決するため質問した次第であります。

    もともとデザイン会社が作ってくれたHTMLを実装していく運用なので、
    極力タグ要素を変えたくないと思っているのです。aタグにはスタイルも設定されているので。divにすると改行してしまったり、buttonにするとデザインされたアイコンからボタン部分がはみ出したりします。

    それでもaタグを使用しないほうがいいのでしょうか?

    キャンセル

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

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る