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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

13227閲覧

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

k499778

総合スコア599

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/05/25 12:58

編集2016/05/25 12:58

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

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

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

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

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

<a>テスト</a>

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

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

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

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

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

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

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

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

guest

回答4

0

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

html

1<div class="app-cursor-pointer">テスト</div>

css

1.app-cursor-pointer{ 2 cursor:pointer; 3}

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

投稿2016/05/25 13:22

yohira0616

総合スコア255

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

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

think49

2016/05/25 14:05

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

2016/05/25 14:08

回答ありがとうございます。 CSSでスタイリングするのも1つですよね。 今回は自分の意図としては見た目を指カーソルに変えるだけのためにaタグを使っていたのですが、 そもそもデザインのモックがaタグであり、そこにclass属性を設定していて、幅や高さ、デザインも適用しています。 なので極力DOMを変えたくないのでaタグのまま使っているという経緯もありました。 ただあまりCSSで指ポインタを表示するようにしたことがないので、今後参考にさせていただきます。 ありがとうございました。
k499778

2016/05/25 14:11

think49さん スルーした訳ではなく、今まさに書いていたのです。書きたいことも多かったので最後に書いていました。 そのようなルールもあるのですね。参考にさせていただきます。
guest

0

ベストアンサー

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

投稿2016/05/25 13:17

oskbt

総合スコア1895

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

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

k499778

2016/05/25 14:00

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

0

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

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

投稿2016/05/25 13:20

takasima20

総合スコア7458

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

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

k499778

2016/05/25 14:02

回答ありがとうございます。 もちろんonClickを使うときは <a href="javascript:void(0);">を使うというのは認識しています。 HTML5から任意になったのですね。 スッキリしました。ありがとうございます。
guest

0

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

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

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

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

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

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

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

css

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

投稿2016/05/25 14:13

Ryo

総合スコア507

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

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

k499778

2016/05/25 14:40 編集

回答ありがとうございます。 プレースホルダを意味するのですか。 やはりCSSが推奨なのですね。 遷移する部分ではあるんです。 遷移はするので元々はaタグだったのですが、 遷移する前に処理が必要になったため、javascriptで遷移処理をしています。 そこでaタグはhref属性を指定せず、遷移させないようにしました。 その時にこの疑問が生まれたのです。 遷移する部分ではあるので指ポインタにする必要があり、aタグをこのように使っていいのか、あるいはCSSでスタイリングした方がいいのか、といった悩みも解決するため質問した次第であります。 もともとデザイン会社が作ってくれたHTMLを実装していく運用なので、 極力タグ要素を変えたくないと思っているのです。aタグにはスタイルも設定されているので。divにすると改行してしまったり、buttonにするとデザインされたアイコンからボタン部分がはみ出したりします。 それでもaタグを使用しないほうがいいのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問