note自由帳

HOME > note(お知らせ等) >  今日の朝活(css3のflexboxを使ってコーディングを時短)

今日の朝活(css3のflexboxを使ってコーディングを時短)


おはようございます。
湘南・茅ヶ崎のホームページ制作オフィス VIVIBOND(ヴィヴィボンド)のミナベです。
flexboxを使ったレイアウトが時短コーディングに欠かせなくなりそうなのでメモです。

HTML

<div class="parent parent01">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

space-betweenプロパティ

先頭と末尾の要素が端に寄り、間の要素は均等割りで配置される。

space-aroundプロパティ

均等割りで配置されるが、端に要素はくっつかない。

今回参考にさせていただいた元記事

Flexboxを利用してよくあるレイアウトを実装したサンプル集

感想

レイアウトの際、floatを使うとclearでfloatを解除する必要がありますが、flexboxはfloat(浮かせる)という考え方ではないので、そもそも解除の必要がありません。clearをうっかりつけ忘れがちな私にぴったりなテクニックとも言えますね!どんどん使っていこうと思います。
ひと手間減るので時短になりますし、当然コードもすっきりします。あと、パフォーマンスにもちょっとだけよい影響がでるみたいですね。なんだかいいことだらけのflexbox!

お読みいただき、ありがとうございました!

   VIVIBOND 三鍋 忍 (代表/WEBディレクター)

2005年よりフリーランスでWEB制作業をスタート。
丁寧なヒアリングと確かなプランニングで、エンドユーザーを意識したwebサイトの制作をモットーとする。

【対応領域】
WEBサイト(ホームページ)のプランニング、ディレクション、デザイン、コーディング(XHTML/CSS)WordPressサイト構築、ネットショッピングサイト構築、ブログ構築、IT顧問、パソコン教室運営

【経歴】
2005年
趣味が高じてフリーランスWEBデザイナーに転身。

2010年
男児を出産。生後6か月で仕事復帰。
理想のワークライフバランスの実現を目指して、育児と仕事に日々奮闘。

2016年
企業のIT顧問サービスをスタート。 実務向けパソコンスクール「FLEX web」をスタート。

2017年
子どもが通う学校の長期休業に合わせた働き方を試験実施。

2018年
神奈川県川崎市で障がい福祉事業所を展開する株式会社アイムと外部デザイナー契約を締結
アートディレクションで障害福祉のイメージチェンジを目指す

2020年
GIGAスクール構想(文部科学省が提唱したICT教育の改革案)向けWebコンテンツ制作にデザイナー兼コーディングディレクターとして従事
( IT機器全般のサプライチェーンを行う外資系商社)

カーエレクトロニクスや医療機器・産業機器等向け電子部品製造を行う企業のWebサイトリニューアルプロジェクトにディレクターとして従事
(電子部品製造・ソリューションを提供する外資系企業)

【参加団体】
Chigasaki-Guild.NET

◆三鍋忍へのお仕事のご依頼は、当ホームページのお問い合わせページからどうぞ!

PAGE TOP