ホームページ制作フィールビー|FEELBEE

  • SERVICE
  • WORKS
  • NEWS & TOPICS
  • ABOUT
  • RECRUIT
  • CONTACT
  • Facebook
  • Instagram

  • HOME
  • SERVICE
    • ホームページ制作Website Design
    • スマートフォンサイト制作Smartphone site Design
    • ランディングページ制作Landing page Design
    • ポータルサイト制作Portal site Design
    • 下北沢ジャック広告Shimokita Jack
  • WORKS
  • NEWS & TOPICS
  • ABOUT US
  • RECRUIT
  • CONATCT
    • 採用情報Careers
    • パートナー募集Partner
  • facebook
  • Instagram

NEWS & TOPICS

  • NEWS TOP
  • お知らせ
  • ウェブブランディング
  • ウェブマーケティング
  • LIFE
  • WEB

改めてFlexboxを復習してみる

13 03 2019

コーディングでとても便利だな、と思うのがFlexbox。簡単にレイアウトを作成でき、細かい調整を自動で行ってくれ、コーディングの使用頻度としては多くなっています。しかし、使い慣れていなかった頃は理解に苦労することもありました。今回は改めてFlexboxを復習してみようと思います。

Flexboxを使うまでは、要素を横並びにする際、floatを使用したり、ブロック要素をインラインにしたり… flexboxが登場するCSS3がリリースされてから少ないコードで簡単にレイアウトができるようになりました。今日ではレスポンシブデザインがスタンダードとなり、flexboxは非常に重宝されるものとなっています。

 

Flexboxとは?

正式名称はFlexible Box Layout Moduleといいます。基本的な使い方は親要素(箱)にCSSを指定するのみ。
その中の子要素(中のitemたち)が等間隔に整列、上下左右中央構え、順番を入れ替えたりと汎用性のあるプロパティです。

 

Flexboxの記述方法

親要素にdisplay:flexと指定するのみ。要素が横並びになります。
あとはプロパティとの組み合わせによってレイアウトします。
今回は以下のhtmlとCSSをベースに解説していきます。

[HTML]
<div class="cont">
  <div class="item1">item01</div>
  <div class="item2">item02</div>
  <div class="item3">item03</div>
  <div class="item4">item04</div>
</div>

[CSS]
.cont {
  display: flex;
  border: #dddddd thin solid;
  background-color: #ffeeee;
  height: 200px;
  width: 500px;
  padding: 10px;
 
}
.cont div {
  width: 70px;
  height: 35px;
  padding-top: 15px;
  text-align: center;
  border-radius: 5px;
}
.cont .item1{
  background-color: #00aa77;
  margin-bottom: 10px;
}
.cont .item2{
  background-color: #cc66ff;
  margin-bottom: 10px;
}
.cont .item3{
  background-color: #00aaff;
  margin-bottom: 10px;
}
.cont .item4{
  background-color: #cc6677;
  margin-bottom: 10px;
}

上の記述をブラウザ上で見ると以下の画像のような感じになります。
こちらをベースに復習していきます。

 

Flexboxの基本的な使い方

◆折り返し(flex-wrap)

.cont {
  flex-wrap: wrap;
}

flex-wrapのプロパティはデフォルト値は”nowrap”です。何も指定しなければ子要素は可能な限り横に並び続けます。
”wrap”を指定することで親要素内に子要素が収まった状態で折り返しされます。

◆上下中央揃え(align-items)

.cont { 
  align-items: center;
}

align-itemsのプロパティに”center”を指定すると上下の中央に揃います。
*これは親要素に高さがないとわかりずらいため、任意の高さを入れてみるとわかりやすいかと思います。

◆左右中央揃え(justify-content)

.cont { 
  justify-content: center;
}

justify-contentのプロパティ”center”をしていします。親要素の横幅に対して子要素が左右の中央に配置されます。

その他にも下記のようにも並べることが可能です。

◆左右をそろえて等間隔に並べる

.cont { 
  justify-content: space-between;
}

 

◆子要素の左右の余白を等間隔にして並べる

.cont { 
  justify-content: space-around;
}

 

よく使うFlexboxの実例

◆上下左右中央揃え

.cont { 
	justify-content: center;
	align-items: center;
}

これはすでに基本的な使い方で紹介したもを使用します。
上下中央のalign-itemsと左右中央のjustify-contentにそれぞれ“center”を指定します。

 

並び順の入れ替え

Flexboxは子要素に対してorderプロパティを指定することで並び順を変えることができます。(デフォルト値は0)
2番目の子要素を1番目後ろに持ってくる場合、下記のように指定します。

.cont .item2{
  order: 1;
}

 

-1など0より小さい値を指定すれば以下のように一番前に並び順が変わります。

.cont .item2{
  order: -1;
}

これは親要素に対してではなく、直接指定したい子要素に対してプロパティを記述するので注意してください。

以上の点を押さえておけば、実務で活用する際の基礎としてはよいかと思います。
Flexboxのチートシートを公開しているサイトがあるので、ご紹介します。

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

コードを簡潔に記述し管理することでその後の運用もグッと楽になると思うので、是非活用してみてください。

 

 

ニューストップに戻るニューストップに戻る

SERVICE

ホームページ・スマートフォンサイト・ランディングページ・ポータルサイト・ECサイトなどの
制作を通じてクライアント様のウェブ上での目標を実現化いたします。

Small ideas make a Big innovation

「小さなアイデアが大きなイノベーションを起こす!」
をコンセプトに、クライアントとユーザーの双方がイノベーションを起こすご提案をいたします。

クライアント様も気が付かない小さなアイデアを積み重ねて、大きなインパクトのあるソリューションを創造いたします。

  • Website Designホームページ制作
  • Smartphone site Designスマートフォンサイト制作
  • Landing page Designランディングページ制作
  • Portal site Designポータルサイト制作
  • Shimokita Jack下北沢ジャック広告

ABOUT
FEELBEEについて

ABOUT
FEELBEEについて

受付 平日10:00-18:00

03-6416-3903

お問合せフォーム

ホームページリニューアル制作サービス ブラボーウェブ

 

rindo

  • HOMEホームページ制作 トップ
  • ABOUT会社案内
  • 採用情報
  • パートナー募集
  • WORKS制作実績
  • NEWS & TOPICSお知らせ・最新情報
  • CONTACTお問合せ
  • SERVICEサービス紹介
  • ホームページ制作
  • スマートフォンサイト制作
  • ランディングページ制作
  • ポータルサイト制作
  • facebook
  • twitter

ホームページ制作フィールビー|FEELBEE

© Copyright FEELBEE. All Rights Reserved.