中小企業-経営戦略ライフハック業務効率化Homeホームページ制作関連コーディングコピペでできるflexboxを用いたレイアウト2018.02.212018.02.22コーディングコピペでできるflexboxを用いたレイアウト対応するブラウザも普及し、flexboxは非常に扱いやすくなってきました。今回はコーディングする際に、よくあるレイアウトをflexboxを利用してコーディングする際のサンプルをご紹介します。コピペでできるコーディング例1.グローバルナビゲーションなどに利用する横1列のレイアウトテキストテキストテキストテキストテキストテキストこれは一番基本的な利用方法です。space-between;と設定します。各要素の余白が均等になるように配置されます。space-between;}2.ヘッダーのように左にロゴを配置し他を右寄せに配置するレイアウトロゴテキストテキストこれは1のマイナーチェンジですが、ヘッダーなどで左にロゴ右に電話番号や問い合わせボタンといったレイアウトでよくあるパターンです。一つ目の要素にmargin-right:auto;を設定することで、残りの要素を右に配置します。auto;}3.一定の幅の横幅で要素を横にならべ、右端で折り返すレイアウトテキストテキストテキストテキストテキストこれも1のマイナーチェンジですが、ワードプレスなどの更新コンテンツの一覧表示などでよく用いられるレイアウトです。wrap;を設定しつつ、子要素にwidthの設定が必要となります。0;}4.要素を右端で折り返しつつ中央揃えで配置するレイアウトテキストテキストテキストテキストテキストこれは3のマイナーチェンジです。これはほとんどの場合5つの要素を2列で表示する時にしか使用しません。0;}5.右にナビゲーションを配置した2カラムレイアウトコンテンツナビゲーションナビゲーションナビゲーションナビゲーションナビゲーション2カラムレイアウトでよくあるものです。各要素に横幅を設定することで、任意の横幅のボックスをレイアウトできます。25%;}6.右にナビゲーションを配置した2カラムレイアウトコンテンツナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションこれは5と一見同じに見えますが5と6はhtmlは同一でcssのみが異なります。htmlのソースコードの順として、コンテンツの情報をナビゲーションの情報よりも早く記述をしたいので、CSSで表示順を制御しています。}7.左右にナビゲーションを配置した3カラムレイアウトコンテンツナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションナビゲーションこれも6と同じくhtmlではコンテンツを上部に記述し、ナビゲーションをそのあとに記述し、cssで表示順を制御しています。}8.画像とテキストを組み合わせたボタン風のレイアウト見出し見出し見出しテキストテキストテキストテキストテキストテキスト見出し見出し見出しテキストテキストテキストテキストテキストテキスト見出し見出し見出しテキストテキストテキストテキストテキストテキスト見出し見出し見出しテキストテキストテキストテキストテキストテキストWebサイトではよくあるあしらいですね。ボタンなどによく用いられる画像とテキストを左右に配置したレイアウトです。flex;を設定することで、flexboxを使用したレイアウトの中でさらにflexboxを用いたレイアウトを設定することが可能です。}9.天地中央に揃えたボタン風のレイアウト見出し見出し見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト見出し見出し見出しテキストテキストテキストテキストテキストテキスト見出し見出し見出しテキストテキストテキストテキストテキストテキスト見出し見出し見出しテキストテキストテキストテキストテキストテキストテキストテキスト8をベースに要素を天地中央に揃えたものです。center;と設定することで、天地中央に子要素を揃えることができます。left;}なお今回紹介したレイアウトはスマートフォンでの閲覧を100%考慮したスタイルではありません。スマートフォンでも快適に閲覧するためには、別途レスポンシブコーディングを行い、それぞれのデバイスに最適な設定をする必要があります。いずれも実際のコーディングでよく使用するcssの設定です。使いこなして、効率よくコーディングを行ってください。徹朗Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。