【独学で学ぶHTML5/CSS3】ロゴの配置 4日目【初心者】

2020年5月14日WEB

前回記述したコメントアウトを使ってCSSも分かりやすくしておきましょう!
コメントアウトの使い方は
HTMLでは
<!–〇〇–>
と記述しましたが、
CSSでは
/* ======
〇〇
====== */

と記述します。

【ロゴを設定する】

ヘッダーの中にh1というタグを記述します。
大見出しという意味で、WEBページ上で実際に表示されるページのタイトルを記述するところです。
ロゴとして画像を表示させたいので、imgタグで表示させます。
imgタグではsrc属性画像の指定をし、alt属性で画像に対する説明を加えます。
こうすることで画像が見えない場合に文字で説明したり、目が見えない方にもどんな画像を使っているかがわかるためです!

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

【ナビゲーションを指定】

headerの中に設置するナビゲーションを作ります。
navタグulで作成したリストを囲みます!
liタグの中に置きたい項目の名前を入力します。

ナビゲーションバーができました。

リストにはいろんな種類があるので、用途によって使い分けましょう!

ナビにはリンクをつけるので、aというタグでリンクの設定をします!
hrefの中にはURLを入れますが、仮置きとして”#”を使用します。
するとリンク先の指定ができ、自動的に文字が青くなります。

次回はCSSでヘッダーの中の設定をしていきます!

僕が使っている学習サイトは『Udemy』!
オンラインなので、自分が好きな時間に取り組めます!

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

SPONSORED LINKS

WEBHTML,CSS

Posted by jinya