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

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

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

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

Q&A

1回答

3826閲覧

HTML5のページ遷移しない、アコーディオンをさせるテキストリンクについて

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

0グッド

0クリップ

投稿2015/07/03 15:48

編集2022/01/12 10:55

ページ遷移しない、アコーディオンをさせるテキストリンクを作りました。
まれに、1.と2.の場合、ページアクセス時に、一度だけページ遷移するような動きをみせて、元のページが表示されるという、バグのような、状態が起こります。
HTML5のページなので、空のリンクの場合、href自体ががいらないという事が原因でしょうか?

1.
<a href="#" style="color:#2489CE;text-shadow: 1px 1px 1px #000;">ログインするには?
</a>
2.
<a href="" style="color:#2489CE;text-shadow: 1px 1px 1px #0a5ba0;">ログインするには?</a>

下記のようにすると問題は起きません。
<a style="color:#2489CE;text-shadow: 1px 1px 1px #000;">ログインするには?</a>

下記ページには、HTML5はhrefはいらないと記載がありますが、無しにすると、下線がなくなり、リンクになっていない様に見えます。
http://blog.w-make.com/web-work/html5-tag/html5_a.html

皆さんHTML5の空リンクはどのようにしていますか?

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

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

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

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

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

guest

回答1

0

<a href=""> とした場合、表示中のページを再読み込みするのは正しい動きです。

表示しているページが index.php のとき
<a href="">
<a href="index.php">
共に同じ動きをします。

ページの読み込みをさせたくないのであれば、
<a href="#">
or
<a href="javascript:void(0);">

のような記述をしなくてはなりません。
html5 とは言っても、決まりどうりに機能が実装されているとは限りませんからあまりルールに縛られては手詰まりになってしまいます。そこは実際の動きがそうなんだから、と割り切らなければ。

HTML5のページなので、空のリンクの場合、href自体ががいらないという事が原因でしょうか?

そんな記事どこにあるんだと思いながらググってみたら、
HTML5 Tag Reference

例えばまだリンク先がまだ存在しない、あるいは存在したが削除された場合など、href 属性を持たない a 要素を配置することでダミーリンクとすることができます。

このことですね。この場合は丸ごと href属性を記述しないということですね。
<a href="">
の動きはhtml4 も html5も同じ動きになりますよ。
form の action と同じことです。

投稿2015/07/03 16:10

編集2015/07/03 16:39
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問