みなさんどうも。
たけるです。
今日のお題は…
僕がホームページを作っている際に生じた疑問点について、
解決法を書いていく。というお題です。
勉強している方々の参考になれば幸いです。
さて、
以下の画像をご覧ください。
カップルの画像だ。
くー、幸せを満喫しやがって悔しい！
というのは置いといて解説したいと思います。
話に戻りますが、
今回は画像に青い文字を重ねたいと思います。
これがHTMLとCSSです。それと先ほどの画像と。
See the Pen kaisetu2 by takeru77 (@takeru77) on CodePen.
bodyタグの直下にmainクラス。そしてそのCSSには
position: relative;で基準とする場所を決めました。
mainクラスのさらに直下のh1タグにはposition:absolute;
を設定し、動かす要素を決定しました。
今のコードでは青い文字が画像の上に乗っからず、
下の方にずれているのが分かると思います。
ここで私は思いました。
「CSSの.main h1 { でposition: absolute;を指定しているのに
なんで上に乗っからないのだろう？
relativeは.mainに設定してあるはずなのに…」
このように親要素.mainクラスにrelativeが指定されていて、
かつ子要素.main h1 { にabsoluteが指定されていても、
その子要素の上にもう一つ同階層の子要素があると（
HTMLファイルのmainクラスの中のimg要素のこと)
青い文字は画像にうまく乗っかりません。
←←←（特に意味はありません）
こういう場合にはabsoluteが指定されているCSS
（今回で言えば.main h1 { )
の場所にtop:を指定すると変わります。
試しにtop:0;を指定してみましょう。こうなります。
See the Pen kaisetu3 by takeru77 (@takeru77) on CodePen.
うまくいきましたね。
後はそのtop:0;をtop:50px;とかtop:20%;とか指定して
高さをつけるだけです。
See the Pen kaisetu4 by takeru77 (@takeru77) on CodePen.
僕はtop:70%;くらいにしました。
と、ここまで散々書きましたが…
青い文字を画面に載せる方法ではもう少し簡単な方法が
あることに気づきました。
←←←（特に意味はありません）のところです。
それはHTMLファイルでmainクラスの中の
img要素とh1要素を逆にすれば良いということです。
（top:を指定する前段階に）
そうすればh1要素はabsoluteを指定しているため、高さが消え、
（absoluteを指定するとその要素の高さが消えます。
まだ書いてませんでしたが…また今度記事にします。）
画像とh1要素が重なるというわけです。
その後はtop:を指定してh1要素の文字を好きな場所に
配置するなりすれば良いということです。
See the Pen kaisetu5 by takeru77 (@takeru77) on CodePen.
こういうのは
ネットで色々解決策を調べたりするのですが、
さまざまな解決法があり頭が混乱します…
というわけで
ではまた。
