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

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

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

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

CSS

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

Q&A

1回答

2720閲覧

アンカーリンク後に親要素のmarginが消えてしまいます。

kensay

総合スコア10

HTML

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

CSS

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

0グッド

1クリップ

投稿2015/06/15 13:18

編集2022/01/12 10:55

タイトルの通りなのですが、ページ内のアンカーリンクを使用すると親要素のマージンが無効になってしまい困っています。(contents以下の要素が左に寄ってしまいます)
ページとしては左側に固定幅ナビゲーション、右側に可変幅コンテンツの2カラムデザインです。
初歩的な質問で恐縮ですが、ご教授願えればと思います。

lang

1#container { 2 width: 100%; 3 height: 100%; 4} 5#container #contents { 6 width: 100%; 7 height: 100%; 8 margin-left: 140px; 9 background: rgba(0, 0, 0, 0) url(images/image.jpg) no-repeat fixed center center/ cover; 10 float: left; 11} 12#container #contents:after { 13 content: ""; 14 clear: both; 15 display: block; 16} 17#container #contents #title { 18 width: 100%; 19 height: 100%; 20 min-height: 1080px; 21 22} 23#container #contents #title .titlelogo { 24 top: 30%; 25 left: 50%; 26 position: absolute; 27} 28#container #contents #title #rect { 29 margin: 100px auto 0; 30 position: absolute; 31 top: 80%; 32 left: 51.5%; 33} 34353637以下子要素が続きます。 38 39/*--ナビゲーション--*/ 40#pageNav { 41 width: 120px; 42 margin: 0; 43 padding: 0 0 0 20px; 44 height: 100%; 45 background: #fff; 46 position: fixed; 47 float: left; 48} 49#pageNav:after { 50 clear: both; 51 display: block; 52 content: ""; 53} 54#pageNav li { 55 margin: 0; 56 top: 40%; 57 width: 100%; 58 position: relative; 59} 60#pageNav li a { 61 display: inline-block; 62 width: 80px; 63 line-height: 40px; 64 text-decoration: none; 65 text-align: right; 66 } 67#pageNav li a img { 68 margin: 0 0 5px 0; 69} 70 71

無効になってしまうのは
#container #contents 内のmargin-leftです。
よろしくお願いいたします。

追記
検証したところ、clrome、Operaでは起こらずIEとFireFoxで起こる現象でした。
レンダリングエンジンンの問題なのでしょうか……。

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

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

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

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

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

takutok

2015/06/16 03:17

出来ればHTMLも見たいです。
guest

回答1

0

アンカーが…ではなくて、pageNavがfixedされてfloatしているので、contentsのwidthが100%なら画面幅一杯となります。
なのに、margin-leftに値があるので、画面からはみ出して横スクロールが生まれて、横スクロールするとcontentsがpageNavに隠れてしまう…←そのトリガーがアンカー?
ということでしょうか。

様々なアプローチがあるとは思いますが。。。

pageNavの固定位置が必須であるなら、floatやめて、pageNavの座標を設定し、contentsのmarginをpaddingにするとかでしょうか。

サンプルCSS(試してないので…すいません)

lang

1#container { 2 width: 100%; 3 height: 100%; 4} 5#container #contents { 6 width: 100%; 7 height: 100%; 8 /* margin-left: 140px; ←下行の通りpaddingに変更 */ 9 padding-left:140px; /* ←追加 */ 10 background: rgba(0, 0, 0, 0) url(images/image.jpg) no-repeat fixed center center/ cover; 11 /* float: left; ← 使用しないのでコメントアウト*/ 12} 13/* ↓#container #contents:after はいらないかも。。。 14#container #contents:after { 15 content: ""; 16 clear: both; 17 display: block; 18} 19*/ 20#container #contents #title { 21 width: 100%; 22 height: 100%; 23 min-height: 1080px; 24 25} 26#container #contents #title .titlelogo { 27 top: 30%; 28 left: 50%; 29 position: absolute; 30} 31#container #contents #title #rect { 32 margin: 100px auto 0; 33 position: absolute; 34 top: 80%; 35 left: 51.5%; 36} 37383940以下子要素が続きます。 41 42/*--ナビゲーション--*/ 43#pageNav { 44 width: 120px; 45 margin: 0; 46 padding: 0 0 0 20px; 47 height: 100%; 48 background: #fff; 49 position: fixed; 50 top:0; /* ←追加(最上部からの距離px) */ 51 left:0; /* ←追加(最左部からの距離px) */ 52 /* float: left; ← 使用しないのでコメントアウト*/ 53} 54#pageNav:after { 55 clear: both; 56 display: block; 57 content: ""; 58} 59#pageNav li { 60 margin: 0; 61 top: 40%; 62 width: 100%; 63 position: relative; 64} 65#pageNav li a { 66 display: inline-block; 67 width: 80px; 68 line-height: 40px; 69 text-decoration: none; 70 text-align: right; 71 } 72#pageNav li a img { 73 margin: 0 0 5px 0; 74}

投稿2015/06/16 09:07

noise

総合スコア256

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

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

KatsukiSugiura

2016/04/22 09:23

ボックスモデルの概念、CSSの指定方法を見直した方が良いですね。 #要素 #要素としなくてはいけない状況を避けた方が良いですよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問