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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1834閲覧

HTMLのアンカーリンクについて

Naka_work

総合スコア10

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/16 09:46

編集2022/01/12 10:55

Wordpress初心者です。

現在LPページを作成しており、そのページ内でアンカーリンクを設定したところ、PCで見た時にはHtmlとCSSで記述したアンカーリンクがうまく遷移するのですが、スマホだと位置がずれてしまいます。
色々調べてみると、ヘッダーなどをposition:fixedで固定にしている場合ずれるという記事も発見しましたが、特に固定しているわけでもなく、自分のスマホ(android:chrome)からテストページを見てクリックするとずれるのです。

ただ問題なのが、iPhoneを使用しsafariでみると位置はずれておらず、またそのiPhoneからchromeで見てもずれておりませんでした。
デバイスのサイズで位置がずれてしまうのだと思うのですが、解決策が分からず困っております。

何卒ご教授いただければ幸いです。
よろしくお願いいたします。


<追記>
分かりづらい質問で申し訳ございません。
キャプチャを追記させていただきます。

【スマホイメージ】テスト3を押した位置
イメージ説明

上記のようにスマホ表示になると、テスト3の位置がずれてしまいます。
コードは以下の通りです。

html

1<a href="#test1">テスト1</a> 2 3<div id="test1"> 4<h3>テスト1</h3></div>

<追記>
【スマホイメージ】テスト2を押した位置
イメージ説明
【スマホイメージ】テスト3を押した位置
イメージ説明

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

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

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

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

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

yambejp

2019/01/16 09:52

ずれていると言われても・・・スクショでもとってソースと一緒に載せてみては?
CHERRY

2019/01/16 09:57

状況がわかる「画面キャプチャー」と HTML と CSS のソースは、提示することは可能でしょうか?
yoshinavi

2019/01/19 08:43

Chromeでズレるのは、状況によるので、症状が再現するコードを提示されると良いかと思います。
guest

回答1

0

test3のダミーはもっと下の方まであるということでしょうか?
その上でtest3がページの先頭にこないということでしょうか?

ざっくりこんな感じでもずれますか?

HTML

1<div><h3 id="top">TOP</h3></div> 2[ <a href="#test1">テスト1</a> | <a href="#test2">テスト2</a> | <a href="#test3">テスト3</a> ]<br> 3ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 4ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 5ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 6ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 7ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 8ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 9ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 10<div><h3 id="test1">テスト1</h3></div> 11[ <a href="#top">TOP</a> | <a href="#test2">テスト2</a> | <a href="#test3">テスト3</a> ]<br> 12ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 13ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 14ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 15ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 16ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 17ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 18ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 19<div><h3 id="test2">テスト2</h3></div> 20[ <a href="#top">TOP</a> | <a href="#test1">テスト1</a> | <a href="#test3">テスト3</a> ]<br> 21ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 22ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 23ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 24ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 25ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 26ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 27ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 28<div><h3 id="test3">テスト3</h3></div> 29[ <a href="#top">TOP</a> | <a href="#test1">テスト1</a> | <a href="#test2">テスト2</a> ]<br> 30ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 31ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 32ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 33ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 34ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 35ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br> 36ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>ダミー<br>

投稿2019/01/16 10:41

yambejp

総合スコア114572

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

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

Naka_work

2019/01/16 12:08

はい。下まであり、次々とずれていくので最後のテスト9くらいになるとほぼ画面下まで遷移してしまいます。 コードもありがとうございます! 試してみましたが、やはり2くらいからずれていきました。キャプチャ更新しましたので、見ていただけると幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問