HTML/ CSS 〜Progate中級編（背景画像と「ボタン」のレイアウト）〜
無事に😅、背景画像が設定出来たので、完成版に近づける方法を学習していきます。
ここまでの学習時間…約、2時間半…否、盛ったな、3時間だな… まぁ、継続が大事ということで！なんてったって有料会員様だし😏（本当にしつこい）をフルに使おう★
以前手探りで検索していた「display:inline-block」のイメージがようやく正しくアップデートされました。
また、以下3点もご教示いただきました。（装備が増えて、だんだん強くなってきた気がする… 気がする★）
①カーソルを乗せたときに色を変える（css→div:hover{ }）
②ボタンを角丸にする（border-radius: 半径px;）
③テキストを中央に寄せる←任せて！text-align: center;⭐️
また、ボタンアイコンの挿入、についても学習。
全てを見れたわけではないですが、Font Awesomeのアイコンの重ね使いの方法までのっていました❗️「サルワカ」さん、好きなのでいつか使いたいです♪※サルワカさまの素晴らしさについては、また改めて⭐️
【背景画像・ボタンのレイアウトに関するメモ】
🌸ボタンの間隔を整える❗️
<div>上下のmargin→20pxに指定。
2つの横並びボタンの左側classに対して、margin-right→10pxに指定。
🌸要素の中央よせ
margin:0 auto;（広い範囲を囲うようなブロック要素の場合）
text-align:center;（テキストやボタンのようなインライン要素・インラインブロック要素の場合）→<h>や<p> の要素が共に入っている<div>にはこちら！と解釈。
🌸opacity;（要素を透過させる）
この記事が気に入ったらサポートをしてみませんか？