HTML5&CSS3デザインブックという本でHTMLとCSSを勉強中うなのですが、書籍内にあるリストを横一列に並べるCSSを写経して書いたのですがうまく変更が適応されませんでした。私の確認した範囲ではほんの記述と全く同じにかけていると思います。

もしかして描き方が変わってしまったりしているのでしょうか。コードは以下のような形になっています.

lang
1<!DOCTYPE html>
2<html>
3<head>
4<meta name = "viewport" content = "width=device-width">
5
6<link rel = "stylesheet" href = "grid-guide.css">
7<link rel = "stylesheet" href = "style.css">
8</head>
9
10<body>
11
12<div class = "box1">
13<div class="site">
14<h1><a href="#">TimeSwitch</a></h1>
15</div>
16</div>
17
18<div class = "box2">
19   <nav class = "menu">
20   <ul>
21   <li><a href = "#">トップ<a></li>
22   <li><a href = "#">雑貨<a></li>
23   <li><a href = "#">ガジェット<a></li>
24   <li><a href = "#">食べ物<a></li>
25   <li><a href = "#">お出かけ<a></li>
26   <li><a href = "#">お問い合わせ<a></li>	
27   </ul>
28   </nav>
29</div>
30
31<div class = "boxA">
32<div class = "box3">
33BOX3
34</div>
35
36<div class = "box4">
37BOX4
38</div>
39</div>
40
41<div class = "box5">
42BOX5
43</div>
44
45</body>
46</html>

lang
1@charset "UTF-8";
2
3body {font-family: 'メイリオ',
4		'Hiragino Kaku Gothic Pro', 'sans-serif'}
5		
6.site h1 a { color:#000000;
7				text-decoration:none;}
8.site h1 { 	margin: 0;
9				font-size: 30;					
10		
11/*ナビゲーション*/	
12
13.menu ul {
14	margin: 0;
15	padding: 0;
16	list-style: none;
17}
18.menu li a {
19	display: block;
20	padding: 5px;
21	color: #000000;
22	font-size: 14px;
23	text-decoration: none;
24}
25.menu ul:after {
26	content: "";
27	display: block;
28	width: auto;
29}
30.menu li { 
31	float: left;
32	width: auto;
33}
34
35		
36@media(min-width 768px)	{
37	
38.box3{
39	float :left;
40	width:70}
41	
42.box4{
43	float:left;
44	width:30;}
45}
46		
47.boxA:after {
48	content:"";
49	display: block;
50	clear: both;}
51
52.box3{
53	float :left;
54	width:70}
55	
56.box4{
57	float:left;
58	width:30;}

行動規範の内容に同意します

回答3件

ベストアンサー

コーディングスタイル（インデントの幅，改行位置など）を統一してください，また，リント（文法エラーを発見する機能・プログラム）を使用してください．
そうすると，以下のような基本的な問題点を見つけることができます

`</a>`が`<a>`になっている

`}`(閉じ括弧)がない

`:`(コロン)が抜けている

無駄な空白がある

修正したものが以下になります（https://liveweave.com/のリントは必要以上にうるさいので，文保エラー以外は基本スルーして良いです）

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta name="viewport" content="width=device-width">
5    <link rel="stylesheet" href="grid-guide.css">
6    <link rel="stylesheet" href="style.css">
7  </head>
8  <body>
9    <div class="box1">
10      <div class="site">
11        <h1><a href="#">TimeSwitch</a></h1>
12      </div>
13    </div>
14
15    <div class="box2">
16        <nav class="menu">
17          <ul>
18            <li><a href="#">トップ</a></li>
19            <li><a href="#">雑貨</a></li>
20            <li><a href="#">ガジェット</a></li>
21            <li><a href="#">食べ物</a></li>
22            <li><a href="#">お出かけ</a></li>
23            <li><a href="#">お問い合わせ</a></li>    
24          </ul>
25        </nav>
26    </div>
27    <div class="boxA">
28      <div class="box3">BOX3</div>
29      <div class="box4">BOX4</div>
30    </div>
31    <div class="box5">BOX5</div>
32  </body>
33</html>

css
1@charset "UTF-8";
2
3body {
4    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', 'sans-serif'
5}
6
7.site h1 a {
8    color:#000000;
9    text-decoration:none;
10}
11.site h1 {
12    margin: 0;
13    font-size: 30;
14}
15  /*ナビゲーション*/
16
17.menu ul {
18    margin: 0;
19    padding: 0;
20    list-style: none;
21}
22.menu li a {
23    display: block;
24    padding: 5px;
25    color: #000000;
26    font-size: 14px;
27    text-decoration: none;
28}
29.menu ul::after {
30    content: "";
31    display: block;
32    width: auto;
33}
34.menu li { 
35    float: left;
36    width: auto;
37}
38
39@media(min-width: 768px) {
40  .box3{
41      float :left;
42      width:70;
43  }
44  .box4{
45      float:left;
46      width:30;
47  }
48}
49
50.boxA::after {
51    content:"";
52    display: block;
53    clear: both;
54}
55
56.box3{
57    float :left;
58    width:70;
59}
60
61.box4{
62    float:left;
63    width:30;
64}

投稿2018/08/25 15:17

liveasnotes

総合スコア1284

liveasnotes

2018/08/25 15:19

cssのプロパティを書くとき，コロンの後ろにスペースを入れるか入れないかも統一した方が良いです．見た目的に．

liveasnotes

2018/08/25 15:22

上から順番に，「基本的かつ，影響の大きい」ミスになっています Visual Studio Codeなり，Bracketsなり，ちゃんと整ってるエディタを使うことをおすすめします

行動規範の内容に同意します

手元にある本にはないので本当にその通り書けているかは確認できないのですが、
既に指摘があるようにhtmlの構文が結構めちゃくちゃです。
プログラムは指示通りにしか動かないので、ちょっとした構文のミスを「いい感じに」吸収してくれたりはしません。
特に写経をしている段階だと同じに書けている「つもり」になって一字一句間違いないか見直すことにしか目がいかなくて、全体の構造や整合性を見ることができず、
抜け出せなくなります。
結構それで時間を浪費してしまって何時間何日過ぎることもあるのは非常に勿体ないです。

「構文チェック」「デバッグ」は覚えましょう。
特に今後JavaScriptやサーバー側の言語（PHP）など扱うことになれば、そもそも何も実行されない（ように見える）ことなんてしょっちゅうあります。

htmlやCSSの構文チェックは既に回答が出ているようなチェック機能のあるエディタを使うのも良いですし、
Web上に構文チェックをしてくれるサービスはたくさんあります。ぜひ活用してください。

投稿2018/08/26 00:01

m.ts10806

総合スコア80842

.site h1の閉じ括弧が書かれていません。

CSS
1.site h1 {
2margin: 0;
3font-size: 30;                    
4}

投稿2018/08/25 15:19

kirin311

総合スコア53

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.49%

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

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

質問する

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

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

HTMLのリストにCSSが効かない

`</a>`が`<a>`になっている

`}`(閉じ括弧)がない

`:`(コロン)が抜けている

無駄な空白がある

関連した質問

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

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

</a>が<a>になっている

}(閉じ括弧)がない

:(コロン)が抜けている

無駄な空白がある

関連した質問

`</a>`が`<a>`になっている

`}`(閉じ括弧)がない

`:`(コロン)が抜けている