背景画像の上に文字以外のものを右側に入れる方法!動画付き「過保護説明」
例えば、下記のサイトのように、背景画像の上にフォームボックスなどを右側に表示したい時ってありますよね(^^)
https://www.airbnb.jp/host/homes
文字であれば、text-align: right;
で済みますし、ブロック要素であれば、margin
を使えば、なんとか出来そうですが、その際にmargin-top
が効かない!という問題が発生するかもしれません。
今回はmargin
を使う方法も含めて、2種類ご紹介していきたいと思います!
Contents
floatを使う方法
まずはfloat
を使う方法をご紹介したいと思います。
とりあえずfloat
のイメージを頭に入れてくださいね!こんな感じ↓
何も指定しなければ、アニメーション1番目(ピンクが青の左上)の状態になっていると思いますが、それをfloat
で浮かせて、移動させるっていう感じです。
具体的には、「ピンク」に、float: left;
を指定してあげる感じになります。
詳細は、動画を参考にしていただきたいのですが、メリットは、float: left;
ゆえに、ふわふわ浮いている状態ということで、位置指定(上から○○、下から○○)が簡単!ということですね!
marginを使う方法
margin
を使う方法は、ぶっちゃけfloat
を使う方法よりも、先に浮かんだのではないでしょうか。
margin
を使った左寄せは、margin-left: auto;
ですね(^^)
し・か・し、
親子関係がある中で(今回であれば背景画像の青い部分【親】上のピンクの部分【子】)、margin
を指定する際に、注意する点があります。
今回ですと、margin-top
が効かない!という問題にぶち当たりませんでした?
まずは、その理由を説明しますね!
margin?padding?
まず、今回の場合の【子】のmargin
とpadding
は上記の通りですね!
つまり、margin
を指定すれば、上の要素からの余白、padding
を指定すると、ボックス内での余白が出来てしまいます。。
でもやりたいのは、親要素と子要素の間の余白ですね!
その際に、親子margin問題を知っておく必要があります。
親子margin問題
上記のように、子どもが親要素の中に入っている「入れ子」の場合で、同じ方向にmargin
をしている時は、大きい値の方が適用されるというルールがあります。
また、このルールは「上下」のmargin
のみに適用されます。
例えば、子要素でmargin-top: 50px;
、親要素でmargin-top: 30px;
の場合は、子要素の50pxが適用され、上の要素との余白は、50pxとなります!
いや、そんなことより、親と離れたい。。
ですね笑!
その際に、上の要素と子要素の間に、何か挟ませる必要があります。そうすれば、それを基準にmargin
を指定することが出来ます!
イメージ的にはこんな感じで、挟ませるものは、border
でも、padding
でもOKです!
実際にやってみると分かりますが、見た目的には何も変わりません。
まとめ!
フォームの後ろに背景画像があるというのはデザイン的にもおしゃれな感じなので、使うこともあるかなと思います。
ですので、こういう場合にもfloat
が使えるということ、そして、margin
親子問題は、覚えておくといいかなと思います。
以上です!