Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2017/10/07こんにちは(・∀・)前回Flexboxでレイアウトする方法HTML5でFlexレイアウトのテンプレートをご紹介しました。普通にレイアウトする分にはそれで十分なのですが、スクロール量が少ない時でもFooterを画面の一番下に表示したい場合、上記の方法だとそれを実現することができません。今回はFlexboxのレイアウトでFooterを画面下部に表示してレイアウトする方法をご紹介します。FlexboxでFooterを画面下部に表示するレイアウトこのテンプレートもレスポンシブデザインになっておりスマホサイト及びPCサイトという構造になります。スマホサイトは1カラムのベーシックなデザインになっており、基本的な構成はbody直下の親要素が#wrapperで縦方向にheaderと#containerとfooterという構成となり、その中の#containerが横方向の親要素になります。縦方向の親要素の#wrapperはfooterを画面下に表示させるために必要となります。#wrapperにdisplay:flex、flex-direction:column、headerとfooterには高さ固定でheightを指定、#containerにflex:autoを指定して縦方向の可変を実現します。footerを画面下に固定するとコンテンツ部分の#column1・#column2は画面の高さいっぱいにはならず一番大きいカラムの高さになりますので注意が必要です。横方向は親要素#column-wrapの中に#column1・#column2を並べています。2カラムレイアウト2カラムレイアウトのサンプルです。#column-wrapの中に#column1・#column2を入れてレイアウトします。#column-wrapにdisplay:flexを指定します。#column1・#column2のサイドバーになる要素をサイズを固定にしてコンテンツになる要素を可変にします。固定幅にするカラムに横幅の数値を指定して可変幅にするカラムにflex:autoを指定します。class="txt-sp">100%です。class="txt-pc">可変幅です。</span></p><h4>このテンプレートでやっていること</h4><dl><dt>縦の親要素#wrapper</dt><dd>display:flex、flex-direction:column、headerとfooterには高さ固定でheightを指定、#containerにflex:autoを指定して縦方向の可変を実現します。</dd><dt>横方向の親要素#column-wrap</dt><dd>display:flexを設定してFlexboxでレイアウトしています。</dd><dt>子要素#column1と#column2</dt><dd>flex:○○を設定して横幅に関する設定をしています。</dd><dd>order:○○を設定して表示される順番を決めています。</dd></dl><h4>PC向けレイアウトで#column1と#column2の横幅を変更したい場合</h4><p>このテンプレートでは#column1の横幅が可変幅で#column2の横幅は固定幅です。親要素#column-wrapの横幅から#column2の横幅を引いた値が#column1の横幅になります。</p><p>なので親要素#column-wrapの横幅が1200pxの場合、子要素#column2の横幅を300pxにしたら#column1の横幅は900pxになります。class="txt-pc">300px</span>です。*/}Resultサンプルデモはこちらスマホでのご確認はこちらをどうぞ#wrapperが縦並びの親要素で#column-wrapが横並びの親要素です。#containerと#column-wrapを兼用したいところですが、#containerまたは#column-wrapを省略すると#column1・#column2の高さが可変になりません。3カラムレイアウト3カラムレイアウトのサンプルです。#column-wrapの中に#column1・#column2・#column3を入れてレイアウトします。#column-wrapにdisplay:flexを指定します。#column1・#column2・#column3のサイドバーになる要素をサイズ固定にしてコンテンツになる要素を可変にします。固定幅にするカラムに横幅の数値を指定して可変幅にするカラムにflex:autoを指定します。class="txt-sp">100%です。class="txt-pc">可変幅です。</span></p><h4>このテンプレートでやっていること</h4><dl><dt>縦の親要素#wrapper</dt><dd>display:flex、flex-direction:column、headerとfooterには高さ固定でheightを指定、#containerにflex:autoを指定して縦方向の可変を実現します。</dd><dt>横方向の親要素#column-wrap</dt><dd>display:flexを設定してFlexboxでレイアウトしています。</dd><dt>子要素#column1と#column2と#column3</dt><dd>flex:○○を設定して横幅に関する設定をしています。</dd><dd>order:○○を設定して表示される順番を決めています。</dd></dl><h4>PC向けレイアウトで#column1と#column2と#column3の横幅を変更したい場合</h4><p>このテンプレートでは#column1の横幅が可変幅で#column2と#column3の横幅は固定幅です。親要素#column-wrapの横幅から#column2と#column3の横幅を引いた値が#column1の横幅になります。</p><p>なので親要素#column-wrapの横幅が1200pxの場合、子要素#column2と#column3の横幅を300pxにしたら#column1の横幅は600pxになります。class="txt-pc">300px</span>です。class="txt-pc">300px</span>です。*/}Resultサンプルデモはこちらスマホでのご確認はこちらをどうぞこちらも#wrapperが縦並びの親要素で#column-wrapが横並びの親要素です。こちらも同じく#containerと#column-wrapを兼用したいところですが、#containerまたは#column-wrapを省略すると#column1・#column2・#column3の高さが可変になりません。どちらのサンプルも#column-wrapの幅を1200pxで固定して中央に配置しておりますが、この横幅の指定をなくせば画面幅いっぱいのリキッドレイアウトになります。#column1・#column2・#column3のorder番号を変更すれば表示順も変更することができます。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。