【HTML/CSS】親要素を中心にキャッチコピー文章、文字を配置する方法【relative/absolute】

2020年8月23日

自身の勉強、復習がてら、

親要素を中心に要素を配置する方法を記載していきます。

この手の記事に前置きや余計な情報は不要とみて
さっさと書いていきます。
(せっかちな方歓喜)

HTML

<section class="section01">
 <div class="catchcopy">
  <p>キャッチコピー文章</p>
  <p>～サブタイトル～</p>
 </div>
</section>

CSS

.section01{
 background: url("../img/haikei.png");
 background-size: 100% 100%;
 background-repeat;
 height: 100vh;
 position: relative;
}

.section01 .catchcopy{
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 font-size: 50px;
 position: absolute;
}

解説

【section01】

・background: url(“../img/haikei.png");

背景画像を読み込んだだけ。
urlは自身のフォルダに合わせてください。

・background-size: 100% 100%;

画像サイズに合わせて最大化。
画面サイズ変えると挙動やばくなるのであまり使わないほうがいい。

・background-repeat;

今回は別にいらない。
癖でつけただけ。

・height: 100vh;

要素の高さをウインドウの高さに。

・position: relative;

相対配置。
元いた位置を基準。

【catchcopy】

・top: 50%;

親要素の上下真ん中の位置へ

・left: 50%;

親要素の左右真ん中の位置へ

・transform: translate(-50%,-50%);

topとleftだけでは、キャッチコピー要素の左上が基準になってしまう。

要素の真ん中にするため、要素の半分の長さ分ずらす。

・font-size: 50px;

適当。
分かりやすいじゃろ。

・position: absolute;

絶対配置。

bodyの左上基準に動くように。

親要素にrelativeをつけることにより、
親要素の左上を基準にして動いてくれるようになる。

まとめ

手抜きみたいになりましたが、これで終わり。

でもこれ自分で理解するのに結構かかったりする。

短いけど重要な文章。

ちなみに私はすぐabsoluteとrelativeのことを忘れるので
理解するのに数か月かかりました。