このサイトのトップ画像を例に、CSSのグリッドレイアウトを使って
タイルデザインを作ってみましょう。
グリッドレイアウトが分かれば、オリジナルなデザインが自由自在に作れますよ！
目次
- Figmaでグリッドデザインを作る
- コーディングする
1.Figmaでグリッドデザインを作る
まずはこんな感じのグリッドデザインを作ってみましょう。
1-1 グリッドを引く
Figmaのファイルを開きます。（既存でも新規でもOK）
左上のフレームボタンから「フレーム」を選択
↓
ドラッグ&ドロップでフレームを適当に作り
↓
「デザイン」プロパティでW：300 × H：300に設定
2-2 グリッドを分割する
まずグリッドを追加できるようにFigmaの表示設定を変えます。
Figmaボタン＞表示＞ピクセルグリッド の順に選択します。
グリッドを追加します。
「デザイン」プロパティの「レイアウトグリッド」横の「＋」をクリック
↓
「グリッド10px」の文字の左のボタンをクリック
↓
サイズを「100」pxに変更
グリッドが引けました。
ちなみに、このグリッドは画像をエクスポートするときには表示されません。
2-3 好きな色を塗る
あとは表示したグリッドに沿って、好きな大きさで好きな色を塗ればデザインは完成です。
エクスポートしたらこんな感じですが、グリッドがわからなくなるのでしなくてもいいです。
3.コーディングする
それではいよいよ、コーディングに入りましょう。
3-1 マークアップ
タイル全体を<div>で囲み、各タイルも<div>で構成します。
3-2 HTMLを書く
HTMLは単純ですが、こんな感じです。
<div class='container'> <div class='yellow'></div> <div class='red'></div> <div class='blue'></div> </div>
3-3 CSSを書く
タイル全体には、グリッドレイアウトを宣言し、
この領域に、どのくらいの大きさのグリッドがいくつ並ぶかを
縦と横それぞれで指定します。
.container { // グリッドレイアウトを宣言 display: grid; // 縦列に100pxのグリッドを３つ並べる grid-template-columns: repeat(3, 100px); // 横列に100pxのグリッドを３つ並べる grid-template-rows: repeat(3, 100px); }
次に、グリッドに色をつけます。
グリッドレイアウトは以下のように番号を振って位置を考えます。
黄色・赤・青の四角形のCSSは、それぞれ以下のようになります。
.yellow { // rowの1~2にある grid-row: 1/2; // columnの1~3にある grid-column: 1/3; // 背景色をつける background: #FFEE58; } .red { // rowの2~4にある grid-row: 2/4; // columnの1~3にある grid-column: 1/3; // 背景色をつける background: #FFAAB9; } .blue { // rowの1~4にある grid-row: 1/4; // columnの3~4にある grid-column: 3/4; // 背景色をつける background: #A8A6FF; }
タイルのデザインは完成です。
グリッドの数や大きさを変化させてみると、よりデザインの幅が広がると思います。
ちなみに、このブログサイトのトップページもグリッドレイアウトを使っています。
何かの参考になれば嬉しいです。
お読みいただきありがとうございました！