動画で練習24

参考ブログ

初心者でもわかるHTML&CSS講座　イタリアンレストランホームページを作る | Inoma Createｋ

※ブログ内に練習用のデータあり

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ナビゲーションメニューのスタイル指定

• <nav>のコード指定＝<background-color: >で<#C20D23;>と色を指定します。
• <ul>タグのリストを無しに設定<list-style: none;>
• <li>タグで横並びにするので<float>プロパティで<left;>指定
• 横幅＝「width」を「25%」に指定
• 文字を中央揃え<text-align>にするので<center>指定
• ナビゲーションの<a>タグ指定、<display>要素を<block>要素に指定
• <text-decoration>＝文字のアンダーラインを<none>で消す。
• 文字色<color>は白<#fff>に指定
• ナビゲーション機能のマウスのポインターを重ねた時の疑似クラスとして<a>タグの<.hover>を指定
• マウスを重ねた時に色を透過させるため、透過のプロパティ<opacity>を指定
• <li>タグを横並びにしたので<ul>タグの後に疑似要素<::after>を設置、<content>は空に設定<: "";>
• 2段目<display>は<: block;>３段目<clear><: both;>と指定

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

html

↑<nav>関連のコードを全て入力

ブラウザ

↑失敗、赤い枠が大きくなっています。

修正

↑「.container」を間違えていました。

↑変更

ブラウザ

無事赤枠が指定された箇所に移動できました。

前回同じ単語の間違いなので気を付けたいです。

※続きます。