【独学で学ぶHTML5/CSS3】バナーにアイコンを加える！ 7日目【初心者】
【バナーの位置調節・アイコンを加える】
入力していた文字を中央に揃えます。
line‐heightで行間の指定を行えます。
BOXの高さが48pxとボーダー分を足した50pxのため
line‐height: 50px;
と入力
WEBページを確認すると、ちょうど縦方向に中央になりました。
フロントエンドエンジニアになりたい人の Webプログラミング入門
バナー内に表示させるアイコンを追加させます。
CSSでイメージの指定をしたら、WEBページを確認。
アンカータグはインライン要素のため、自動的に横幅が指定されますのでこのような表示になります。
そこでブロックタイプ要素にしてしまします。
※インライン要素、ブロックタイプ要素については今はそうなんだ！
で先に進みます！
このときはこれを使うんだと思って進みます！
display: block;
を使用しました。
するとアイコンがBOX内に広がります。
アイコンの表示は一つでいいので繰り返し表示させない設定も付けます。
先ほどアイコンのイメージを指定した後ろにno-repeatを付け足します。
これで画像の表示が1回だけとなりますので、WEBページではこのようになります。
【アイコン・文字の位置を合わせる】
アイコン自体の位置を変えるので、先ほど記述したno-repeatのさらに後ろに
14px centerを付け足します。左から14px、上下中央に位置付けるという指定となります。
続いて文字の位置も調節します。
padding-left: 50px; 文字の左側に50pxの余白をつけるという指定です。
こうなりました。
それぞれの項目ごとにアイコンを変更してい場合はそれぞれにclass名を付与し、
アイコンの指定をしてあげましょう！
background: url(images/dog-icon.png) no-repeat 14px center;
をそれぞれのclassに記述し、画像部分をだけ変更し記述しましょう！
僕が学んでいるのは『Udemy』！
オンライン学習ですので、好きな時間に取り組むことができます！
