マージンとポジション

2025年5月28日2025年5月29日

マイナスマージンで画像を枠線に重ねる

※利息には復興特別所得税が課され、20.315％（国税15.315％、地方税5％）の税金がかかります。※普通預金は、預金保険制度における「決済用預金」ではありません。

※利息

※普通預金金利は変動金利です。お預入れ後の金利は、金融情勢等により予告なく変更する場合があります。※本金利は前月末終了時点でマネーブリッジの設定が完了されているお客さまに、当月1ヶ月間適用する優遇金利です。

※利息

※本金利は前月末終了時点でマネーブリッジの設定が完了されているお客さまに、当月1ヶ月間適用する優遇金利です。

※利息

解説

divブロック中の最初の子要素のmargin-topにCSSでマイナスマージンをつけるのだが、Swell（WordPress?）の場合、最初の子要素のmargin-topは0に設定されてしまうので、最初の子要素にスペーサーgifを置いて、二番目の子要素のmargin-topにCSSでマイナスマージンをつける。

divブロックの高さを揃えるには、横並びブロックに入れ、横並びブロックをalign-items: stretch;にして子divの高さを合わせる。

Flex Boxで最後の要素をそろえる

※お預入れ後の金利は、金融情勢

※普通預金金利は変動金利です。お預入れ後の金利は、金融情勢等により予告なく変更する場合があります。

※普通預金金

解説

横並びブロックの中に縦並びブロックを入れる。
横並びブロックの設定
1. justify-content: space-between;にして子の「縦積みブロック」を均等配置する。これで最初と最後の縦積みブロックが左右の端にそろう。
2. align-items: stretch;にして子の「縦積みブロック」の高さを合わせる。
縦積みブロックの設定
1. 各縦積みブロックの横幅をfixed（flex-basis:）で固定幅にする。
2. 縦積みブロックの子の要素で伸ばしたい要素をfill（flex-grow: 1;）にすると余白を埋めるように伸びるので上下の要素がそろう。

ｐｐｐ

おおおoooooo

ｄｄｄ

よかったらシェアしてね！