HTML5,CSS3のでデバックについて

###前提・実現したいこと
HTML5,CSS3でウェブサイトを作っています。CSS3の記述が正しく反映されないため、原因を探っているところです。

<h2 class="heading-typeA">いますぐ、はじめられるカフェサイトテーマ！</h2>に着色されるはずが、されません。

プログラミングの様に、HTML,CSSデバッカがあれば教えていただきたいです。
特にコードを一行ずつステップイン実行でエラーを調べられるようなツールがあれば、良いと思っております。

###該当のソースコード
【01.html】

<!DOCTYPE html>
<html lang = "ja">
<head>
	<meta charset = "utf-8">
	<title>ページのタイトル</title>
    <link rel="stylesheet" href="../common/css/style.css"
</head>
<body>
<article>
    <header>
        <h1 class="pageTile">Cafe Debut</h1>
        <p>baser CMS カフェサイト用テーマ</br>
        baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p>
    </header>
    
        <section>
            <h2 class="heading-typeA">いますぐ、はじめられるカフェサイトテーマ！</h2>
            <p>baserCMSは、「コーポレートサイトにちょうどいい」をキャッチコピーにしたcake PHPベースの国産CMS。Cafe Debutは、baseCMSのテーマコンテスト2012に応募するために、チームこもりこましゃで作成しました。</p>
            <p>baserCMSのインストールと、Cafe Debutテーマの初期設定を行ったら、あとはあなたのスマートフォンのInstagramで写真を撮っていくだけ。</p>
            <p>Instagramのおしゃれ写真で、すぐに素敵なカフェサイトが出来上がっちゃうフォトログ風baserCMSテーマです。</p>

            <table>
                <caption>制作担当</caption>
                <tr>
                    <th>コモモ</th>
                    <td>企画・デザイン・baseCMSテーマのページ組み込み担当</td>
                </tr>

                <tr>
                    <th>モリコ</th>
                    <td>HTML/CSSコーディング担当</td>
                </tr>

                <tr>
                    <th>ひろましゃ</th>
                    <td>プラグイン制作、テーマ実装の難しいところとか担当</td>
                </tr>
            </table>
            
            <section>
                <h3 class="heading-typeB">プラグインでInstagramと連携</h3>
                <p>プラグインでInstagramと連携して、トップページにInstagramで撮影した写真がすぐに反映されます。</p>
            </section>
            
            <section>
                <h3 class="heading-typeB">レスポンシブデザインでスマートフォン、タブレット表示も快適</h3>
                <p>さまざまなデバイスの表示対応に、レスポンシブデザインを採用しました。Instagramでお店のメニューを撮影してすぐにスマートフォンで確認できるのも嬉しい♪</p>
            </section>
            
            <section>
                <h3 class="heading-typeB">Webフォントだから、飾り文字やアイコンもキレイ</h3>
                <p>サイトのタイトルやナビゲーション、主要な見出しはGoogle Web Font、アイコンはウェブフォント（Fontello）を採用しています。拡大縮小されるスマートフォンやタブレットでも解像度を気にすることなくキレイな文字とアイコン表示を実現できました。</p>
            </section>
            
        </section>

        <section>    
        <h2 class="heading-typeC">関連リンク</h2>
        <ul>
            <li>Cafe Debutのダウンロードページ</li>
            <li>Cafe Debutのデモページ</li>
            <li>baser CMS公式サイト</li>
            <li>Instagram公式サイト</li>
        </ul>
        </section>

        <aside>
            <p>撮影協力</p>
            <h2 class="heading-typeC">kitchen nest</h2>
            <p>北海道札幌市中央区南３条西８丁目 大洋ビル2階</p>
            <ul>
                <li>http://www.nest-kitchen.jp</li>
                <li>Facebookページ</li>
            </ul>
            <p>Cafe Debutテーマのイメージ撮影にご協力いただきました。とっても素敵なお店です。</p>
        </aside>
    </footer>
</article>
</body>
</html>

【style.css】

