サービス案内ページの作成

これまで学習した内容を元に、サービス案内ページを作成してみましょう。
ファイル名を service.html としてください。

作成上のヒント

• 基本レイアウトは他のページのHTMLをコピーして使う。
• 完成イメージから、どのようにHTMLを記述するかマークアップする。
• 既にCSSでデザインしたパーツがあれば、流用する。
• 見た目を設定したい場合には、CSSでデザインする。

記述例

上手く出来なかった方は、記述例を真似して作成を行ってください。
サービス案内ページのHTMLファイルとcssの設定の記述例は次のようになります。
※ヘッダー・フッター・サイドバーなどの共通部分については省略しています。

        ･･･略･･･
        <div class="service">
            <h1>徹底した顧客目線で<br>お客様の悩みを解決いたします。</h1>
            <h2 class="heading">創業50年の歴史に裏打ちされた強み</h2>
            <p>株式会社サンプルは、およそ50年前に東京都港区で創業を致しました。創業当時は高度成長期ということもあり、モノを作れば売れるという時代だったと伺っております。弊社も同様にただひたすら生産性を追求してモノ作りに取り組み、売上を伸ばしていきました。しかし時代も変わり、そのようなモノ作りではお客様のニーズに応えることが出来なくなり弊社も倒産寸前まで落ち込みました。その時、初心に戻ってお客様のニーズに徹底的に応えるモノ作りを企業理念において一からやり直そうという声のもと、弊社は常識を疑う姿勢を身につけて参りました。当初、奇抜で斬新な見た目からなかなか受け入れてもらえないことも多々ありましたが、地道な努力を続けることで少しずつお客様にご理解をいただけるようになり、その結果、現在に至っております。当初、奇抜だと言われておりましたものが今ではスタンダードとまでなっており、この事実は弊社が長年成功・失敗を経重ねて来た結果、本当にお客様にとって良いものを追求する姿勢で開発を進めて来れたことが大きな要因だと確信しております。</p>
        </div>
        ･･･略･･･
        

        .contact .text-center {
            text-align: center;
        }

        /* --------------------------
         * サービス案内
         * --------------------------
         */
        .service h1 {
            font-size: 28px;
            line-height: 1.5;
            margin-bottom: 30px;
        }
        .service p {
            font-size: 14px;
            line-height: 30px;
        }
        

これで、サービス案内ページの完成です。
続けて ブログ個別ページの作成 を見てください。

正しくサービス案内ページの作成ができなかった方は、
「サービス案内ページ」サンプルコードをダウンロードして、「business」フォルダの内容を上書きしてから、
次のブログ個別ページの作成に進んでください。