Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】gridレイアウトの列数をJavaScriptから制御

 どうも!LSSです!!

 

JavaScriptからCSSのプロパティを色々制御する事ができますが、gridレイアウトの設定についての制御(列数とか)が調べてもなかなか情報に行き当たりませんでした^^;

 

とりあえず成功したので、ここに書いておきます!
 

 

gridレイアウトのおさらい

1
2
3
4
5

 

コード

<div style="display: grid; grid-template-columns: repeat(3,50px);">
<div style="border: 1px solid black;">1</div>
<div style="border: 1px solid black;">2</div>
<div style="border: 1px solid black;">3</div>
<div style="border: 1px solid black;">4</div>
<div style="border: 1px solid black;">5</div>
</div>

 

1行目の<div>から最後の</div>の間に、5つの<div>~</div>が入っている、という構造です。

 

1行目の<div>に、
display: grid;
と、
grid-template-columns: repeat(3,50px);
CSSで指定しています。

これは
「このdivはグリッドレイアウトを使用します」
「列は、長さ50pxの列を3回繰り返し」
という指定ですね。

 

このように3列に区切りを用意した<div>の中に、子要素となる<div>を5つ入れているので、

1
2
3
4
5

こういう見た目になります。

 

 

列数をJavaScriptから制御するには?

1
2
3
4
5

 

見た目は変わっていませんが、これは「列数をJavaScriptから指定」しています。 

 

コード

<div id="gamen" style="display: grid;">
<div style="border: 1px solid black;">1</div>
<div style="border: 1px solid black;">2</div>
<div style="border: 1px solid black;">3</div>
<div style="border: 1px solid black;">4</div>
<div style="border: 1px solid black;">5</div>
</div>
<script>// <![CDATA[
gamen.style.gridTemplateColumns='repeat(3,50px)';
// ]]></script>

 

まず、JavaScriptから制御するために、外側の<div>に「id="gamen"」 とidをつけました。

また、そのstyleの指定から「grid-template-columns: repeat(3,50px);」をカット。

 

その代わりに、
gamen.style.gridTemplateColumns='repeat(3,50px)';

というコードをスクリプトに書いています。

 

 

意外とこの情報が見つかりませんでした^^;

JavaScriptからCSSのプロパティを制御する事ができますが、この
「grid-template-columnsプロパティをJavaScriptから制御するには?」
という情報がググってもなかなか見つけられませんでした^^; 

 

JavaScriptで指定する時には、
要素名(id).style.CSSプロパティ名=;
というカタチで指定するのですが、CSSJavaScriptの違いから、

CSSのプロパティ名からハイフン(-)を取り除き、ハイフンの直後の文字を大文字にしたものを書く」というのがお決まりのパターンになっているようです。

(全てのCSSプロパティがそれで指定できるのか?は不明w)

 

 

 

JavaScriptで指定できると何が嬉しいのか?

マス目を使った表現を行う時、例えば表であったり、マスを使ったゲームだったり、の時に、

retsu=3;
gamen.style. gridTemplateColumns='repeat('+ retsu +',50px)';

のようなコードで、列数を変数に入れておいて列数を増減させる事ができます^^

 

例えば(あまり意味はありませんが)↓こんな感じの事ができますw

 

列を増やす
列を減らす

 

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^