【実案件で使える】CSSでおしゃれFlexboxレイアウト10種

ChatGPTでも生成

目次

1:メニューリスト

トップページのFV(ファーストビュー:主にメインビジュアル)直下に、見てもらいたいページリンクの一覧メニューを設置しておく場合に便利なレイアウトです。

ボタンは最大4つ横並びにし、画面幅1199pxで2つ並びに切り替わる設定

ド定番|シンプル横並び

See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.

最小単位をンプルなメニューボタン一覧。

アイコン付きボタン横並び

See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.

ボタン左端にアイコン付き。

アイコン+補足付き2行ボタン横並び

See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.

ボタン左端にアイコン付きで、ボタン内テキストが補足とメインの2行に分かれている。

2:2カラム

サービス、特徴、〇〇な3つの理由などでよく使われる、「画像+テキストの2カラム」を1行ずつ交互に配置するレイアウト。カウンター(符号)付きで順次紹介する場合に適しています。

ド定番|画像+テキスト

シンプルなメニューボタン一覧。

アイコン付きボタン横並び

ボタン左端にアイコン付き。

アイコン+補足付き2行ボタン横並び

ボタン左端にアイコン付きで、ボタン内テキストが補足とメインの2行に分かれている。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次