CSS Grid Layout を簡単に作れるツール

格子状のマス目のレイアウトを簡単に作れるCSS Grid Layout。これを更に簡単に作れるツール「Layoutit!」の使い方〜実際にhtml CSSにコピペして使うまでの解説です。

CSS Grid Layoutを知らない方でも大丈夫です◎ 

 

 

CSS Grid Layout が作れるLayoutit!

Layoutit!のサイトへ行きピンクのCSS Grid Generator をクリックします。

 

ここで縦に横にレイアウトを作ります。そうして出来たhtmlとCSSは右側に出てコピぺして使えます。

 

今回はこんなサイトのヘッダー部分を作ります。

 

イラストレーターで描き、背景が透明になるPNG形式(〇〇.png)で保存したコガネムシとカブトムシの画像をヘッダーの背景に使います。

イラストはフリーソフトInkscapeインクスケープでも描けますし、

INKSCAPEで写真をトレースして簡単に描く

ダウンロードの必要の無い(のでハードル低め)Scratchスクラッチでも可能です◎

簡単。Scratchでカブト虫をトレースして描く

 

column(列)とrow(行)でマス目をデザイン

Layoutit!の左を見るとデフォルトでgrid-template-columns カラム=列 が3つ出来ています。カーソルを合わせると対応した列に色が付くので分かるように左から順に並んでいます。

 

columnsの下、grid-template-rows ロウ=行 も3つ出来ています。上から順に並んでいます。

これを増やしたり減らしたりサイズを変えたり統合したりします。

 

ヘッダーに必要な列=grid-template-columns がいつくか数えると7個です。

 

grid-template-columnsを「add」ボタンで増やします。3行が4行に中央の表示も1行増えました。

 

7まで増やします。grid-template-rows(行)は今回ちょうど3なのでこのままで。

 

次にcolumnのサイズを決めます。初期設定のfrは利用可能な空間の分数 (a fraction) を表し、スペースに応じて伸縮します。

1fr, 1fr, 1fr は1:1:1 で全体のサイズが900pxだったら300px, 300px, 300pxですし、1500pxだったら 500px, 500px, 500px になると言う具合です。1fr, 2frだったら1500pxは500px, 1000pxです。

今回両端はこの時点でサイズが決まっていないので1frにし、2番目はfrをpxに変更して(すると左が300になりますので)170と変更、「170px」にしました。

 

こんな感じで好きなサイズに変更します。

後から変更出来るのでざっくりでも大丈夫です

 

続いてrowのサイズを決めます。

 

ここまでで生成されたコードが画面の右側に表示されます。grid-template-columns: は実際は7列分の数字が横にスクロールすると見れます。

grid-template-areas: の「・・・・・・・」は横に7個、それが3行でcolumnとrowを表しています。

この「・・・・・・・」が、、

 

今からこの「・」に名前、エリア名を付けてみます。

マス目に名前を付ける

grid-template-columns の一番左、1frにした所をクリックし任意の名前(class名)を記入しEnterを押します(「×」マークでやり直せます)。ここにはコガネムシ画像を入れる予定なのでimage1としました。すると「・・・・・・・」の同じ位置にimage1が入り「image1・・・・・・」となりました。

 

続けてサイトのタイトルやロゴを入れる予定の2番目の grid-template-columns にはlogoと記入。CSSコードの同じ場所にlogoが入りました。

この行の「・」は残り5つになったね

 

ちなみに grid-template-columns(rowsも)のサイズが小さ過ぎるとマスが選択しにくい事がありました。何となくですが40px以上あると楽に選択出来ますので一旦大きくしておいて選択、記入が済んだら元に戻すといいかと思います。

 

続けます。

3つ目はスペース名を付けずに残りはこんな感じの名前にしました。画面の右上にある立体の四角マークをクリックすると、

 

HTMLとCSSのコードと名前を付けて作ったスペースが分かりやすく表示された物が別窓で開きます。

 

名前を付けたスペース以外は「・」で表示されます。

 

出来たHTMLとCSSのコードをコピペします

大体出来たのでそれぞれの「Copy」を押して、

 

それぞれのファイルにペーストします。

 

index.htmlファイルの<body>と</body>の間にHTMLをペースト。

 

style.cssファイルにCSSをペースト。

 

index.htmlでstyle.cssを読み込むのも忘れずにです。

 

両方コピペしてhtmlファイルでCSSファイルを読み込んだ状態でGoogle Chromeで表示してみます。

何も表示されないよ
右クリック(Macの場合)で「検証」を選択します、

 

Elementsの中の「<body>…</boddy>」横の三角マークをクリックすると中が展開されます。この中の「<div class=”container”>…</div>」横の「grid」をクリックすると青くなり、何も見えなかった所にグリッドが表示されます。(表示の色は更新する度に変わるようです)

 

レイアウトは変更出来ます。止めて普通の画面に戻す時は右上の(レイアウトによって変わりますが)×マークをクリックするだけです。

”Chrome 検証モード、デベロッパーツール”などで検索すると説明が沢山あります。これが使えるようになると何かと便利です。

 

 

コピペしたHTMLファイルにタイトルやメニューを入れ、CSSで装飾します。

 

こうなりました。下は検証モードです。指定したグリッドの中に文字が入っています。

 

container全体の背景色をベージュにしました。(ページ全体<body>も分かり易くグレーにしました)

 

background-color: 〇〇;で色を指定します。

 

CSSで背景に画像を入れます

grid-template-areas で「image1」と付けたサイズ1frのエリアを分かり易く緑にし、今からここに

 

scarab.png画像を配置します。CSSファイルと画像の位置関係はこうです。

位置関係が違うと今から書くURLも違って来るので心配な方は同じにして頂いたり、画像までのURLの書き方「リンク URLの書き方」などご参照ください◎

リンク URLの書き方

 

 

background-image: url(image/scarab.png); 
url(〜)←このカッコの中にCSSファイルから見た目的のファイルまでの道のりを書きます。

コガネムシの手しか見えないよ?

画像の位置やサイズの表示方法は色々ありますが今回は比率はそのまま範囲内に画像全体が収まる「contain」にします。

 

background-size: contain;
比率を保持したままエリアいっぱいにコガネムシが並びました。(リピートがデフォルトなので、そうしたくない場合は background-repeat: no-repeat; の1行を加えてください)

 

grid-template-areas のエリアを増やす、広げる(Layoutit!で)

実際見てみると表示が小さい気がするので上と下のエリアもimage1にして広げようと思います。

CSSにコピペした「grid-template-areas」の「image1」の上の「・」と下の「・」を

 

「image1」に書き換え保存します。

 

image1エリアが上12px、下12px広がってコガネムシが大きく表示されました。

 

今やった事はLayoutit! で設計段階でも出来ます。

左の縦の列3つを1つのエリアにしたい時は1、2とクリックすれば間のエリアも選択されます。

 

エリア名「image1」と付けたのでCSSのコード3つ分にimage1が入りました。

 

今度は縦2横2、4つのエリアを1つにしたいとします。1、2と斜めにクリックします。

 

4つのエリアをまとめた「image2」が出来ました。

生成されたHTML、CSSコードをそれぞれコピペし、

 

CSSの方に画像を配置しました。

 

CSSはこんな感じです。image1のbackground-size: contain;は先程のヘッダーと同じですが配置されるエリアの大きさに応じてこの大きさになっています。

 

htmlファイルの方に文字を入れれば画像の上に置いたように見えます。(カブトムシの周りの青は暗くしました)

 

grid-template-areasを新規で作る(VSCodeで)

先程のヘッダーではLayoutit!で作ってあったimage1を上下に増やし(広げ)ましたが、今回は新しく作ります。

右下の100×120pxの2つをtextareaと言うエリア名にし、文字を表示するエリアにしようと思います。

Layoutit! で作るの?

それでも出来るれど、VSCodeのコードを書いて作る方法でやってみます

 

 

CSSにコピペしたgrid-template-areas の下の「・」2つをtextarea(自由な名前でOKです)に書き換えます。

htmlの方には<div class="textarea"></div>の1行を書き加えます。

上の2つのコードを見れば大体分かるね

 

もう一度CSSに戻って.textarea {  }と書き、中にgrid-area: textarea;と書きます。これも上のimage1などを見れば大体同じです。textarea の前の「.」も忘れないでください◎

 

新しいエリアを作るには最低3つ(CSSへの記述2ヶ所、htmlへの記述1ヶ所)やる事があるんだね

 

 

その後は背景色をつけるなり文字を入れるなり色々出来ます。

 

Chromeの検証モード>gridクリックするとこんな感じです。

 


 

流れ上ここでの説明になってしまいましたがヘッダーの右側のimage2、カブトムシはこうです。文字数のせいでimage1と違って右端に揃っていないため「?」と戸惑うかもしれませんがコガネムシの時と同じです。

 

ヘッダー完成。

 

 

ちなみにコガネムシもカブトムシも列(column)のサイズが1frなので画面を伸ばすとどこまでも増えます。

 

Layoutit!で作ったレイアウト例

Layoutit!で作った仕事で使えそうなレイアウト。これは、

 

コピペした後にサイズ調整をしてこうなりました。

 

CSSコードが長くなってしまいましたがエクセル風のレイアウトも可能です。

 

 

CSS Grid Layout を簡単に作れるツール 2

次回↑はLayoutit!を使わず0からエリアを作って名前を付けて背景色を付けて画像配置をする方法です。