でも、chromeの検証モードでスマートフォンサイズにするとiphone5とiphone6などでずれてしまいます。
どうしたらどんな画面サイズでも崩れずに4つの図形の位置関係を維持できるでしょうか。
各図形の位置の指定はposition:relativeで行っています。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/07 00:46
2017/09/07 13:27
回答1件
0
ベストアンサー
2つ方法を思いつきましたが、どちらにせよposition: absolute;を使うことになりました。
おそらくrelativeだけだと、ブラウザ間での要素の配置の仕方の違いによって影響を受けてしまうので、あまりうまくいかないと思います。
絶対にrelativeである必要性があるならばすみません、お手上げということにさせて下さい。
##1つ目の方法 : position: (absolute|relative);を親要素に指定、position: absolute;を子要素に指定
CSS : positionの「absolute」「relative」「fixed」のリファレンス
を参考にしました。
4つの図形を一つの要素(親要素)に入れ、その親要素の左上を基準に4つの図形の位置を決める、という方法です。
リンク先によると親要素のpositionはstatic以外である必要があるので、relativeかabsoluteを設定しましょう。下記コードではabsoluteを設定しました。relativeを設定する場合はtop、leftを設定しないことでstaticと同等とみなすことができます。
lang
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>隣接する4つの図形 方法1</title> 6 <style> 7#parent { 8 position: absolute; 9 top: 100px; 10 left: 100px; 11} 12#red { 13 position: absolute; 14 background-color: red; 15 top: 0px; 16 left: 0px; 17 height: 250px; 18 width: 250px; 19} 20#blue { 21 position: absolute; 22 background-color: blue; 23 top: 250px; 24 left: 0px; 25 height: 250px; 26 width: 250px; 27} 28#green { 29 position: absolute; 30 background-color: green; 31 top: 0px; 32 left: 250px; 33 height: 250px; 34 width: 250px; 35} 36#yellow { 37 position: absolute; 38 background-color: yellow; 39 top: 250px; 40 left: 250px; 41 height: 250px; 42 width: 250px; 43} 44 </style> 45</head> 46<body> 47 <div id="parent"> 48 <div id="red"></div> 49 <div id="blue"></div> 50 <div id="green"></div> 51 <div id="yellow"></div> 52 </div> 53</body> 54</html>
ただしcssで記述している分図形のサイズ等を変更するのは面倒です。(変更したら位置も変更する必要あり)
##2つ目の方法 : jsで無理やり
javascriptを使えば、若干コードが汚くなりますが思いどおりに設定するのは意外と簡単にできます。
position: absoluteにしてjavascriptで位置、大きさを取得してその値から位置を決めれば、ブラウザやプラットフォームに関係なく無理やり位置を指定することができます。
lang
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>隣接する4つの図形 方法2</title> 6<script> 7var screen; 8var squares = {}; 9 10window.onload = function(){ 11 screen = document.getElementById("screen"); 12 screen.style.width = window.innerWidth + "px"; 13 screen.style.height = window.innerHeight + "px"; 14 ["red","blue","green","yellow"].forEach(function(color){ 15 squares[color] = document.getElementById(color); 16 17 squares[color].style.position = "absolute"; 18 squares[color].style.height = "250px"; 19 squares[color].style.width = "250px"; 20 squares[color].style.left = "0px"; 21 squares[color].style.top = "0px"; 22 squares[color].style.backgroundColor = color; 23 }); 24 25 function getPx(color,type){ 26 return parseInt(squares[color].style[type].replace("px","")); 27 } 28 29 function setPosition(){ 30 // 青 31 squares["blue"].style.left = getPx("red","left") + "px"; 32 squares["blue"].style.top = getPx("red","top")+ getPx("red","height") + "px"; 33 34 // 緑 35 squares["green"].style.left = getPx("red","left") + getPx("red","width") + "px"; 36 squares["green"].style.top = getPx("red","top") + "px"; 37 38 // 黄 39 squares["yellow"].style.left = getPx("red","left") + getPx("red","width") + "px"; 40 squares["yellow"].style.top = getPx("red","top")+ getPx("red","height") + "px"; 41 } 42 43 setPosition(); 44 screen.addEventListener("click",function(e){ 45 squares["red"].style.left = e.x + "px"; 46 squares["red"].style.top = e.y + "px"; 47 setPosition(); 48 },false); 49}; 50</script> 51</head> 52<body> 53<div id="screen"> 54<div class="square" id="red"></div> 55<div class="square" id="blue"></div> 56<div class="square" id="green"></div> 57<div class="square" id="yellow"></div> 58</div> 59</body> 60</html>
実行後、適当なところをクリックすると4つの正方形が移動しますが、移動後の位置は何かしらの親要素によって決めるのではなく、赤い正方形を基準に決めています。
(方法1ではjsを入れたくなかったのであえて省きましたが、クリックイベントで親要素の位置を変えれば同じ挙動になります。)
つまり赤い正方形をjavascriptで別な適当な場所に配置しても、setPosition関数によってそこを基準にその他の正方形が配置し直されるので、常に互いに接するようになるわけです。
これは赤い正方形の変更に対して比較的強いですが、方法1と違い個別に設定するのは少し面倒になります。
4つの図形が全て同じならオススメの方法です。
まぁ、書いておきながらなんですが、力技ですね。最後の手段でしょう。
(長文失礼しました。m(_ _)m)
投稿2017/09/06 18:09
編集2017/09/06 18:28総合スコア2043
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/07 13:29
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。