質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1832閲覧

HTML、CSSヘッダー部に謎の枠が。。。

KaitoKitKat

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/08/05 12:57

編集2020/08/05 13:01

ホームページ作成の勉強をしていますがヘッダー部で躓いてしまいました。
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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

閉じタグ抜けです。

HTML

1<!-- ↓ --> 2<h1><a class="home" href="index.html">HOME</a></h1>

投稿2020/08/05 13:05

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KaitoKitKat

2020/08/05 13:11

ご指摘の通りでした、ありがとうございます。 1時間以上悩んでましたがスッキリしました! ただの確認不足だったなんて。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問