【独学で学ぶHTML5/CSS3】メイン画像の埋め込み バナーの作成 6日目【初心者】

2020年5月15日WEB

【メイン画像の表示】

メインイメージを埋め込みます!
画像はの表示にはタグを使います!
imgタグ閉じタグは必要ないので注意します。
メインイメージの入力が終わったら、背景色の設定を消しておきます。
CSSのメインイメージでskyblueと設定しているところです。

こうなりました!

【リストタグでバナー作成】

バナーを3つ作成します!
ヘッダー部分で作成した時と同じようにリストを作成します。
リストの中にはリンク先を指定するaタグを配置し、リンク先の指定をするhrefには仮置きで#を入れておきます。
CSSで作業するために、作成したリンクにclass名を指定しておきます。
liに対してnav__lというclass名を付けました。

CSSで新しく
.nav__l (ドットはclassという意味です!)
を作成していきます。
横幅の指定、高さの指定、背景色の指定をそれぞれ行います!

このようなりました!

フロントエンドエンジニアになりたい人の Webプログラミング入門

…あれ??
なんか違う💦
お手本ではバナーが縦に並んでいるのに、なぜか横になっています💦
なぜがわからず悪戦苦闘

navタグをdivに変えてみました。
すると

こうなりました!
一旦このまま進んでいきたいと思います!

それぞれのバナーの間に余白を作るため
margin-bottom: 10px;
と記述し、それぞれの下に10pxの余白を作りました。
グレーになっているところが余白の部分になります!

確認したら背景色の指定は消して、高さの指定もautoに変更しておきましょう。

それぞれのバナーに境界線をつける

CSSに記述していきます

border: 1px solid #63abd4;
borderは境界線を引くためのもので、線の太さの指定をし、一本線という意味のsolid、そして色を指定しました。

境界線で上下左右に2pxオーバーしている状態のため、横幅、高さから2pxづつ減らします。
境界線を使う場合はこの作業が必要なので気を付ける!

バナーの文字の位置を調節する

中の文字に対して変更を加えたい場合はliタグではなく、aタグに対して指定するため、class名を付与します。
CSSに
.nav__link
を新しく作り、文字に対してはこちらで指定していきます。

.nav__link {
font-size: 16px; (文字の大きさを指定)
font-weight: bold; (文字の太さを太く指定)
color: #555; (文字の色の指定)
text-decoration: none; (デフォルトで表示されている下線の削除を指定)
}

このように指定するとこうなりました。

text-decoration: none;

を記述せずにページを確認するとデフォルトの下線が表示されますので
記述前後で違いを確認しておくとわかりやすいです!!

なんとなくですが少しづつ理解していけているのが楽しいです!!
焦らずに毎日取り組んでいきたいです!

僕は『Udemy』で学習しています。
これからオンライン学習を始められる方は是非参考にしていただければと思います!

SPONSORED LINKS

WEBHTML,CSS

Posted by jinya