grid使ってみたらすんごい楽だった

実はここ一月ほどワードプレスを勉強しています。今までも簡単なサイトは作ってきたんですけどちゃんとしたサイトが作れるようになろうと思って、それならということでワードプレスのカスタマイズを勉強し始めました。

というわけで、ワードプレスやCSSの記事もこれからちょくちょく書いていくと思います。

これからはgridの時代

今までも簡単なサイトを作ったことはあったのでcssで配置をちゃんと作るのはなかなか思い通りにならないっていうのは体験しております(^^;)floatとかflexboxとかbootstrapとか、まぁ全部さわりしか知らんけど使ったりしてました。

で、今回ワードプレスのカスタマイズの勉強を始めた際に「最近はどんな感じ?」と思って調べて知ったのがこのgridです。

で、このgrid。すごく良いの(*´ω`)

何が良いかってすごく簡単。

もうこれからはgrid無しでは生きていけないですよ(‘ω’)ノ

使い方

講釈垂れるほど深くは分かってないんですけど、自分なりの便利な使い方を紹介します(‘ω’)ノ

まず、gridで分割するには親要素に

を書いておきます。これでgridが使えるようになります。

で、この下にどう分割するかってことを書くんですが例えば2コラムのブログにしたい場合

という感じに書きました。grid-template-columnsは縦に分割するってことらしく、右側にある数値は分割の幅を意味してます。この幅の指定はpxでもvwでも出来るみたいですし、grid用に新たにfrという単位も出来たみたいです。

で、上の例では私は2コラムのブログを作るのに3つに分割したわけですが、割合を見てわかる通り真ん中のは空白に使います。何にも入れないわけです。

で、メイン部分とサイド部分を両端に入れるように指定します。

grid-columnでどこに入れるか指定する感じみたいです。で、この指定の仕方なんですが、下の図をちょっと見てください。

今回コラムを3つ作った時にそのコラムを区切る線が4本出来てますよね。この区切り線の左から順に番号がふられてます。で、「 / 」スラッシュは割るとかの意味じゃなく「~から」みたいな感じらしいです。つまり「grid-column: 1/2」は「1本目から2本目まで」ということでその範囲が適用されます。「3/4」は3本目から4本目なので右端の部分に当てはまります。なのでこれであっさり2コラムのブログが出来上がります。めっちゃ簡単!(・∀・)

ついでに「1/3」とかにすると当然「1本目から3本目まで」が適用の範囲になるので二つをくっつけた範囲になります。

レスポンシブも余裕

最近は当然スマホ表示にも対応が必要なのでレスポンシブに出来なきゃ意味がないです。これもすっごく簡単!(・∀・)

こんな感じに表示を切り替える際に「display: grid;」から「 display: block;」に変えるだけ!!!これでグリッドが機能しなくなりブロック要素は下に行きます。ちょ~~楽ちん(*´ω`)

さらに!

こんな感じで入れ物を作ってその中にブロック要素を入れると左から順番に奇麗に収まってくれます。何も指定しなくてもちゃんと自動的に並んで表示されます。4つ目はちゃんと左下に来ます。

そして、これをレスポンシブ対応で

とするとちゃんと2列に並んで表示されます。便利だなぁ(*´ω`)

まとめ

gridは当然もっともっといろんなことが出来るようですが、ワードプレスでブログをカスタマイズする程度ならこの程度できれば十分ですよね(´∀`)複雑な使い方とか面倒臭くて覚える気にはなれない(^^;)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です