body{color: #333333;}
p{font-size: 14px;}

/*見出し*/
pageTitle{font-size: 26px;}

heading-typeA{
    font-size: 18px;
    color: #349FA6;
}


heading-typeB{font-size: 16px;}
heading-typeC{font-size: 14px;}

###試したこと
コード全体を記述漏れがないか見直しました。

###補足情報(言語/FW/ツール等のバージョンなど)
使用エディタ：Brackets

8-0_nyan5

2017/03/08 12:15

classに . がないのはタイプミスですか？

1004

2017/03/08 12:27

.にも意味があったのですね。ご指摘、ありがとうございます。

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

回答2件

ベストアンサー

linkタグが閉じれていない。
pageTileはpageTitleのタイプミスですか？
クラス名を指定するときはクラス名の前にピリオド(.)をつける。
footerタグの開始タグがない。
</br>は<br>ではないでしょうか？

参考:

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>ページのタイトル</title>
6    <link rel="stylesheet" href="../common/css/style.css">
7</head>
8<body>
9<article>
10    <header>
11        <h1 class="pageTitle">Cafe Debut</h1>
12        <p>baser CMS カフェサイト用テーマ<br>
13            baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p>
14    </header>
15
16    <section>
17        <h2 class="heading-typeA">いますぐ、はじめられるカフェサイトテーマ！</h2>
18        <p>baserCMSは、「コーポレートサイトにちょうどいい」をキャッチコピーにしたcake PHPベースの国産CMS。Cafe
19            Debutは、baseCMSのテーマコンテスト2012に応募するために、チームこもりこましゃで作成しました。</p>
20        <p>baserCMSのインストールと、Cafe Debutテーマの初期設定を行ったら、あとはあなたのスマートフォンのInstagramで写真を撮っていくだけ。</p>
21        <p>Instagramのおしゃれ写真で、すぐに素敵なカフェサイトが出来上がっちゃうフォトログ風baserCMSテーマです。</p>
22
23        <table>
24            <caption>制作担当</caption>
25            <tr>
26                <th>コモモ</th>
27                <td>企画・デザイン・baseCMSテーマのページ組み込み担当</td>
28            </tr>
29
30            <tr>
31                <th>モリコ</th>
32                <td>HTML/CSSコーディング担当</td>
33            </tr>
34
35            <tr>
36                <th>ひろましゃ</th>
37                <td>プラグイン制作、テーマ実装の難しいところとか担当</td>
38            </tr>
39        </table>
40
41        <section>
42            <h3 class="heading-typeB">プラグインでInstagramと連携</h3>
43            <p>プラグインでInstagramと連携して、トップページにInstagramで撮影した写真がすぐに反映されます。</p>
44        </section>
45
46        <section>
47            <h3 class="heading-typeB">レスポンシブデザインでスマートフォン、タブレット表示も快適</h3>
48            <p>さまざまなデバイスの表示対応に、レスポンシブデザインを採用しました。Instagramでお店のメニューを撮影してすぐにスマートフォンで確認できるのも嬉しい♪</p>
49        </section>
50
51        <section>
52            <h3 class="heading-typeB">Webフォントだから、飾り文字やアイコンもキレイ</h3>
53            <p>サイトのタイトルやナビゲーション、主要な見出しはGoogle Web
54                Font、アイコンはウェブフォント（Fontello）を採用しています。拡大縮小されるスマートフォンやタブレットでも解像度を気にすることなくキレイな文字とアイコン表示を実現できました。</p>
55        </section>
56
57    </section>
58
59    <section>
60        <h2 class="heading-typeC">関連リンク</h2>
61        <ul>
62            <li>Cafe Debutのダウンロードページ</li>
63            <li>Cafe Debutのデモページ</li>
64            <li>baser CMS公式サイト</li>
65            <li>Instagram公式サイト</li>
66        </ul>
67    </section>
68
69    <aside>
70        <p>撮影協力</p>
71        <h2 class="heading-typeC">kitchen nest</h2>
72        <p>北海道札幌市中央区南３条西８丁目 大洋ビル2階</p>
73        <ul>
74            <li>http://www.nest-kitchen.jp</li>
75            <li>Facebookページ</li>
76        </ul>
77        <p>Cafe Debutテーマのイメージ撮影にご協力いただきました。とっても素敵なお店です。</p>
78    </aside>
79    <footer>
80    </footer>
81</article>
82</body>
83</html>

投稿2017/03/08 12:19

編集2017/03/08 12:27

s8_chu

総合スコア14731

1004

2017/03/08 12:29

写経してこんなにもタイプの見落としがあるなんて、自分でも驚きました。文法を学んでミスなく打てるようになりたいです。多くのご指摘、ありがとうございました。

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

クラスは先頭に.を付けましょう。

CSS
1/*
2   pageTitle{font-size: 26px;}
3   ↓                       */
4   .pageTitle{font-size: 26px;}

【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
http://ocadweb.com/web/googlechromedevelopertools

あとはテキストエディタにエラーを表示したりする機能のあるものがあるので、それを探されてはいかがでしょうか。（Atomとか）

投稿2017/03/08 12:19

kei344

総合スコア69398

1004

2017/03/08 12:30

参考ページを教えていただき、ありがとうございます。デベロッパーツールを使えるようになりたいです。

kei344

2017/03/08 12:33

コード補完してくれるテキストエディタとか使うとタイプミス／構文ミスは減りますよー。がんばってください！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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

HTML5,CSS3のでデバックについて

関連した質問