【Web】レイアウトを確認できるサイト【CSS Layout Generator】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「CSS Layout Generator」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・イメージ通りに「Webデザイン・レイアウト」が作成できず、お悩みの方
・CSSのヘッダー・フッターデザインを作成中の方
・FlexBox・Gridレイアウトを確認したい方

「CSS Layout Generator」って何?

CSS Layout Generator」とは、Webサイト制作でよく使用されるレイアウトを、マウス操作で作成できるサイトのことです。FlexBox・Grid対応。ヘッダー、フッターをはじめ、サイドバーやカード型まで多種多様なデザインが作れます!(便利〜)

CSS Layout Generator
A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
【無料】PSDファイルも開く!デザインソフト【Photopea】とは?
みなさんこんにちは!おさかなです!今回は「Photopea」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・XD、AI、PSDファイルが編集できるソフトを探している方・無料デザインソフトを...

実際に使ってみよう!

レイアウトをチェックしよう!

それでは早速サイトにアクセスしましょう!

レイアウトは、主に「Grid」と……。

Flexbox」があります。(おお!)

まずは、作成したいレイアウトの「テンプレート」をクリック!(えい!)

すると……?こんな感じで「レイアウトの編集ページ」が開きます。

9つに分かれたレイアウトや……。

ヘッダー・メニューなどでお使いいただける、横並びレイアウトも。(いいね)

(これめっちゃ便利だな……✨)

【CSS】Gridレイアウトの作り方を学ぼう!【GRID GARDEN】とは?
みなさんこんにちは!おさかなです!今回は「GRID GARDEN」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・CSSの「グリッドレイアウト(Grid)」を学びたい方・無料の「グリッド学...

プロパティ・値を編集しよう!

左側のメニューからは、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; }

このレイアウト、どうやってコード書いたらいいんだろう……?」と悩んだら、ぜひ一度ビジュアルからレイアウトを作成してみてはいかがでしょうか!(お疲れさまです🍀)

Amazon.co.jp: HTML/CSSブロックコーディング デザインをすらすら再現できる eBook : 笠井 枝理依: 本
Amazon.co.jp: HTML/CSSブロックコーディング デザインをすらすら再現できる eBook : 笠井 枝理依: 本
おさかな
おさかな

今日ホットケーキの日らしい🥞

ナビまる
ナビまる

寒すぎてコールドケーキになりそうだけどな。笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【マウス操作のみ】マーカー下線、CSSコードが生成できちゃうツール
みなさんこんにちは!おさかなです!今回は「Underline Generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・「マーカー下線」デザインの、CSSコード作りたい方・デザイ...

↓制作に携わった記事

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました