🌻
【Tailwind】フッターを画面下部に固定する
はじめに
現在Ruby on Railsを用いてPFを作成しています。
アプリのUIを整えるためにTailwindを使用していますが、今回はTailwindを使用してフッターを画面下部に固定する方法を記事にしたいと思います。
フッターを下部へ固定する方法はいくつかあるかと思いますが、なかなか上手くいかず手こずった部分でもあります。
幾つか似たような記事も拝見しましたが、今後のアプリ作成でも手間取る可能性を考え自分の備忘録として残しておきたいと思います。
どのファイルで設定したのか
フッターを画面下部に固定するにあたり、今回はapp/views/layouts/application.html.erbと、各viewファイルに修正を加えました。
まずはapplication.html.erbでの修正箇所です。
bodyタグに、flex flex-col min-h-screenを追記しました。
- app/views/layouts/application.html.erb
<body class="flex flex-col min-h-screen">
<% if current_user %>
<%= render 'shared/after_login_header' %>
<% else %>
<%= render 'shared/before_login_header' %>
<% end %>
<%= render 'layouts/flash_messages' %>
<%= yield %>
<%= render 'shared/footer' %>
</body>
-
flex： 公式ドキュメント。Flexbox のレイアウトを適用し、子要素の拡大や縮小を行うためのクラス。 -
flex-col： 公式ドキュメント。要素を垂直に配置するために使用する。 -
min-h-screen： 公式ドキュメント。
要素の最小高さをスクリーンの高さ（viewport height = ブラウザウィンドウの高さ）と同じに設定してくれる。min-h-screenにより、<body> 要素が常に画面の高さいっぱいに広がるようになる。
この要素を3つ組み合わせることで、最低でもスクリーンの高さになり、かつ<body> 内の要素は縦に並び、画面全体を埋めるようになるようです。この3つが揃うことで、スクリーンの高さよりコンテンツが少ない場合でも、フッターが画面上部に上がってこなくなります。
次に各ビューファイルでの設定です。
コンテンツ要素に、flex-growを追記します。（必要であればmb-10なども）
- 各ビューファイル
<div class="w-5/6 mx-auto max-w-screen-xl flex-grow mb-10">
- 中身は割愛 -
</div>
-
flex-grow： 公式ドキュメント。flex-growを設定することで、ページ全体がスクロールでき、かつフッターは常にページの下部に位置するようになります。 -
mb-10は、最後のコンテンツからフッターまで余白を作りたかったので、mb-10も設定しています。
最後に
今回はTailwindを使用してフッターを画面下部に指定する方法でした。
各要素がどんな役割を果たしているか確認することで、違うフレームワークでも応用できたらと感じました。
最後までご覧いただき、ありがとうございました。
Discussion