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

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

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

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

Q&A

解決済

1回答

312閲覧

4つの図形を互いに接するように決まった配置を実現したいです。

gunma_user

総合スコア12

CSS

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

0グッド

0クリップ

投稿2017/09/06 13:11

でも、chromeの検証モードでスマートフォンサイズにするとiphone5とiphone6などでずれてしまいます。

どうしたらどんな画面サイズでも崩れずに4つの図形の位置関係を維持できるでしょうか。

各図形の位置の指定はposition:relativeで行っています。

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

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

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

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

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

kei344

2017/09/06 14:23

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
yoshinavi

2017/09/07 00:46

HTMLやCSSのコードの記述の書き方でズレは起こります。まずは、原因を探るためにも、ソースコードの提示が解決への早道かと思います。
gunma_user

2017/09/07 13:27

その通りだと思いました。以後気を付けます。今回はすぐ上の親要素にrelativeを指定して、子要素をabsoluteにしていろいろ変えたらなんとか実現できたみたいです。このたびは大変ありがとうございました。
guest

回答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
namnium1125

総合スコア2043

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

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

gunma_user

2017/09/07 13:29

ありがとうございます! 一つ目の方法で親要素にrelativeを指定したら何とかできました! 二つ目の方法のjsを使ったやつは私には少し敷居が高いですが、今度やってみたいと思います。 このたびは大変助かりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問