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

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

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

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

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

3回答

5397閲覧

position:relative, position:absoluteを用いたデザインを崩れさせずにレスポンシブにしたい

pppppppppp

総合スコア6

CSS3

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

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/07/27 13:54

編集2020/07/29 02:10

イメージ説明
イメージ説明
##ききたいこと
デバイスごとに@mediaでデザインをし直す以外に、
レスポンシブができる方法を知りたい。
##やりたいこと
以下のようなPC用サイトの、スマホ版をつくりたいです。
親要素にposition:relative;
子要素にposition:absolute;を適用させたデザインにしています。

##困っていること
デバイスのサイズを変えると、デザインが大幅に崩れてしまう。
iphone X用、iphone5用、ギャラクシー用、ipad用…などそれぞれに@mediaで対応デザインを作っています。
しかしアジア製の私が知らないデバイスもあり、
全てのデバイスに対応するようにデザインをつくることが困難になっています。
##該当コード

html

1 2 <section class="mainvisual"> 3 <img src="export.png"> 4 <div class="bg1-text-div"> 5 <p class="bg1-text"> 6 <span class="bg1-text-color"><i class="fas fa-check mygray"></i> 7 学校や職場でよくものをなくす 8 </span> 9 </p> 10 11 <p class="bg1-text"> 12 <span class="bg1-text-color"><i class="fas fa-check mygray"></i> 13 整理整頓が苦手 14 </span> 15 </p> 16 17 <p class="bg1-text"> 18 <span class="bg1-text-color"><i class="fas fa-check mygray"></i> 19 よくケアレスミスをしてしまう 20 </span> 21 </p> 22 </div> 23 <p class="bg2-text"> 24 <span class="bg2-text-color"> 25 生きづらさを感じるあなたは<br> 26 ADHDかもしれません 27     </span> 28 </p> 29 <div class="bg3"></div> 30 <a href="test/03b.html"> 31 <p class="bg3-text"> 32 今すぐ診断チェック→ 33 </p></a> 34 </section>

css

1// mainvisualの設定 2 #mainvisual { 3 position: relative; 4 height: 600px; 5 } 6 7 .mainvisual img { 8 height: 600px; 9 object-fit: cover; 10 position: absolute; 11 z-index: -4; 12 width: 1300px; 13 padding-left: 5%; 14 padding-right: 5%; 15 padding-top:3%; 16 } 17@media (max-width: 1100px){ 18 .mainvisual img { 19 height: 600px; 20 object-fit: cover; 21 position: absolute; 22 z-index: -4; 23 max-width: 900px; 24 /* padding-left: 5%; 25 padding-right: 5%; */ 26 padding-top:3%; 27 }} 28 29 @media (max-width: 780px){ 30 .mainvisual img { 31 height: 600px; 32 object-fit: cover; 33 position: absolute; 34 z-index: -4; 35 max-width: 700px; 36 /* padding-left: 5%; 37 padding-right: 5%; */ 38 padding-top:3%; 39 }} 40//以下mainvisualについて各デバイスごとの設定が続く、省略 41 42//bg-textの設定 43.bg1-text-div{ 44 padding-top: 20px; 45 } 46 47 .bg1-text { 48 font-size: 30px; 49 color: #7f7f7f; 50 margin: 0px; 51 padding-left: 20px; 52 } 53 54 .bg1-text-color{ 55 background-color:#f1f1f1; 56 } 57 @media (max-width: 450px){ 58 59 .bg1-text { 60 font-size: 25px; 61 color: #7f7f7f; 62 margin: 0px; 63 padding-left: 20px; 64 } 65 66 .bg1-text-color{ 67 background-color:#f1f1f1; 68 }} 69 70 @media (max-width: 375px){ 71 .bg1-text { 72 font-size: 22px; 73 } } 74//以下、bg1-textについてデバイスごとの設定が続く、省略 75 76//bg-2-text,bg3の設定 77 .bg2-text { 78 font-size: 45px; 79 color: #fff; 80 padding-top: 260px; 81 padding-left: 810px; 82} 83 84.bg2-text-color{ 85 background-color:#A5CAD2; 86} 87 88.bg3 { 89 background: #FF7A89; 90 height: 80px; 91 width: 30%; 92 position: absolute; 93 top: 820px; 94 right: 150px; 95 border-radius: 50px; 96 z-index: -1; 97 box-shadow: 3px 3px 6px rgba(0, 0, 0, .26); 98} 99 100.bg3:hover { 101box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .26); 102 -webkit-transition: all .3s ease-out; 103 transition: all .3s ease-out 104 } 105 106.bg3-text { color: #F1f1f1; 107 height: 80px; 108 width: 30%; 109 position: absolute; 110 top: 790px; 111 right: 110px; 112 font-size:35px; 113} 114@media (max-width: 1100px){ 115 .bg2-text { 116 font-size: 35px; 117 top: 90%; 118 } 119 120 .bg3 { 121 height: 80px; 122 width: 30%; 123 position: absolute; 124 top: 50%; 125 bottom:0%; 126 right: 90% 127 } 128 129 .bg3-text { color: #F1f1f1; 130 height: 80px; 131 width: 30%; 132 position: absolute; 133 top: 49%; 134 bottom:0%; 135 right: 14%; 136 font-size:30px; 137}} 138 @media (max-width: 450px){ 139 .bg2-text { 140 font-size: 25px; 141 top: 90%; 142 padding-left: 5%; 143} 144 .bg3 { 145 height: 80px; 146 width: 80%; 147 position: absolute; 148 top: 92%; 149 bottom:0%; 150 right: 10%; 151 left:10%; 152} 153 154.bg3-text { 155 height: 80px; 156 width: 80%; 157 position: absolute; 158 top: 90%; 159 bottom:2%; 160 right: 8%; 161 left:12%; 162 font-size:30px;}} 163 164//以下、bg3-text, bg3についてデバイスごとの設定が続く、省略 165

