Q&A前提、実現したい事
WEBサイトの模写を進めているのですが、
一旦HTMLを書き上げて、CSSをリセットした段階で
どのような映り方になっているか確認しようとしたところ、
HTMLファイルをブラウザ上で開いても真っ白な状態で何も反映されていませんでした。
こちらのコーディングに問題があると思うのですが、
どこが間違っているのかをご教授願いたく存じます。
＜模写サイト＞
https://free-hp.net/clinic/cl_001/
こちらのトップ画像までの部分を、部分模写しようと考えています。
コード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>練習用サイト<title> 6 <meta name="description" content="ページの紹介文"> 7 <meta name="viewpoint" content="width=device-width, initial-scale=1"> 8 <!--css--> 9 <link rel="stylesheet" href="CSS/style.css"> 10 </head> 11 <body> 12 <header> 13 <div class="inner"> 14 <h1><a href="/"><img src="IMAGE/template-logo01.png" alt="ロゴ画像"></a></h1> 15 <h2>お電話でのご予約はこちら</h2> 16 <p>03-1234-5678</p> 17 <a href="#">WEB予約</a> 18 </div> 19 </header> 20 <nav> 21 <ul> 22 <li><a href="#">MENU</a></li> 23 <li><a href="#">MENU</a></li> 24 <li><a href="#">MENU</a></li> 25 <li><a href="#">MENU</a></li> 26 <li><a href="#">MENU</a></li> 27 <li><a href="#">MENU</a></li> 28 <li><a href="#">MENU</a></li> 29 <li><a href="#">MENU</a></li> 30 <li><a href="#">MENU</a></li> 31 </ul> 32 </nav> 33 <div class="top-wrapper"> 34 <div class="inner"> 35 <div class="top-wrapper-content"> 36 <h2>Hello, world!</h2> 37 <p>This is a simple hero unit, a simple jumbotron-style<br> 38 component for calling extra attention to featured content or information.</p> 39 <hr> 40 <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> 41 </div> 42 </div> 43 </div> 44 </body> 45</html> 46
css
1/* 2html5doctor.com Reset Stylesheet 3v1.6.1 4Last Updated: 2010-09-17 5Author: Richard Clark - http://richclarkdesign.com 6Twitter: @rich_clark 7*/ 8 9html, body, div, span, object, iframe, 10h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11abbr, address, cite, code, 12del, dfn, em, img, ins, kbd, q, samp, 13small, strong, sub, sup, var, 14b, i, 15dl, dt, dd, ol, ul, li, 16fieldset, form, label, legend, 17table, caption, tbody, tfoot, thead, tr, th, td, 18article, aside, canvas, details, figcaption, figure, 19footer, header, hgroup, menu, nav, section, summary, 20time, mark, audio, video { 21 margin:0; 22 padding:0; 23 border:0; 24 outline:0; 25 font-size:100%; 26 vertical-align:baseline; 27 background:transparent; 28} 29 30body { 31 line-height:1; 32} 33 34article,aside,details,figcaption,figure, 35footer,header,hgroup,menu,nav,section { 36 display:block; 37} 38 39nav ul { 40 list-style:none; 41} 42 43blockquote, q { 44 quotes:none; 45} 46 47blockquote:before, blockquote:after, 48q:before, q:after { 49 content:''; 50 content:none; 51} 52 53a { 54 margin:0; 55 padding:0; 56 font-size:100%; 57 vertical-align:baseline; 58 background:transparent; 59} 60 61/* change colours to suit your needs */ 62ins { 63 background-color:#ff9; 64 color:#000; 65 text-decoration:none; 66} 67 68/* change colours to suit your needs */ 69mark { 70 background-color:#ff9; 71 color:#000; 72 font-style:italic; 73 font-weight:bold; 74} 75 76del { 77 text-decoration: line-through; 78} 79 80abbr[title], dfn[title] { 81 border-bottom:1px dotted; 82 cursor:help; 83} 84 85table { 86 border-collapse:collapse; 87 border-spacing:0; 88} 89 90/* change border colour to suit your needs */ 91hr { 92 display:block; 93 height:1px; 94 border:0; 95 border-top:1px solid #cccccc; 96 margin:1em 0; 97 padding:0; 98} 99 100input, select { 101 vertical-align:middle; 102} 103
回答2件
0
「よくわからないまま書き直したら表示できた」ので問題ない、でいいのかな。
Diff
1-<title>練習用サイト<title> 2+<title>練習用サイト</title>
真っ白になる原因は、title要素の終了タグがないため。
投稿2020/09/06 14:23
総合スコア11990
0
自己解決
すみません、Atomを使ってコーディングしていたのですが、
タグがなぜかうまく対応していない状況でした。
書き直したら表示できたので問題ないです。
お手数おかけしました。
投稿2020/09/06 12:07
総合スコア7
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。