Title: レスポンシブデザインがうまく嵌まらない Last modified: 2019年10月3日 --- # レスポンシブデザインがうまく嵌まらない * [stream2930](https://ja.wordpress.org/support/users/stream2930/) * (@stream2930) * [7年前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e5%b5%8c%e3%81%be%e3%82%89%e3%81%aa%e3%81%84/) * CSSに関する質問で恐縮なのですが、 ・トップページの誘導用リンクのボックスが本文 と重なってしまう。 ・他のページで右寄せした文字が画面外に出てしまう。 上記2点 で困っています。 スタイルシートを貼っておきます。 よろしくご教示ください。 * ``` /**************************************** スマホ用 ****************************************/ @media screen and (max-width:640px){ body .page-template-page-1 { max-width:640px; } /* ページヘッダー */ body.home header { background-size:cover; background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg"); width:100%; height:200px; } header img{ background-size:cover; display:inline-block; margin-left:auto; margin-right:auto; } h1 { position:absolute; top:0; left:0; margin-left:50px; margin-top:100px; color:#fff; font-size:24pt; } ul#menu-menus { width:600px; border-top:solid 2px #fff; height:35px; border-bottom:solid 2px #fff; display:block; margin-left:auto; margin-right:auto; } ul#menu-menus li { width:100px; list-style-type: none; font-size:11pt; text-align: center; margin:auto; float:left; } ul#menu-menus li a { line-height: 35px; color: #fff; } ul#menu-menus li a:hover { color: #fff; width:10px; opacity:0.5; } ul#menu-menus li:last-child{ margin-right: 0; } header img { background-size:cover; /* width:640px; height:200px; */ } .right-dw { display:inline-block; position:relative; width:100%; float:left; } header nav { display: none; } /* コンテンツエリア */ article { width:100%; display:block; position:relative; margin-left:5px; margin-right:5px; } img { max-width:100%; height:auto; margin: 5px 5px 5px 5px; float:left; background-size:cover; } .right-dw { clear:both; display:block; position:relative; width:100%; float:left; } .glay { border:dotted 2px #696969; display:block; color:#696969; padding:2px; margin-top:10px; position:absolute; bottom:0; right:0; } } ``` * ヘルプの必要なページ: _[リンクを見るには[ログイン](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fja.wordpress.org%2Fsupport%2Ftopic%2F%25E3%2583%25AC%25E3%2582%25B9%25E3%2583%259D%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%2596%25E3%2583%2587%25E3%2582%25B6%25E3%2582%25A4%25E3%2583%25B3%25E3%2581%258C%25E3%2581%2586%25E3%2581%25BE%25E3%2581%258F%25E5%25B5%258C%25E3%2581%25BE%25E3%2582%2589%25E3%2581%25AA%25E3%2581%2584%2F%3Foutput_format%3Dmd&locale=ja)]_ 4件の返信を表示中 - 1 - 4件目 (全4件中) * [CG](https://ja.wordpress.org/support/users/du-bist-der-lenz/) * (@du-bist-der-lenz) * [7年前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e5%b5%8c%e3%81%be%e3%82%89%e3%81%aa%e3%81%84/#post-11658809) * スタイルシートは知りませんが、コンテナを全幅からボックスにするとか、誘導用リンク と本文の間に、スペーサーを挟んではどうでしょうか。 * [ishitaka](https://ja.wordpress.org/support/users/ishitaka/) * (@ishitaka) * [7年前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e5%b5%8c%e3%81%be%e3%82%89%e3%81%aa%e3%81%84/#post-11658812) * > 誘導用リンクと本文の間に、スペーサーを挟んではどうでしょうか。 * position: absolute は絶対位置への配置なので、他の要素（この場合は p ）の領域に 影響を受けなくなります。よって誘導用リンクと本文の間にスペースを挟んでも重なり ます。領域自体を広げなければなりません。position: absolute を使用しない方法（ HTML の変更が必要）で対応されたほうがいいかと思います。 なお、WordPress という より HTML+CSS についてのご質問に見受けられます。このフォーラムは WordPress の フォーラムです。他のフォーラムなどの方が回答が得やすいと思います。 * [ishitaka](https://ja.wordpress.org/support/users/ishitaka/) * (@ishitaka) * [7年前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e5%b5%8c%e3%81%be%e3%82%89%e3%81%aa%e3%81%84/#post-11658814) * > 他のページで右寄せした文字が画面外に出てしまう。 * こちらは、下記スタイルを追加してみてください。 * ``` #main { display: block; } #main-1 { width: 100%; } ``` * [munyagu](https://ja.wordpress.org/support/users/munyagu/) * (@munyagu) * [7年前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e5%b5%8c%e3%81%be%e3%82%89%e3%81%aa%e3%81%84/#post-11658815) * トップページは、style.css の 393 行目を `bottom: -20px;` としてください。 * 下層ページは、`#main-1` を `@media screen and (max-width:640px){` のメディアク エリの中で * ``` #main-1 { max-width: 100%; width: 100%; } ``` * としてください。 ちょっとずれているので、369行目～370行目の margin を以下のよう に変えてください。 * ``` padding-left: 5px; padding-right: 5px; box-sizing: border-box; ``` * これ以上は、他で聞かれた方が良いかと思います。 4件の返信を表示中 - 1 - 4件目 (全4件中) トピック「レスポンシブデザインがうまく嵌まらない」には新たに返信することはできま せん。 ## タグ * [テーマ](https://ja.wordpress.org/support/topic-tag/%e3%83%86%e3%83%bc%e3%83%9e/) * [自作](https://ja.wordpress.org/support/topic-tag/%e8%87%aa%e4%bd%9c/) * フォーラム: [その他](https://ja.wordpress.org/support/forum/miscellaneous/) * 4件の返信 * 4人の参加者 * 最後の返信者: [munyagu](https://ja.wordpress.org/support/users/munyagu/) * 最後の活動: [7年前](https://ja.wordpress.org/support/topic/%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e5%b5%8c%e3%81%be%e3%82%89%e3%81%aa%e3%81%84/#post-11658815) * 状態: サポート関連の質問ではありません ## トピック ### 人気のトピック ### 返信がないトピック ### サポート関連ではないトピック ### 解決済みのトピック ### 未解決のトピック ### すべてのトピック