省略させていただきましたが、このように@mediaでデバイスごとに設定を繰り返していることをしてしまっています。
「こんな方法がある!」というものでも構いませんので、示唆をいただけますと幸いです。
宜しくお願い致します。

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

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

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

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

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

-millmill-

2020/07/28 11:00

私の環境に載せてみましたが、、、、 掲載されたソースでは、正直なところ 最終的にどのようなデザインを求めておられるのか判断できません。。。 崩れていないバージョンがあるのでしたら キャプチャを載せて頂けませんか?
pppppppppp

2020/07/28 13:26

PC用、SP用を追記しました。宜しくお願い致します。
pppppppppp

2020/07/28 13:26

説明不足、申しわけございません。
-millmill-

2020/07/29 00:52

ソースの不足ではなく、、、、 ご質問のソースを実際に表示させて見ると 元もレスポンシブも崩れすぎていて。。。 どうしたいのか? が分からないのです。 ++++++ 元はこの仕上がりで、この位置関係でいいの? 画面に対して、画像に余白が入っているけれどこのままにするの? レスポンシブはこれの文字やボタンを寄せてきたいだけ? 画像がはみ出るけど、いいの? ・・・ +++++++ InoseKeikoさんが見ているものと違うかもしれませんので 私の方でキャプチャしたものを アルバムサイトにアップしました(画像は適当なのをはめてます) http://30d.jp/millmill-mi/1 ※今日1にちのみ共有にしています。 もしこれが、実際のソースならば レスポンシブ以前に、 最終形を考えながら元のcssを きちんと作られた方が良いのでは? と思ってしまいますが、、、
pppppppppp

2020/07/29 02:12

なるほど、大変失礼いたしました。 画像を追記しました。 レスポンシブ対応を色々していたら、元のデザインも壊れてしまって、、、 XDで作ったモックデザインを取り急ぎご共有します。
-millmill-

2020/07/29 02:18

ありがとうございます^^ ヒントでの回答を入れていますが もう少し丁寧な解答をしますので少しお待ち下さいね
pppppppppp

2020/07/29 02:27

とても助かります、、、!!!ありがとうございます。お待ちしています
guest

回答3

0

ベストアンサー

回答が2重になってしまいますが
ざっくり修正したものを載せますね


htmlを組む際は、移動させる要素をブロックとして考えます
InoseKeikoさんのモックだと

1.背景画像、2.左上リンク 3.右下テキストとボタン

に分けられますので
以下のように3つのブロックを作ります

html

1<section class="mainvisual"> 2 <img src="" alt=""/> 3 <div class="bg1-text-div"> 4 <p class="bg1-text"><!-- 略 --></p> 5 <p class="bg1-text"><!-- 略 --></p> 6 <p class="bg1-text"><!-- 略 --></p> 7 </div> 8 9 <div class="bg3"> 10 <p class="bg2-text"><!-- 略 --></p> 11 <a href="test/03b.html"><p class="bg3-text">今すぐ診断チェック→</p></a> 12 </div> 13</section>

html5から <a href=""><p>テキスト</p></a> も認められるようになりましたが
最新の仕様で使えない場合もありますので
基本的には <p><a href="">テキスト</a></p> を使う事をお勧めします


cssは%やvhなどの可変単位を使う事で
余計なブレークポイントを作らなくて済みます

htmlの枠組みに対する部分を修正しています。
(spanなど以下に掲載していない装飾などはご自身で^^)

css

