【ゼロから創るWEBサイト】#012 カーソルを合わせると文字色が変わるナビゲーション設定
カーソルを合わせると文字色が変わるナビゲーション設定
ナビゲーションの文字 カーソル合わせるとグレーに変化
ナビゲーションの上部の余白を付ける
本当は、下線を引いたり動きを付けるようにしたかったんだけど、とりあえず基本の基本からということで、知らないCSSは設定せず簡単なサイト作成を目指し文字色を変えるだけにしました。
@charset "UTF-8";
/** {
outline: 1px dotted #4169e1;
}*/
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1600px;
margin: 0 auto; /* 中央に配置 */
}
/* ナビゲーション */
.nav li {
display: inline;
list-style-type: none;
}
ul.nav {
margin: 80px 0 0 0;
padding: 0 0 0 0;
}
ul.nav li a {
display: inline-block;
width: 25%;
text-align: center; /* テキストを中央に */
font-size: 1.3rem; /* フォントサイズ */
color: #000000; /* 文字色 黒 */
text-decoration: none; /* 下線を消す */
font-family: Arial, sans-serif; /* フォント種類 */
padding:20px 0 20px 0; /* 上下パディング */
}
/* ナビゲーションホバー時 */
ul.nav li a:hover {
color: #888888;
}
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>WEB STUDY / TOP</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<!-- ヘッダー -->
<header>
<nav>
<ul class="nav">
<li><a href="#">TOP</a></li><li><a href="#">ABOUT</a></li><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li>
</ul>
</nav>
</header>
<!-- /ヘッダー -->
<!-- メイン -->
<section>
</section>
<!-- /メイン -->
<!-- フッター -->
<footer>All content copyright WEB SUTUDY 2022 ©</footer>
<!-- /フッター -->
</div>
</body>
</html>どこにどう設定すれば、変化するのかがやっぱりよくわかっていない。
単品のセレクタだとわかるけど、2つ以上つくと混乱してしまう。
理由は、半角スペースの時、続けて書いた時などどう作用するか覚えていないから。
どうも私の性格上適当にとりあえずでやってしまう癖がある。
今回はそういうのを払拭する意味も込めて毎日少しづつ学習しているので
明日は、セレクタを再度きちんと理解しようと思う。