display: flex; で横並びにしたボタンの位置がバラバラ
要素を横並びに flexbox を使用した時によくある各要素についているボタン。
display: flex; で横並びにした時にテキストの長さで位置がバラバラになりがち。
これをそろえて見栄えをよくする CSS を紹介。
普通に横ならび
まずは普通に display: flex; で横並び
テキストの長さによって button の位置がバラバラ
テキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
ボタンの位置を調整する CSS
子要素(.flexbox)とボタンに、下記の 3行のCSS を加えるとボタンの位置が子要素の一番下を基準に横並びになる
.flexbox{
display: flex;
flex-direction: column;
}
.flexbox button{
margin-top: auto;
}
テキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
ボタンとテキストの間の余白の調整
ボタンとテキストの間の余白の調整はテキスト部分に margin-bottom でボタンの位置を揃えたまま、余白を調整できる
テキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
－広告－
国内WordPressテーマ シェア率 No.1
Web制作案件にも使いやすい WordPress テーマ
SWELL
シンプルで多機能、そしてカスタマイズしやすい
ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。
買い切り型で、複数サイトに使用可能、Web制作案件にも
一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。
- 一度買えば、月額料金はなし
- 複数サイトで使用可能
- ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
- ブロックエディタの豊富な追加ブロックで投稿がリッチに
- 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
- 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
