【超実戦】flexboxの使い方 | 株式会社Esolab
logo

ARTICLE

記事ページ

記事ページ

【超実戦】flexboxの使い方

DESIGN

こんにちは、エソラボの大西です。

今回は、以前のブログにも記述させていただいた、flexboxの現場での使い方をご紹介します

この記事では

  • どんなデザインの時にflexboxを使用するのか
  • 現場で超使うflexboxの使用例
を書いておりますので、これからflexboxを使用してコーディングをされるという方や、WEBデザインを勉強されている方はぜひ参考にしてみてください。

どんなデザインの時にflexboxを使用するのか



そもそもflexboxをどのタイミングで使用するのか?
ズバリ、要素を横並べにしたい時に使用します。

floatなどで横並びにするように他のサイトでは書いてあったよ、なんて方もいらっしゃるかと思いますが、floatは一切使用しなくても問題ございません。

現場で超使うflexboxの使用例



こんなデザインのサイトはよく見かけませんでしょうか?



最近は、このように横並べにするデザインが多く見受けられます。 今回はこちらの画像を題材にして、flexboxの解説をしていきます。

HTMLの構造

flexboxをCSSで挿入する前に、まずはHTMLを作らなければCSSを適用することができませんね。
ですので、こう言った構造のHTMLをまずは作成します。

See the Pen flexbox Html by akiraman786 (@akiraman786) on CodePen.



ポイントとしては、
  • containerクラスで囲むこと
  • containerクラスの中に、横並べにしたい要素を入れること(今回であれば、画像と文字群を横並べにしたいため、[container__img]と[container__txt]で囲んでいる)

ところとなります。

そもそもflexboxとは親要素に指定をすることで子要素を横並べにするというCSSプロパティです。
ですので横並べにしたいものを只中に入れているだけのシンプルな構造となっています。

CSSの適用




あとは、横並べにするだけであれば、親要素であるcontainerクラスに対してflexboxを指定するだけです。

See the Pen flexboxCss by akiraman786 (@akiraman786) on CodePen.



どうですか?めちゃくちゃ簡単じゃないですか?

ただ、画像のような見た目ではないため少しCSSで装飾をしていきたいと思います。
そこまで難しい見た目ではないので説明は省略しますが、わからないところなどがもしございましたらお問い合わせフォームよりご質問ください。


See the Pen flexboxComplete by akiraman786 (@akiraman786) on CodePen.




まとめ




今回はflexboxの実戦の説明をさせていただきましたがいかがだったでしょうか?
今回のようなケースは本当によく使用するので是非トライしてみてくださいね。

また、株式会社Esolabではflexboxのコーディングを含めたWEBのデザイン・制作をしております。
大阪でホームページ制作などを検討されている方は是非一度ご相談ください。

この記事を書いた人

大西照

株式会社Esolab 代表取締役

アーカイブ

カテゴリー

  • TECH (23)
  • DESIGN (9)
  • MARKETING (5)
  • OTHER (4)
  • SEO (3)
  • お問い合わせ

    株式会社EsolabではWEBサイトやECサイトの運営など多岐にわたり事業を展開しています。
    ホームページや自社ECサイトをお求めの方は一度お問い合わせください。

    お問い合わせ