css作ります（〜body main　背景画像の設定）

いきなり完成を目指さず、まずは「色付け」が大切と学んだ。

また、⌘⌥Iでstyleとcomputedも確認。

background-colorより、blockの範囲を確認。※padding指定がないと表示されなかった。

後に、「⌘／」でメモ書き指定。

Progateもdotinstallも完成形をジャカジャカ作ってくれたけど（当たり前）、実際に自分で作るときは範囲や高さ、余白等の感覚がサッパリだった。手間を惜しまず、最初は値を入れては確認する作業を繰り返した。

（この一見丁寧な学習方法が、後にクッソ丁寧なリサーチタイムに発展…）

【画像に文字を入れるの関門】

下調べで考えていたことが、実際にやってみたら如何にもこうにも上手くいかず…　というか、全然表示してくれなくて、background作戦を調べて実行するも出来なかった。

でも、

画像は「position:relative;」、文字列は「position: absolute;」は確実と思ったので、htmlの見直しから根気強く試しづつけた。

画像の上に文字列を表示する方法 – いつか誰かの役に立つかもしれないweb制作屋の備忘録

結果！

<div>要素の中の<h1>と<p>の両方にposition:absoluteと指定の値を入れてページを更新した時に成功😭　※頻繁に更新していたのが仇となり、<h1>だけでは画像の中に入らなかった事でエンドレスリサーチタイムに入ってしまった…。

後は、

文字列の「text-align: center;」、最強！
「list-style-type:none」「float」もお世話になりました。