Q&A
ホームページ作成の勉強をしていますがヘッダー部で躓いてしまいました。
CSSの設定だと思うのですがよくわかりません。
画像のようにしたくてコーディングしていますが、HOMEを四角い枠で囲うと想像できない場所に枠が出現します。
何が悪いのでしょうか？
HTML5
1<!doctype html> 2<html lang = "ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>てすと</title> 6 <meta name="description" content="れんしゅうちゅう"> 7 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 8 <link rel="stylesheet" href="style.css"> 9 </head> 10 11 <body> 12 <header class="page-header wrapper"> 13 <h1><a class="home" href="index.html">HOME</h1> 14 <nav class="main-nav"> 15 <li><a href="news.html">News</a></li> 16 <li><a href="menu.html">Menu</a></li> 17 <li><a href="contact.html">Contact</a></li> 18 </nav> 19 </header> 20 </body> 21</html>
CSS
1@charset "UTF-8"; 2 3/* 共通部分 4---------------------------------------------*/ 5html { 6 font-size: 100%; 7} 8body { 9 font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; 10 line-height: 1.7; 11 color: #432; 12} 13a { 14 text-decoration: none; 15} 16img { 17 max-width: 100%; 18} 19 20/* HEADER 21---------------------------------------------*/ 22.main-nav { 23 display: flex; 24 font-size: 1.25rem; 25 text-transform: uppercase; 26 margin: 34px; 27 list-style: none; 28} 29.main-nav li { 30 margin-left: 36px; 31} 32.page-header a { 33 color: white; 34} 35.page-header a:hover { 36 color: yellow; 37} 38.page-header { 39 display: flex; 40 justify-content: space-between; 41 background-color: #4B4A4A; 42} 43.wrapper { 44 max-width: auto; 45 margin: 0 auto; 46 padding: 0 4%; 47} 48.home { 49 font-size: 1.375rem; 50 color: white; 51 border-style: solid; 52 border-width: 2px; 53 border-radius: 5px; 54 padding: 7px 30px; 55}
回答1件
0
ベストアンサー
閉じタグ抜けです。
HTML
1<!-- ↓ --> 2<h1><a class="home" href="index.html">HOME</a></h1>
投稿2020/08/05 13:05
総合スコア69458
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/05 13:11