1* {box-sizing: border-box; } /* 追加 */ 2.mainvisual { 3 position: relative; 4 height: 100vh; /* 変更 */ 5 max-width: 100% /* 追加 */ 6} 7 8.mainvisual img { 9 /* height: 600px; 削除 */ 10 object-fit: cover; 11 position: absolute; 12 z-index: -4; 13 /* width: 1300px; padding-top:3%; 削除 */ 14 padding-left: 5%; 15 padding-right: 5%; 16 width: 100%; /* 追加 */ 17 height: 80vh; /* 追加 */ 18 max-height: 600px; /* 追加 */ 19} 20 21.bg1-text-div{ 22 padding-top: 20px; 23} 24 25.bg1-text { 26 font-size: 30px; 27 color: #7f7f7f; 28 margin: 0px; 29 /* padding-left: 20px; 削除 */ 30} 31 32.bg3 { 33 position: absolute; /* 元の設定からこれだけ残し他は全部削除 */ 34 bottom: 5%; /* 追加 */ 35 right: 0; /* 追加 */ 36 width: auto; /* 追加 */ 37 text-align: center; /* 追加 */ 38} 39 40 .bg2-text { 41 color: #fff; 42 font-size: 45px; 43 text-align: left; /* 追加 */ 44 /* padding-top: 260px; 削除 */ 45 /* padding-left: 810px; 削除 */ 46} 47 48.bg3-text { 49 /* height: 80px; 削除 */ 50 /* width: 30%; 削除 */ 51 /* position: absolute; 削除 */ 52 /* top: 790px; 削除 */ 53 /* right: 110px; 削除 */ 54 color: #F1f1f1; 55 font-size:35px; 56 background: #FF7A89; /* bg3から移動 */ 57 border-radius: 50px; /* bg3から移動 */ 58 box-shadow: 3px 3px 6px rgba(0, 0, 0, .26); /* bg3から移動 */ 59 padding: 0 10px; /* 追加 */ 60 line-height: 2.28; /* font-sizeに対して可変 / 追加 */ 61 display: inline-block; /* 追加 */ 62 margin: 20px auto 0; /* 追加 */ 63}

サイズはほぼ可変ですから
画面サイズが小さくなって文字が折れる辺りで
ブレークポイントを作り
font-sizs をvw指定にしてしまえば
ブレークポイントは
1箇所、多くても2か所で済みますよ。

画面に対して上や左右に余白を入れたい場合は
.mainvisual
に padding を入れて下さいm(__)m


先の回答でも言いましたが
正直今のcssはレスポンシブ以前。。。
もっとcssを学ばないと、ですね^^

投稿2020/07/29 03:34

編集2020/07/29 04:27
-millmill-

総合スコア674

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

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

-millmill-

2020/07/29 04:11 編集

ボタンの高さも可変になるよう、cssを少し修正しました^^;;
pppppppppp

2020/07/29 18:19

ありがとうございます、、、!まさかこんな詳しく教えて下さるなんて思いませんでした。 本当に本当に感謝しています。ありがとうございます。 無事できそうです、、、ままコピペではなく、意味を調べながら書いています。 ちゃんと構造化して、大きな要素からデザインを適用させていかないといけないのですね。 しっかり1から勉強します。 ありがとうございました!!!
guest

0

ご質問のソースをレスポンシブにしようとすると
ほぼ書き換えになってしまいますので、、、

おおよその修正ポイントを


  1. 基本のwrapとなる
<section class="mainvisual">

cssでは #mainvisual
と、ID指定で これではそもそもpositionの意味をなしていません。

  1. paddingでのはみ出しを予防する為 box-sizing をかける

  2. どうしても必要な部分以外にwidthを指定しない

  3. .mainvisual .mainvisual img

可変させるために max-width: 100%; を入れる

  1. 左右の位置・paddingは極力 % で指定

  2. <div class="bg3"></div> 空タグにせず中にリンクテキストを入れる


細かく見ればツッコミどころはまだまだありますが、、、

レスポンシブうんぬん、の前に
初歩的なミスをなくす事、そして
もう少し css の各プロパティの働きや単位の意味をきちんと理解してください。

ベースとなるcssをきちんと作ってからレスポンシブに進まないと、
最終的に余計な手間が掛かるばかりになると思います^^;;

投稿2020/07/29 01:42

-millmill-

総合スコア674

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

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

pppppppppp

2020/07/29 02:27

ありがとうございます。 すべて独学でpx指定でずっと作ってました。 1から勉強しなおします、、、!
guest

0

面倒くさい時はheight:0;にして
padding-bottom: 〇〇%;
or
padding-bottom: 〇〇vw;
で高さを出してあげて子要素にposition: absolute;
top:〇% or 〇vw
にしてあげると最小限で済むこともある。
画像の場合はwidth:〇%;で原寸計算してあげれば
リサイズされても画面幅の割合で表示されてくれるので便利です。
画像のみのLPとかによく使います。

例になります。

<style> * { margin: 0; padding: 0;} .mainvisual { position: relative; height: 0; padding-bottom: 47vw; background: #ccc; } .mainvisual img { background: #aaa; width: 100%; height: 100%; border: solid 1px; position: absolute; top: 0; left: 0; } .bg1-text-div, .bg2-text { font-size: 1.6vw; position: absolute; } .bg1-text-div { top: 10vw; } .bg2-text { top: 22vw; } </style>

投稿2020/07/28 02:55

wing283

総合スコア122

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

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

pppppppppp

2020/07/28 13:25

トライしてみます!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問