どうも！LSSです！！
昨日は参りましたｗ
仕事から帰ってきての限られた時間内で「日付が変わるまでに投稿しよう←いまだ毎日投稿を諦めずにいますｗ」と、記事を書いているうちに、謎のうまくいかない問題に激突！
見切りをつけて、いったんその記事は下書きに保存して、その「問題」を晒すという記事を投稿しました。
投稿後、ほっとしたところで、いくつかの可能性をさらに思いついたりもしましたが…結局のところ、「いまいちスジが通らない要因」でした。
という事で、今回は「解決篇」ですｗ
- まず、昨日の「うまく行かなかったコード（再掲）」
- そして、こちらが修正し、問題解決したコードになります
- 実行するとこうなります（こうしたかった）
- 修正内容について
- ブラウザくんの気持ち
- というわけで、解決篇でした
まず、昨日の「うまく行かなかったコード（再掲）」
<style><!--
.box{
display:-ms-grid;
display:grid;
-ms-grid-columns:(48px)[6];
grid-template-columns:repeat(6,48px);
-ms-grid-rows:(48px)[6];
grid-template-rows:repeat(6,48px);
}
.inbox{
display:-ms-grid;
display:grid;
-ms-grid-columns:(16px)[3];
grid-template-columns:repeat(3,16px);
-ms-grid-rows:(16px)[3];
grid-template-rows:repeat(3,16px);
border:1px solid black;
}
--></style>
<div id="gamen" class="box"> </div>
<p>
<script>
gamen.innerHTML='';
for(i=0;i<36;i++){
gamen.innerHTML+='<div class="inbox">';
for(j=0;j<9;j++){
if(j==4){
gamen.innerHTML+='<div style="border:3px solid black;"></div>';
}else{
gamen.innerHTML+='<div></div>';
}
}
gamen.innerHTML+='</div>';
}
</script>
そして、こちらが修正し、問題解決したコードになります
<style><!--
.box{
display:-ms-grid;
display:grid;
-ms-grid-columns:(48px)[6];
grid-template-columns:repeat(6,48px);
-ms-grid-rows:(48px)[6];
grid-template-rows:repeat(6,48px);
}
.inbox{
display:-ms-grid;
display:grid;
-ms-grid-columns:(16px)[3];
grid-template-columns:repeat(3,16px);
-ms-grid-rows:(16px)[3];
grid-template-rows:repeat(3,16px);
border:1px solid black;
}
--></style>
<div id="gamen" class="box"> </div>
<p>
<script>
txt='';
for(i=0;i<36;i++){
txt+='<div class="inbox">';
for(j=0;j<9;j++){
if(j==4){
txt+='<div style="border:1px solid black;"></div>';
}else{
txt+='<div></div>';
}
}
txt+='</div>';
}
gamen.innerHTML=txt;
</script>
※修正部分を赤字にしています。
実行するとこうなります（こうしたかった）
修正内容について
元の「うまくいかなかったコード」は、JavaScriptからコードを書きだす用に用意したdiv要素に対して、ダイレクトに「gamen.innerHTML+='追記内容';」で書き足しを繰り返すものでした。
それを「txtという変数を用意して、そこに書き出すべき内容を書き溜めてから、最後に一気にgamen.innerHTMLに書き出す」ように書き換えただけですｗ
（一か所、3pxを1pxにしていますが、ここは元々1pxにしたかったのがうまくいかなかったので、確認用に3pxにしていたところです）
CSSのgridの入れ子自体、初めて試す事でしたが、CSSの記述に問題点も見当たらないし、う～ん…と悩んでいましたが、結局のところ「CSSには問題がなかった」ようですね^^;
とはいえ。
書き出している内容自体は全く同じもので、書き出すタイミング？だけの違いで、ブラウザの動作が全く違ってくるのは釈然としない部分が正直あります。
ブラウザくんの気持ち
HTMLソース「ブラウザくん、まずは<style>に書いたCSS指定をよく読みたまえ」
ブラウザ「アイアイサー！！」
HTMLソース「読み終えたかね？では、スクリプトエンジンから受け取った文字列を、さっき読んだCSSの通りの手順に並べるんだ」
ブラウザ「イエッサ！！」
スクリプトエンジン「ブラウザさん、最初はこれっす（<div>を手渡す）。これ、クラスはboxなんでよろです」
ブラウザ「おっけーい！」
スクリプトエンジン「で、そのdivを閉じないで、次にこれを（<div>を手渡す）これ、クラスはinboxっす」
ブラウザ「んん？？…ん、おっけ！」
スクリプトエンジン「次はこれで…（略）」
ブラウザ「あいよ（あれ？最終的にどんだけ来るのか分からんと、CSSの手順が分からなくなるぞ…？）」
スクリプトエンジン「これで最後っす（</div>を手渡す）」
ブラウザ「あいよー。（なんか訳わからんから適当に並べちゃったけど、俺しーらないっと）」
LSS「いや、なんでそうなる！！」
ブラウザ「知るかヴォケぇ！次々渡されても困るわ！最初から全部渡せや！！」
…みたいな感じでしょうか^^;;;;;
というわけで、解決篇でした
そもそも書こうとしていた記事も、「とりあえず途中まで」な中途半端な記事にするつもりでしたが、思わぬところで足止めをくってしまいました^^;;;。
今回学んだのは、
「不完全なHTMLを随時書き出していくよりは、いったん変数にまとめてから一気に書き出したほうが無難そう」
ってとこですね。
完成品はまた近いうちに発表します！
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
