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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

1回答

14259閲覧

HTML Gridレイアウトのセルに対してborderなどの設定

brsice

総合スコア17

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

1グッド

0クリップ

投稿2019/06/19 06:57

編集2019/06/20 17:57

下記のようなアイテム要素の大きさがセルの大きさと異なる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で敷き詰めても無理なくレイアウトできる程度です。)

bisteki👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

かなり大量の要素を扱うのであれば、通信時間のコストが大きくなるかもしれませんが、要素数がパフォーマンス低減の直接的な原因になることは少ないと思います。

また、flexbox を用いて簡単に実現出来ることを flexbox を使わずに行なうと、HTML が簡素になる代わりに、CSS が複雑になることがあります。そのため、状況に応じて flexbox を使用するかどうかを判断すると良いと思います。


今回の場合、flex コンテナを用いずに質問者さんの実現したいことを行なう方法は、いくつか存在します。

1 つ目は、background-clip プロパティと padding プロパティを使用する方法です(動作確認用リンク)。これは Grid トラック、Grid アイテム、border のサイズから padding プロパティに設定する値を算出しています。

CSS

1#grid { 2 --grid-size: 200px; 3 display: grid; 4 grid-template-rows: var(--grid-size); 5 grid-template-columns: var(--grid-size) var(--grid-size); 6 grid-gap: 5px; 7} 8 9#container1 { 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 background: gray; 14 border: 2px solid black; 15} 16 17#item1 { 18 background: blue; 19 width: 50px; 20 height: 50px; 21} 22 23#item2 { 24 --border-width: 2px; 25 --item-size: 50px; 26 background: red; 27 width: var(--item-size); 28 height: var(--item-size); 29 justify-self: center; 30 align-self: center; 31 background-clip: content-box; 32 padding: calc((var(--grid-size) - var(--item-size)) / 2 - var(--border-width)); 33 border: var(--border-width) solid; 34}

2 つ目は、border プロパティと outline プロパティを使用する方法です(動作確認用リンク)。具体的な方法は 1 つ目の方法とほとんど変わりません。

CSS

1 2#grid { 3 --grid-size: 200px; 4 display: grid; 5 grid-template-rows: var(--grid-size); 6 grid-template-columns: var(--grid-size) var(--grid-size); 7 grid-gap: 5px; 8} 9 10#container1 { 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 background: gray; 15 border: 2px solid black; 16} 17 18#item1 { 19 background: blue; 20 width: 50px; 21 height: 50px; 22} 23 24#item2 { 25 --border-width: 2px; 26 --item-size: 50px; 27 background: red; 28 width: var(--item-size); 29 height: var(--item-size); 30 justify-self: center; 31 align-self: center; 32 border: calc((var(--grid-size) - var(--item-size)) / 2 - var(--border-width)) solid gray; 33 outline: var(--border-width) solid; 34}

3 つ目は、#item2before, after 擬似要素を重ねる方法です(動作確認用リンク)。個人的に、これは上記 2 つよりも扱いやすいと思います。

CSS

1#grid { 2 display: grid; 3 position: relative; 4 grid-template-columns: 200px 200px; 5 grid-template-rows: 200px; 6 grid-gap: 5px; 7} 8 9#grid > div { 10 color: white; 11 text-align: center; 12} 13 14#container1 { 15 display: flex; 16 border: 2px solid black; 17 background: gray; 18} 19 20#item1 { 21 width: 50px; 22 height: 50px; 23 margin: auto; 24 background: blue; 25} 26 27#item2 { 28 width: 50px; 29 height: 50px; 30 margin: auto; 31 background: red; 32} 33 34#item2::after { 35 z-index: -1; 36 position: absolute; 37 top: 0; 38 right: 0; 39 bottom: 0; 40 left: 0; 41 border: 2px solid #000; 42 background: silver; 43 content: ""; 44 grid-column: 2 / 3; 45 grid-row: 1 / 2; 46}

ここでは 3 つの方法を紹介しましたが、いずれも flexbox を用いる場合よりも CSS が複雑になっていることに注意してください。

これらの方法は、どうしても HTML 構造を変更出来ず、CSS のみで対応しなければならない場合にのみ使うべきです。もし HTML 構造を変更出来るのであれば、flexbox や CSS Grid Layout を使うことが、HTML, CSS を簡潔に保つ良い方法だと思います。

投稿2019/06/20 11:45

s8_chu

総合スコア14731

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

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

brsice

2019/06/20 15:07

回答ありがとうございます。 コメントが長くなったので質問に追記しました。 確認して頂けると嬉しいです。 本筋ではないと思いますので、違和感を感じた部分についてこちらに書きます。 >もし HTML 構造を変更出来るのであれば、flexbox や CSS Grid Layout を使うことが、HTML, CSS を簡潔に保つ良い方法だと思います。 ここで書かれているCSS Grid Layoutは、私が使用しているdisplay: gridとは別物でしょうか? 調べても分からなかったので同じものだとすると、Flexboxのみなら分かるのですが、Gridもあると少し意味が汲み取れません。
s8_chu

2019/06/20 18:19

> 要素の数がパフォーマンスに与える影響について どのように要素を変化させるかによって結論が変化する可能性があります。 詳細をまとめた上で、別質問として投稿していただけませんか? > 回答のコードについて > コンテナの作成も含めてどのように実現されますか? 要素の動的な操作に関して不明な部分が多いため、具体的なコードを記述することが難しいです。コードの詳細を整理した上で、別質問として投稿すると良い解決策が見つかるかもしれません。 > ここで書かれているCSS Grid Layoutは、私が使用しているdisplay: gridとは別物でしょうか? `display: grid` と同じものです。CSS Grid Layout は、flexbox のスーパーセットとして扱われることが多いため、「flexbox や CSS Grid Layout」と併記しました。もし違和感があるようであれば、CSS Grid Layout については無視しても構いません。
brsice

2019/06/21 07:35

読んで頂きありがとうございます。 概ね理解しました。 不親切な質問になってしまい申し訳ありません。 パフォーマンス部分についてはコードを作成するごとに質問するわけにもいかないので、実際に作成してみて動作が遅くなってしまい、どうしても解決したいという場合に質問させていただこうと思います。 この質問でさらに具体的なコードをお聞きするのは失礼かと思いますので、方針としてお聞きしたいです。 要素数は一般的であると仮定して、コンテナを1つ増やしてまとめることで簡潔な記述ができるようになる場合、そちらについて優先的に考えてみるべきですか?
s8_chu

2019/06/21 09:24

> 要素数は一般的であると仮定して、コンテナを1つ増やしてまとめることで簡潔な記述ができるようになる場合、そちらについて優先的に考えてみるべきですか? 基本的には、そのようにすると良いと思います。 要素のネストが多少深くなったとしても、パフォーマンス面での悪影響が顕著に現われることは滅多にありません。 また、ネストが深くなることで HTML が読みづらくなってしまう問題については、Haml や Slim などのテンプレートエンジンを用いて対処出来ます。
brsice

2019/06/23 08:10

少しパフォーマンスに対して敏感になりすぎていたようですね。 これからは要素を増やすことの簡潔さ,便利さを活用していきたいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問