質問: ### 前提・実現したいこと ここに質問の内容を詳しく書いてください。 HTML5とCSS3を使用し、Brackets上でコーディングを行っている際に 以下のエラーが発生致しました。 ・で挟んだ部分画像赤枠⓵のように文字として発生してしまい WEb上のタグの部分に正しく表記されません。 ・画像赤枠⓶の部分のtopのnav部分だけ段落がしたに表記されてしまいます。 ・バナー背景画像の上に記載されている文字が背景画像の上に載らない状態です。 以上3点について、コーディング上には問題ないと思っているのですが、正しく 分かる方ご説明を頂きたいです。 もしかしたら、Brackets上でプレビュー表示を行い確認しているだけなので 本環境で表示した際は問題が起こるのかは試していません。 以下に記入したコードを載せます。 xで記入している部分は個人情報の為切り取っております。 ここにより詳細な情報を記載してください。 <<HTML コード>> XXXXXXXXX top business process consultant contact 人と人を繋ぐ 紹介に留まらず人の成長を 求職者様を知ること 私たちは求職者様が求めている理想とする、 目指す私に近づけるようなような活動に注力しております。 具体的にはヒアリングシートを元に求職者様を知る活動の後、課題把握を行う プロセスに移行します。 課題を把握し理解する 求職者様を知る活動の後、課題把握のプロセスに移行します。 このプロセスではより求職者の皆様の現状の課題を把握し課題を 解決できるような求人者様をご紹介致します。 お知らせ 2020/04/01~2020/04/03XXXXXXXXXXXXXXXXXXXXXXXXXXX サイトマップ プライバシーポリシー © 2020 XXXXXX. <<CSS コード>> @charset "UTF-8"; body { line-height: 1.7; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #000 } a, a:link { color: #3585b7; } a:visited { color: #6252B7; } a:hover { text-decoration: none; color: #555; } /* header */ header { display: flex; } header h1 { margin: 25px 0 0 20px; } header nav { margin: 0 0 0 auto } header nav ul { list-style-type: none; margin: 20px 0; padding: 0; display: flex; } header nav ul li a, header nav ul li a:link, header nav ul li a:visited{ display: block; padding: 10px 15px; text-decoration: none; color: #000; } header nav ul li a:hover { color: #888; } /* footer */ footer { background: #ede6e6; padding: 20px; } footer ul { list-style-type: none; margin: 0 0 5px; padding: 0; display: flex; justify-content: flex-end } footer ul li{ margin: 0 0 0 20px; } footer ul li a, footer ul li a:link, footer ul li a:visited { text-decoration: none; font-size: 13px; color: #000; } footer ul li a:hover { color:#888; } /* main */ main .inner { width: 990px; margin: 50px auto; } main h2 { margin: 50px 0 20px; font-weight: normal; font-size: 25px; color: #7f6666; } main p { margin: 0 0 15px; } main dl { width: 100%; } main dl dt { float: left; clear: both; padding: 10px 0; color: #998484; } main dl dd { border-bottom: solid 1px #ccc; margin: 0; padding: 10px 0 10px 15% } /* top */ .home main .visual { background: url(../images/sample.jpg) no-repeat center top; height: 500px; padding: 200px 50px 50px; box-sizing: border-box; } .home main .visual p { color:aliceblue; } .home main .visual p.catch { font-size: 45px; } .home main section { display: flex; margin-top: 50px; } .home main section div { padding:0 40px 0 0; } .home main section:first-child{ flex-direction: row-reverse; } .home main section:first-child div { padding: 0 0 0 40px; } /* busiess */ /* consultant*/ /* contact */ /* process */ /* sitemap */
回答: !イメージ説明 質問時に画像の添付がありませんでしたので、アップロード致します。 ⓶と⓷の部分のエラーになります。