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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Q&A

解決済

3回答

887閲覧

aタグの表示名をurlにするとaタグが二つ生成されるのを修正したい。

minyouyuu

総合スコア39

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

0グッド

0クリップ

投稿2019/08/16 23:45

編集2019/08/17 01:00

html

1<p>詳細は、<a href="https://www.google.com/" class="admin-detail" target="_blank">https://www.google.com/</a>からどうぞ!</p>

現在、マークダウンファイルにhtmlを記載しております。
<a href="url">url</a>のように、aタグの表示名をurlにしたいと考え、
上記のようにhtmlを記載しました。

しかし、この部分を開発者ツールで見てみると以下のように、aタグが二つ生成されていました。

html

1<p>詳細は、 2<a href="https://www.google.com/" class="admin-detail" target="_blank"></a> 3<a href="https://www.google.com/">https://www.google.com/</a>からどうぞ! 4</p>

aタグが二つ生成されるのをなくし、aタグの表示名をurlにするにはどのようにすればよいですか?

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

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

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

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

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

kei344

2019/08/17 00:44

提示されたコードで問題が再現しません。実際のコードを提示されてはいかがでしょうか。
minyouyuu

2019/08/17 01:02

再現の試みまでしてくださり、ありがとうございます!ソースコードを修正しました。こちらのコードで発生しております。また、今回、普通のhtmlファイルではなく、マークダウンファイルにhtmlを記述しているので、それが影響しているのかなとも思っています...
kei344

2019/08/17 02:05

同じく再現しません。出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。
minyouyuu

2019/08/17 05:32

すみません、自己解決いたしました。原因は、htmlファイルではなく、マークダウンファイルにhtmlを記載したためでした。マークダウンファイルにurlを記載すると、自動的にaタグで囲われてしまうようです。普通のhtmlファイルでは、このような現象は起きないようです。お騒がせいたしました。ありがとうございました。
yasutomi

2019/08/17 06:38

hugoのような通常とは異なる環境で制作しているのあれば 質問文に記載するべきです。 別のコメントでも回答しましたが 通常はマークダウンファイルにhtmlを記載したとしても勝手に <p>詳細は、 <a href="https://www.google.com/" class="admin-detail" target="_blank"></a> <a href="https://www.google.com/">https://www.google.com/</a>からどうぞ! </p> のようになったりはしないため hugoを使用していることが原因と見て間違いないです。
guest

回答3

0

Before

HTML

1target=”_blank”

After

HTML

1target="_blank"

おそらく"の間違いでは?

投稿2019/08/16 23:59

kyoya0819

総合スコア10429

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

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

minyouyuu

2019/08/17 05:27

ありがとうございます!確かに、ダブルクォーテーションに誤りがありました。修正しました。
guest

0

自己解決

皆様、お騒がせいたしました。
自己解決いたしました。
原因は、htmlファイルではなく、マークダウンファイルにhtmlを記載したことでした。
マークダウンでは、urlを記載すると、自動的にaタグで囲われてしまうようです。

http:/google.comのように、:の前に\を付けることで、自動的にaタグで囲われなくなることが分かりました。

ご回答、修正依頼をくださった皆様、本当にありがとうございました!

投稿2019/08/17 05:25

編集2019/08/17 05:36
minyouyuu

総合スコア39

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

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

0

普通に考えたら何もしていないのに

html

1<p>詳細は、<a href="https://www.google.com/" class="admin-detail" target="_blank">https://www.google.com/</a>からどうぞ!</p> 2```が 3```html 4<p>詳細は、 5<a href="https://www.google.com/" class="admin-detail" target="_blank"></a> 6<a href="https://www.google.com/">https://www.google.com/</a>からどうぞ! 7</p>

になる可能性は0%なので
JavaScriptなどでDOM操作されているなどが原因です。

投稿2019/08/17 04:33

yasutomi

総合スコア2937

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

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

minyouyuu

2019/08/17 05:32

すみません、自己解決いたしました。原因は、htmlファイルではなく、マークダウンファイルにhtmlを記載したためでした。マークダウンファイルにurlを記載すると、自動的にaタグで囲われてしまうようです。ご回答くださり、本当にありがとうございました!
yasutomi

2019/08/17 06:03

通常はマークダウンファイルにhtmlを記載したとしても勝手に <p>詳細は、 <a href="https://www.google.com/" class="admin-detail" target="_blank"></a> <a href="https://www.google.com/">https://www.google.com/</a>からどうぞ! </p> のようになったりはしません。 別のことが原因なので根本的な問題が解決していないです。 > マークダウンファイルにurlを記載すると、自動的にaタグで囲われてしまうようです。
minyouyuu

2019/08/17 06:23

ありがとうございます。そうなのですか...。そうなると、javascriptは全く使用していないので、原因として思いつくものがないです...。hugoでマークダウンファイルを使用しているので、hugoが原因かもしれないです。もう少し調べてみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問