CSSレイアウト：ケースに応じた実装方法（メモ）

ケース1. 画像に重ねる形で、ボタンや文字を配置。レスポンシブで画像と文字やボタンもリサイズ・移動。

• コンテナ内にimg（picture/figure)とボタン、文字を含める。
• 重ねる要素は、position：absolute。
• background-imageを使うと、リサイズ・再配置の同期が難しい。

tag.html

<section>
 <img src="xxxx.svg" />
 <h1>タイトル</h2>
 <button>ボタン</button>
</section>

style.css

section {
 /* 子要素のabsoluteを有効にする為 */
 position: relative;
 width: 100vw;
}

section img {
  /* コンテナのすべての領域に画像表示 */
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

section h1, button {

  /* 文字サイズ(画面の横サイズを基準とする）vwで全体のサイズに応じて変更。 */
  font-size: [任意の数字]vw; 

  /* 重ねる */
  position: absolute;

  /* 上からの位置 */
  top: [任意の数値]%;

  /* absoluteでの中央配置 */
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}