flexboxでページ全体のレイアウトを作ってみる

flexboxで超シンプルなページ全体のレイアウトを作ってみます。
フレームワークもよいけど、flexboxで作ってしまえば、HTMLもシンプル&キレイ🙆
個人的にフレームワークを使うと、HTMLがどんどん煩雑になっていくのが気になるので、オリジナルのデザインからコーディングをしていくときはフレームワーク使わない派です。

👉 flexboxの基本はこちら

よくあるWebページのレイアウト例A

上にヘッダーがある、定番のレイアウト。

PC表示
スマホ表示

定番のレイアウトです。
HTMLは以下の通り、超シンプルです。

<body>
  <div class="wrap">
    <header>header</header>
    <main>main</main>
    <aside>sidebar</aside>
    <footer>footer</footer>
  </div>
</body>

ページ全体をflex containerにしてしまう作戦です。
全体を囲んでしまえば途中に余分な<div>を挟むことなくHTMLがスッキリします。

.wrapの直下の要素が全部flex-itemになるので、あとは直下のheaderやmainなどの要素の幅を指定して、段落ちさせていけばOKです💡
今回はメインを70%、サイドバーを30%で、ヘッダーとフッターを100%にしています。
スマホ用には、全てのflex-itemの幅を100%にするだけで1レイアウトの完成👇

.wrap{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
 }
 header,main,aside,footer{
   padding:100px 0;
 }
 header{
   width:100%;
   background:#f0eeeb;
 }
 main{
   width:70%;
   background:#e3e3e3;
 }
 aside{
   width:30%;
   background:#c9c9c9;
 }
 footer{
   width:100%;
   background:#afafaf;
 }
 /*500pxより小さくなったら1カラム表示*/
 @media (max-width:500px){
   header,main,aside,footer{
     width:100%;
   }
 }

Demo

よくあるWebページのレイアウト例B

PC表示
スマホ表示

こちらも定番のレイアウト。ナビゲーションなどのコンテンツを右側に配置するタイプ。

HTMはさっきのものとほぼ同じです👇

<body>
  <div class="wrap">
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

CSSもさっきとほとんど一緒ですが、今回はheaderを30%、mainを70%にしています。

.wrap{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
 }
 header,main,aside,footer{
   padding:100px 0;
 }
 header{
   width:30%;
   background:#f0eeeb;
 }
 main{
   width:70%;
   background:#e3e3e3;
 }
 footer{
   width:100%;
   background:#afafaf;
 }
 /500pxより小さくなったら1カラム表示/
 @media (max-width:500px){
   header,main,aside,footer{
     width:100%;
   }
 }

Demo

あとは、headerやmainの中にコンテンツを配置していけば、ページが完成💡

👉 flexbox で色々なナビゲーションをつくる
👉 flexbox でボックスがタイル状に並んだレイアウトをつくる

CSSのflexboxを使ってボックスをタイル状に並べる

flexboxでよくあるタイル状にボックスが並んだレイアウトを作る方法と考え方まとめ💡 ベーシックなタイル状のレイアウト 同じボックスをきれいに整列させていく一番ベーシックなレイアウト。ショッピングサイトのアイテム一覧や・・・

  • 縦方向中央に配置したいとき、align-items:center;が効かないときに確認すること
  • WordPressでカスタムタクソノミー一覧ページがリダイレクトされたときのメモ
  • HTMLのpicture要素でレスポンシブに対応した画像を読み込む
  • imgのsrcsetでレスポンシブで最適な画像を設定する方法
  • 2020年のバナナ
  • 要素を中央に表示したい!CSSでtext-align:center が効かないときに確認すること
  • スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう
  • flexboxでページ全体のレイアウトを作ってみる
  • CSSのflexboxを使ってボックスをタイル状に並べる
  • CSSのflexboxを使っていろいろなナビゲーションをレイアウトしてみる
© b. All rights reserved.