質問編集履歴
2
文法の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -54,8 +54,9 @@
|
|
|
54
54
|
### Flexboxを使った方が良いという点について
|
|
55
55
|
今回のような例ではFlexboxを使ったほうが良いというのは重々承知です。
|
|
56
56
|
実際には、トップバーやサイドバー等をGridを用いてレイアウトし、グリッドの内部にFlexboxで各要素をレイアウトしたのですが、バーに対してborderやmarginを設定したいと思ったのがきっかけです。
|
|
57
|
-
質問用に
|
|
57
|
+
質問用に似たような状況になるコードを書いたのですが、簡単すぎて最初からスペースを指定する意味がないものになってしまいました。
|
|
58
58
|
長いコードをそのまま乗せるわけにもいかないですし難しいですね・・・。
|
|
59
|
+
少なくともGridで作成するのは明らかにおかしいと言われるようなレイアウトではないと思います。
|
|
59
60
|
### 要素の数がパフォーマンスに与える影響について
|
|
60
61
|
Javascriptで動的に要素を変化させようと考えているのですが、操作のレスポンスに少しでも影響がないようにと思い、要素の増加によるパフォーマンスの影響を懸念しました。
|
|
61
62
|
他言語的に考えると、DOM要素の移動等の操作を行う際、オブジェクト(要素)をコピーして移動させるか、あるいは参照先を付け替えるだけかと思うのですが、これに関する記述を見つけられませんでした。
|
1
回答に対して追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -45,4 +45,28 @@
|
|
|
45
45
|
align-self: center;
|
|
46
46
|
}
|
|
47
47
|
```
|
|
48
|
-
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
**s8_chuさんの回答に対して追記**
|
|
54
|
+
### Flexboxを使った方が良いという点について
|
|
55
|
+
今回のような例ではFlexboxを使ったほうが良いというのは重々承知です。
|
|
56
|
+
実際には、トップバーやサイドバー等をGridを用いてレイアウトし、グリッドの内部にFlexboxで各要素をレイアウトしたのですが、バーに対してborderやmarginを設定したいと思ったのがきっかけです。
|
|
57
|
+
質問用に簡単なコードを書いたのですが、簡単すぎて最初からスペースを指定する意味がないものになってしまいました。
|
|
58
|
+
長いコードをそのまま乗せるわけにもいかないですし難しいですね・・・。
|
|
59
|
+
### 要素の数がパフォーマンスに与える影響について
|
|
60
|
+
Javascriptで動的に要素を変化させようと考えているのですが、操作のレスポンスに少しでも影響がないようにと思い、要素の増加によるパフォーマンスの影響を懸念しました。
|
|
61
|
+
他言語的に考えると、DOM要素の移動等の操作を行う際、オブジェクト(要素)をコピーして移動させるか、あるいは参照先を付け替えるだけかと思うのですが、これに関する記述を見つけられませんでした。
|
|
62
|
+
もし前者なら、多くの要素を持つコンテナの作成・操作を行うと、大量にコピーが発生するのではと考えました。
|
|
63
|
+
「かなり大量に」と表現されているので、10～20程度の要素を内包するコンテナを50～100程度表示させることになると思いますが、この程度なら問題ないと考えてよいでしょうか。
|
|
64
|
+
もしDOM操作の仕組みについてもご存知でしたら教えていただけると嬉しいです。
|
|
65
|
+
### 回答のコードについて
|
|
66
|
+
3つも紹介していただいてありがとうございます。
|
|
67
|
+
いくつか方法はあるのですね。
|
|
68
|
+
確かにこの中なら疑似要素を用いたものが使いやすそうです。
|
|
69
|
+
直感的にも分かりやすくてありがたいです。
|
|
70
|
+
仮にs8_chuさんが同様の操作を行いたい場合、コンテナの作成も含めてどのように実現されますか？
|
|
71
|
+
ソースがないので難しいとは思いますが、HTMLやレイアウトを変えても問題ありません。
|
|
72
|
+
(上に書いたように2次元的な配置なのでGridが向いていると考えましたが、Gridのセルの代わりにコンテナを作成すれば、Flexboxで敷き詰めても無理なくレイアウトできる程度です。)
|