###前提・実現したいこと
HTML5,CSS3でウェブサイトを作っています。CSS3の記述が正しく反映されないため、原因を探っているところです。
プログラミングの様に、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>北海道札幌市中央区南3条西8丁目 大洋ビル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
回答2件
あなたの回答
tips
プレビュー