下記のようなアイテム要素の大きさがセルの大きさと異なるGridレイアウトを作成した場合に、Gridのセルに対してスタイル操作を行いたい場合です。
この例ではGridである必要はありませんが、要するに決められた場所にそれより小さい要素を置きたい場合を考えています。
左側のセルにはコンテナを設定しており、アイテムの位置指定やボーダー、背景色など、コンテナを設定すれば簡単に設定できます。
それに対して右側のセルにはコンテナを設定していません。
アイテムの位置指定はレイアウトのオプションでできたものの、ボーダーや背景色の設定はできるのでしょうか?
というのも、Gridで大枠のレイアウトを決め、セルの中にFlexboxなどでさらに要素を詰め込んでいったのですが、大きさの異なる要素をまとめたものの位置を調整して背景を設定してmarginを設定して・・・、と設定していくとコンテナだらけになってしまい、この方針は正しいのか疑問に感じました。
編集しやすいだけならコンテナを増やせば良いと思うのですが、要素が増えることでパフォーマンスに影響を及ぼすのではと考えています。
HTTP
1<div id="grid"> 2 <div id="container1"> 3 <div id="item1"> 4 </div> 5 </div> 6<!-- <div id="container2"> --> 7 <div id="item2"></div> 8<!-- </div> --> 9</div>
CSS
1#grid{ 2 display: grid; 3 grid-template-rows: 200px; 4 grid-template-columns: 200px 200px; 5} 6#container1{ 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 background: gray; 11 border: 2px solid black; 12} 13#item1{ 14 background: blue; 15 width: 50px; 16 height: 50px; 17} 18#item2{ 19 background: red; 20 width: 50px; 21 height: 50px; 22 justify-self: center; 23 align-self: center; 24}
s8_chuさんの回答に対して追記
Flexboxを使った方が良いという点について
今回のような例ではFlexboxを使ったほうが良いというのは重々承知です。
実際には、トップバーやサイドバー等をGridを用いてレイアウトし、グリッドの内部にFlexboxで各要素をレイアウトしたのですが、バーに対してborderやmarginを設定したいと思ったのがきっかけです。
質問用に似たような状況になるコードを書いたのですが、簡単すぎて最初からスペースを指定する意味がないものになってしまいました。
長いコードをそのまま乗せるわけにもいかないですし難しいですね・・・。
少なくともGridで作成するのは明らかにおかしいと言われるようなレイアウトではないと思います。
要素の数がパフォーマンスに与える影響について
Javascriptで動的に要素を変化させようと考えているのですが、操作のレスポンスに少しでも影響がないようにと思い、要素の増加によるパフォーマンスの影響を懸念しました。
他言語的に考えると、DOM要素の移動等の操作を行う際、オブジェクト(要素)をコピーして移動させるか、あるいは参照先を付け替えるだけかと思うのですが、これに関する記述を見つけられませんでした。
もし前者なら、多くの要素を持つコンテナの作成・操作を行うと、大量にコピーが発生するのではと考えました。
「かなり大量に」と表現されているので、10~20程度の要素を内包するコンテナを50~100程度表示させることになると思いますが、この程度なら問題ないと考えてよいでしょうか。
もしDOM操作の仕組みについてもご存知でしたら教えていただけると嬉しいです。
回答のコードについて
3つも紹介していただいてありがとうございます。
いくつか方法はあるのですね。
確かにこの中なら疑似要素を用いたものが使いやすそうです。
直感的にも分かりやすくてありがたいです。
仮にs8_chuさんが同様の操作を行いたい場合、コンテナの作成も含めてどのように実現されますか?
ソースがないので難しいとは思いますが、HTMLやレイアウトを変えても問題ありません。
(上に書いたように2次元的な配置なのでGridが向いていると考えましたが、Gridのセルの代わりにコンテナを作成すれば、Flexboxで敷き詰めても無理なくレイアウトできる程度です。)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/20 15:07
2019/06/20 18:19
2019/06/21 07:35
2019/06/21 09:24
2019/06/23 08:10