お役立ち
2021.03.08
コンテンツ内でボタンを最下部に配置するCSS小技
↑上のようなレイアウトはデザインをする上でよく利用しますよね？
しかし、何も考えずにcssで指定していくとすると↓下のような状態になるのではないでしょうか？
そこで、今回はコンテンツの高さに関わらず、ボタンを最下部に配置するCSS小技をご紹介します。
まずはベースとなるテストコードから。
下記コードのレイアウトを行っていくと仮定しています。
<ul>
<li>
<figure>
<img src="sample.img" />
</figure>
<p>テキストが入ります。テキストが入ります。</p>
<p class="btn">
<a href="">
ボタン
</a>
</p>
</li>
<li>
<figure>
<img src="sample.img" />
</figure>
<p>テキストが入ります。</p>
<p class="btn">
<a href="">
ボタン
</a>
</p>
</li>
<li>
<figure>
<img src="sample.img" />
</figure>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p class="btn">
<a href="">
ボタン
</a>
</p>
</li>
</ul>
とりあえず解決法！
ul {
display: flex;
justify-content:
space-between; /* 均等配置 */
}
li {
display: flex;
flex-direction:
column; /* 縦積みする */
}
.btn {
margin-top: auto;
}（※↑デザインに関するCSSは省略しています。）
いかがだったでしょうか？
今回のポイントは3点！
➀<li>に「display: flex;」を指定してflexアイテムにする。
②<li>に「flex-direction: column;」を指定して、横並びになっているコンテンツを縦積みする。
③ボタン(.btn)に「margin-top: auto;」を指定！コンテンツの高さに関わらず、ボタン要素が最下部に配置されるようになります。
Flexのちょっとしたポイントを抑えて、マークアップの効率化を目指してみましょう！
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
