マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > お役立ち > コンテンツ内でボタンを最下部に配置するCSS小技

Mighty Ace Blog

マイティーBlog

お役立ち

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アナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.