みなさんこんにちは！おさかなです！
今回は「CSS Layout Generator」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・イメージ通りに「Webデザイン・レイアウト」が作成できず、お悩みの方
・CSSのヘッダー・フッターデザインを作成中の方
・FlexBox・Gridレイアウトを確認したい方
「CSS Layout Generator」って何？
「CSS Layout Generator」とは、Webサイト制作でよく使用されるレイアウトを、マウス操作で作成できるサイトのことです。FlexBox・Grid対応。ヘッダー、フッターをはじめ、サイドバーやカード型まで多種多様なデザインが作れます！(便利〜)
実際に使ってみよう！
レイアウトをチェックしよう！
それでは早速サイトにアクセスしましょう！
レイアウトは、主に「Grid」と……。
「Flexbox」があります。(おお！)
まずは、作成したいレイアウトの「テンプレート」をクリック！(えい！)
すると……？こんな感じで「レイアウトの編集ページ」が開きます。
9つに分かれたレイアウトや……。
ヘッダー・メニューなどでお使いいただける、横並びレイアウトも。(いいね)
(これめっちゃ便利だな……✨)
プロパティ・値を編集しよう！
左側のメニューからは、CSSの「プロパティ」や「値」をマウスで編集できます！(すごい！)
たとえば「Gap(すき間を指定する、プロパティ)」を30px→100pxに変更すると、こんな感じ。(ふむふむ…。)
他にも中央揃え・上揃えなど、ノーコードで編集可能！
今回は「justify-content」と「align-items」プロパティの値を設定。変更内容が、きちんとコードにも反映されています。(ラクラク〜☁)
また「クラス名」を指定したいときも、nameを編集すればOK！
こちらもコードに反映されています！(もうコード書かなくなりそう。笑)
1 = hoge
2 = osakana
3 = yeah
「Container Size」を押すと、パソコンをはじめスマホ・タブレットなど、それぞれの端末でどのように表示されるかがわかります。
スマホの場合は、こんな感じ。
タブレットの場合は、このようになっています！(タブレットのレイアウト確認し忘れがちだから、助かる〜)
(ひと休み☕)
コードをコピーしよう！
レイアウトの編集が完了したら、右側のソースコードを確認しましょう！(おー🚩)
「Copy」ボタンを押すと、コードがコピーできます。(ポチっと)
↓実際に作成したコードがこちら
◯HTML
<section class="layout">
<div class="hoge">1</div>
<div class="osakana">2</div>
<div class="yeah">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>◯CSS
.layout {
width: 1024px;
height: 768px;
display: grid;
grid:
"hoge osakana yeah" 1fr
". . ." 1fr
". . ." 1fr
/ 1fr 1fr 1fr;
gap: 10px 8px;
}
.hoge { grid-area: hoge; }
.osakana { grid-area: osakana; }
.yeah { grid-area: yeah; }「このレイアウト、どうやってコード書いたらいいんだろう……？」と悩んだら、ぜひ一度ビジュアルからレイアウトを作成してみてはいかがでしょうか！(お疲れさまです🍀)
今日ホットケーキの日らしい🥞
寒すぎてコールドケーキになりそうだけどな。笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
↓制作に携わった記事
TVアニメ『アイカツ！』放送から10周年を記念した「アイカツ！シリーズ 10th Thanks Party」開催
— アニメイトタイムズ公式 (@animatetimes) January 23, 2023
星宮いちご役・ #諸星すみれ さん、歌唱担当・ #霧島若歌 さんら出演キャスト陣のツイートまとめ！【注目トレンド】#aikatsu#aikatsu10thhttps://t.co/rYllNxojpf
