WebサイトのHTML/CSSコーディングの手順を解説

デザインカンプからPhotoshopで画像を切り出してHTMLとCSSを作成していくことを「コーディング」と呼びます。
ここではPhotoshopによる画像の切り出しからHTMLとCSSを作成していく流れを解説します。
これでコーディングのやり方を学んでいきましょう。

今回制作するサイトページ

Webサイトのページデザイン「デザインカンプ」をPhotoshopでの制作を解説」にて制作したデザインカンプをコーディングしたサイトページになります。

難しく感じる技術も入っていますが、大枠が分かれば良いので読み進めていきましょう。

1.文章構造を確認する

Webページは下記の図のようにヘッダー、コンテンツ、フッターのブロックで構成されており、HTMLでコーディングするときにブロックごと制作していきます。

ブロックごとに分けたイメージ図

このブロック組み合わせを文章構造と言いますが、上図のように要素を整理しておくことでこの後の工程のパーツ画像を切り出したり、HTMLに記述する時に理解しやすく作業がスムーズにいきます。

コーディングすることに慣れるまでは、初心者も含めて一旦紙にメモ程度で書き出しておくかワイヤーフレームに記述しておくと良いです。
手書きによるコーディングブロックによる文章構造を確認したものが下記になります。

2.パーツ画像を作成する

パーツ画像を作成する時の流れは下記になるかと思います。

  • 1.切り出す画像を把握する
  • 2.Photoshopで画像を切り出す

順番通りに説明をしていきます。

1.切り出す画像を把握する

パーツ画像を作成するということは、デザインカンプから必要な画像を切り出すことになります。

なので、「1.文章構造を確認する」の工程でトップページで使用する画像を把握します。

  • サイトのロゴ
  • ビジュアルエリアの背景とクレジットカードとテキスト部分
  • キャンペーンバナー
  • クレジットカードエリアのカード
  • シチュエーションエリアの画像

ちなみに、ボタンや背景の色はCSSを使って表現していきます。

2.Photoshopで画像を切り出す

Photoshopで画像を切り出す方法(これを「スライス」といいます)を解説します。

2-1.画像を入れるフォルダを作成する

下準備として任意の場所に切り出した画像を入れるフォルダを作成しておきましょう。フォルダ名も任意で問題ありません。

2-2.[スライスツール]を使う

Photoshopのツールバーから[スライスツール]を使って切り出したい画像を選択をしていきます。

スライスツールでスライスエリアを選択した状態

2-3.「Web 用に保存」画面を開く

Photoshopのメニューバーから[ファイル]⇒[書き出し(E)]⇒[Web 用に保存]で「Web 用に保存」画面を開きます。

2-4.切り出す画像名をつける

「Web 用に保存」画面にスライス選択した場所が引き継がれます。
そこでスライスした範囲をダブルクリックする(図1)と「スライスオプション」画面が表示されますので名前の項目で名前をつけていきます。(図2
名前の項目で付けた名前が切り出す画像名に付きます。

2-5.スライスした画像を書き出す

書き出したいスライスエリアを選択します。(選択すると青色線が茶色線になります。)
選択できたら[保存…]ボタンを押す(図1)と「最適化ファイルを別名で保存」ウィンドウが表示されるのでフォーマット項目を「画像のみ」、スライス項目 を「選択したスライス」を選択して(図2)[保存]を押せば画像が切り出されます。(図3

2-6.背景が透明な画像を切り出す場合

背景が透明な画像が必要な場合には別個でレイヤーで背景を非表示にして切り出していきます。

3.制作フォルダを作成する

Webサイトを制作に必要なフォルダを作ります。フォルダの構成は下記のようになります。

上図での注意点は、imgフォルダが2つあります。これは共有で使われる画像(図1)と、トップページのみで使われる画像(図2)に区別しています。
共有で使われる画像やJavaScript(js)、CSSは「common」フォルダの配下に入っていることが一般的です。(図3

4.HTMLでマークアップする

マークアップとは、テキストや画像などをページ内でHTML言語で意味付けしていく作業のことを言います。
意味付けとはこのテキストが文章内でタイトルですよ~、見出しですよ~、リンクですよ~とコンピューターに正しく伝えるために行うことです。

  1. HTMLのベースを記述する
  2. headタグ内にメタ情報を記述する
  3. ヘッダーエリアを記述する
  4. コンテンツエリアを記述する
  5. フッターエリアを記述する

順番通りに説明をしていきます。

1.HTMLのベースを記述する

HTMLをマークアップしていく「index.html」を作ります。
index.htmlの中にベースとなるコードを記述します。このコードがHTML5とよばれる言語になります。
このベースとなるコードの中にテキストや画像を表示させるコードを記述していきます。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- ここにメタ情報を入れます -->
</head>
<body>
    <!-- ここにコンテンツを入れます -->
</body>
</html>

2.headタグ内にメタ情報を記述する

headタグ内にタイトルや文字コードなどサイトページ全体に関する情報を記述しますが、ブラウザ上でページに表現されない部分です。
ここから今回のサンプルで作っているカード会社のサイトを構築していきます。これまでに作成した資料を元に入れていきます。

HTMLコード

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="クレジットカードはモーメントカード。年会費無料のモーメントカードは顧客満足度No.1、ポイント還元率1%~最大3%!モーメントポイントはモーメント社の加盟店でもご利用が可能です。新規入会&利用でポイントプレゼント!">
    <title>クレジットカードのモーメントカード:お得なクレジットカード・銀行・保険のご案内</title>
    <link rel="stylesheet" href="/learning/moment-card/common/css/style.css">
    <link rel="icon" href="/learning/moment-card/common/img/favicon.png" type="image/png">
</head>

タグの意味としては下記になります。

  • meta charset:文字コードの設定になります。「UTF-8」を入れておきます。
  • meta name=”viewport”:スマホやタブレットのモバイル端末で最適に表示させるため必要です。
  • meta name=”description”:ページの説明になります。検索エンジンでページタイトルと一緒に表示されます。
  • title:サイトのページタイトルになります。
  • link rel=”stylesheet”:CSSファイルを設定します。
  • link rel=”icon”:ブラウザでページを開いた時にブラウザタブに表示されているアイコンを設定します。

3.ヘッダーエリアを記述する

「ヘッダー」「コンテンツ」「フッター」の各エリアごとに分けて作っていきます。
ここのヘッダーエリアではロゴ、サイト内検索ボックス、グローバルナビゲーションのマークアップをしていきます。

マークアップする前にデザインカンプにid、classを付けてみましょう。

上記の図を元に下記のようにコードを記述していきます。

HTMLコード

<header id="str-header">
    <!--▼▼ 1.ヘッダー上部 ▼▼-->
    <div class="str-header-top">
        <div class="inner">
            <div class="header-in-drawer">

                <div class="header-login">
                    <a href="#"><img src="/learning/moment-card/common/img/icon_login.png" alt="ログイン"></a>
                </div>

                <input id="nav-input" type="checkbox" class="nav-unshown">
                <label id="nav-open" for="nav-input"><span></span></label>
                <label class="nav-unshown" id="nav-close" for="nav-input"></label>

                <div id="nav-content">
                    <div class="nav-content-header">
                        <label for="nav-input" class="close"><span></span></label>
                    </div>

                    <form name="form-header" method="get" class="nav-search">
                        <p>
                            <input type="search" name="s" class="header-search-input" placeholder="サイト内検索">
                            <button><img src="/learning/moment-card/common/img/icon_search.png" alt="検索"></button>
                        </p>
                    </form>

                    <nav role="navigation" class="nav-drawer">
                        <!-- 省略:ドロワーメニューのタグが入る -->
                    </nav>

                    <div class="header-utility-links-sp">
                        <span class="header-utility-link"><a href="/learning/moment-card/howtouse/">お知らせ</a></span>
                        <span class="header-utility-link"><a href="/learning/moment-card/faq/">よくある質問</a></span>
                        <span class="header-utility-link"><a href="/learning/moment-card/contact.html">お問い合わせ</a></span>
                    </div>

                </div>

            </div>

            <div class="header-in-01">
                <div class="header-logo">
                    <h1><a href="#"><img src="/learning/moment-card/common/img/logo.png" alt="Moment Card" class="logo"></a></h1>
                </div>
            </div>

            <div class="header-in-02">
                <!--▼▼ 3.サブナビゲーション ▼▼-->
                <div class="header-utility-links">
                    <ul>
                        <li><a href="/learning/moment-card/howtouse/">お知らせ</a></li>
                        <li><a href="/learning/moment-card/faq/">よくある質問</a></li>
                        <li><a href="/learning/moment-card/contact.html">お問い合わせ</a></li>
                    </ul>
                </div>
                <!--▲▲ 3.サブナビゲーション ▲▲-->
                <form name="form-header" method="get" class="header-search">
                    <p>
                        <input type="search" name="s" class="header-search-input" placeholder="サイト内検索">
                        <button><img src="/learning/moment-card/common/img/icon_search.png" alt="検索"></button>
                    </p>
                </form>
            </div>
        </div>
    </div>
    <!--▲▲ 1.ヘッダー上部 ▲▲-->

    <!--▼▼ 2.ヘッダー下部 ▼▼-->
    <div class="str-header-bottom">
        <div class="inner">

            <nav class="nav-global">

                <ul class="list-nav-links">
                    <li><a href="#">トップページ</a></li>
                    <li><a href="/learning/moment-card/creditcard/"><span class="megamenu-area">クレジットカード</span></a>
                        <!-- 省略:メガメニューのタグが入る -->
                    </li>
                    <li><a href="/learning/moment-card/point/"><span class="megamenu-area">ポイント</span></a>
                        <!-- 省略:メガメニューのタグが入る -->
                    </li>
                    <li><a href="/learning/moment-card/finance/"><span class="megamenu-area">カードローン・キャッシング</span></a>
                        <!-- 省略:メガメニューのタグが入る -->
                    </li>
                    <li><a href="/learning/moment-card/campaign/"><span class="megamenu-area">キャンペーン</span></a>
                        <!-- 省略:メガメニューのタグが入る -->
                    </li>
                    <li><a href="#">会員ページ</a></li>
                </ul>

            </nav>
        </div>
    </div>
    <!--▲▲ 2.ヘッダー下部 ▲▲-->
</header>

1.ヘッダー上部

<div class="str-header-top">の範囲ではロゴとサブナビゲーションと検索ボックスのコードを記述しています。
CSSでレイアウトを記述していく工程の時にロゴを左側、サブナビゲーションとサイト内検索ボックスを右側にデザインをしたいためdiv要素で囲っています。

2.ヘッダー下部

<div class="str-header-bottom">の範囲ではグローバルナビゲーションのコードを記述しています。
グローバルナビゲーション用に使われるnavタグを使用しています。

コードが長くなるためにメガメニューのコード部分は省略しています。

3.サブナビゲーション

サブナビゲーションのコード記述は、ヘッダー上部の記述内に<div class="header-utility-links">で書いています。

4.コンテンツエリアを記述する

ここのコンテンツエリアでは下記のエリアを入れています。

  • メインビジュアルスライダー
  • キャンペーン情報一覧
  • クレジットカード一覧
  • 利用シーン別リンク
  • 注意項目一覧
  • お知らせニュース一覧

マークアップする前にデザインカンプにid、classを付けて確認してみましょう。

コンテンツエリア内の各エリアのマークアップをしていきます。

HTMLコード

<div id="str-content">
    <!--▼▼ 1.メインビジュアルスライダーエリア ▼▼-->
    <main id="str-main">

        <div class="slide slider">
            <!--▼▼ 1-1.メインビジュアルスライド ▼▼-->
            <div class="str-mainvisual _mv">
                <div class="inner">
                    <h2 class="hdg-copytext"><img src="/learning/moment-card/img/index_hdg_mv.png" alt="モーメントカード入会で5,000円分ポイントプレゼント"></h2>
                    <div class="mod-btn-wrap-01"><a href="/learning/moment-card/creditcard/merit/entry.html" class="mod-btn-01"><span class="text">カードのお申し込みはこちら</span></a></div>
                    <div class="mv-block">
                        <img src="/learning/moment-card/img/index_img_mv.png" alt="">
                    </div>
                </div>
            </div>
            <!--▲▲ 1-1.メインビジュアルスライド ▲▲-->

            <div class="str-mainvisual _mv-02">
                <!-- 省略:2番目のメインビジュアルスライドのコードが入る -->
            </div>

            <div class="str-mainvisual _mv-03">
                <!-- 省略:3番目のメインビジュアルスライドのコードが入る -->
            </div>

            <div class="str-mainvisual _mv-04">
                <!-- 省略:4番目のメインビジュアルスライドのコードが入る -->
            </div>
        </div>
        <!--▲▲ 1.メインビジュアルスライダーエリア ▲▲-->

        <!--▼▼ 2.キャンペーン情報一覧 ▼▼-->
        <div class="top-campaign">
            <div class="inner">
                <h2 class="hdg-campaign">キャンペーン</h2>
                <div class="mod-campaign-wrap tabs">

                    <input id="new" type="radio" value="new" name="tab-item" checked>
                    <label class="tab-item" for="new">モーメントカード新規ご入会</label>
                    <input id="member" type="radio" value="member" name="tab-item">
                    <label class="tab-item" for="member">モーメントカード会員さま向け</label>

                    <div class="tab-content" id="content01">
                        <!-- 省略:サムネイルバナーとテキストリンクコードが入る -->
                    </div>

                    <div class="tab-content" id="content02">
                        <!-- 省略:サムネイルバナーとテキストリンクコードが入る -->
                    </div>

                </div>
                <div class="mod-btn-wrap-02">
                    <a href="/learning/moment-card/campaign/" class="mod-btn-02">キャンペーン一覧</a>
                </div>
            </div>
        </div>
        <!--▲▲ 2.キャンペーン情報一覧 ▲▲-->

        <!--▼▼ 3.クレジットカード一覧 ▼▼-->
        <div class="top-recommended">
            <div class="inner">

                <h2 class="hdg-recommended">おすすめのクレジットカード</h2>

                <div class="mod-recommended-wrap">

                    <!--▼▼ 3-1.クレジットカード ▼▼-->
                    <div class="mod-recommended">
                        <a href="/learning/moment-card/creditcard/lineup/moment.html">
                            <div class="image-area">
                                <img src="/learning/moment-card/img/index_img_momentcard.png" alt="">
                            </div>
                            <div class="mod-text">
                                <p>モーメントカード</p>
                            </div>
                        </a>
                    </div>
                    <!--▲▲ 3.1.クレジットカード ▲▲-->

                    <div class="mod-recommended">
                        <!-- 省略:各クレジットカードのコードが入る -->
                    </div>

                    <div class="mod-recommended">
                        <!-- 省略:各クレジットカードのコードが入る -->
                    </div>

                    <div class="mod-recommended">
                        <!-- 省略:各クレジットカードのコードが入る -->
                    </div>

                </div>

                <div class="mod-btn-wrap-02">
                    <a href="/learning/moment-card/creditcard/lineup/" class="mod-btn-02">カード一覧</a>
                </div>
            </div>
        </div>
        <!--▲▲ 3.クレジットカード一覧 ▲▲-->

        <!--▼▼ 4.利用シーン別リンク ▼▼-->
        <div class="top-scene">
            <div class="inner">
                <div class="mod-scene-wrap">
                    <!--▼▼ 4-1.各シーンのサムネイルとリンク ▼▼-->
                    <div class="mod-scene">
                        <a href="/learning/moment-card/creditcard/merit/entry.html">
                            <div class="image-area">
                                <img src="/learning/moment-card/img/index_img_scene_01.png" alt="">
                            </div>
                            <div class="mod-text">
                                <p>カードをつくる</p>
                            </div>
                        </a>
                        <ul class="scene-list">
                            <li><a href="/learning/moment-card/creditcard/lineup/">カード一覧</a></li>
                            <li><a href="/learning/moment-card/creditcard/merit/ancillary.html">おとくなカード特典</a></li>
                            <li><a href="/learning/moment-card/creditcard/lineup/business.html">ビジネスカード</a></li>
                            <li><a href="/learning/moment-card/creditcard/lineup/etc.html">ETCカード</a></li>
                        </ul>
                    </div>
                    <!--▲▲ 4-1.各シーンのサムネイルとリンク ▲▲-->

                    <div class="mod-scene">
                        <!-- 省略:各シーンのサムネイルとリンクのコードが入る -->
                    </div>

                    <div class="mod-scene">
                        <!-- 省略:各シーンのサムネイルとリンクのコードが入る -->
                    </div>

                    <div class="mod-scene">
                        <!-- 省略:各シーンのサムネイルとリンクのコードが入る -->
                    </div>
                </div>
            </div>
        </div>
        <!--▲▲ 4.利用シーン別リンク ▲▲-->

        <!--▼▼ 5.注意項目一覧 ▼▼-->
        <div class="top-attention">
            <div class="inner">

                <ul class="attention-list">
                    <li><a href="#">カード利用時にお取引を保留させていただく場合がございます。</a></li>
                    <li><a href="#">お引越し等で住所が変わられた際には、お早めに住所変更の届出をお願いいたします。</a></li>
                    <li><a href="#">お客さまの情報を盗み取ろうとするコンピューターウイルスにご注意ください。</a></li>
                    <li><a href="#">不正にポップアップ画面を表示させて、お客さま情報を盗み取ろうとする犯罪にご注意ください。</a></li>
                </ul>

            </div>
        </div>
        <!--▲▲ 5.注意項目一覧 ▲▲-->

        <!--▼▼ 6.お知らせニュース一覧 ▼▼-->
        <div class="top-news">
            <div class="inner">
                <h2 class="hdg-news">お知らせ</h2>
                <div class="mod-news-wrap tabs">
                    <input id="all" type="radio" value="all" name="tab-item02" checked>
                    <label class="tab-item02" for="all">すべてのお知らせ</label>
                    <input id="release" type="radio" value="release" name="tab-item02">
                    <label class="tab-item02" for="release">ニュースリリース</label>
                    <input id="safety" type="radio" value="safety" name="tab-item02">
                    <label class="tab-item02" for="safety">安心・安全にご利用いただくために</label>
                    <div class="tab-content" id="content03">
                        <!-- 省略:「すべてのお知らせ」の情報一覧が入る -->
                    </div>
                    <div class="tab-content" id="content04">
                        <!-- 省略:「すべてのお知らせ」の情報一覧が入る -->
                    </div>
                    <div class="tab-content" id="content05">
                        <!-- 省略:「すべてのお知らせ」の情報一覧が入る -->
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

1.メインビジュアルスライダーエリア

<div class="slide slider">の範囲ではメインビジュアルのコードを記述しています。
メインビジュアルでは一定の時間で画面が自動的に変わるスライド機能を実装しています。

1-1.メインビジュアルスライド

文章構造で考えると「1.メインビジュアルスライダーエリア」の中にメインビジュアルがスライドされるデザイン4つ分を記述しています。
上記のサンプルコードでは<div class="str-mainvisual _mv">の中にクレジットカードと申込みボタン、コピー文章を記述しています。
他3つのスライド分を記述していますが、サンプルコードではコードの記述を省略しています。

2.キャンペーン情報一覧

<section class="top-campaign">の範囲ではキャンペーン情報のバナーとテキストのコードを記述しています。
「モーメントカード新規ご入会」と「モーメントカード会員さま向け」の一覧をタブで切り替えできるようにしています。(上記のサンプルコードでは詳細の記述については省略しています。)

3.クレジットカード一覧

<section class="top-recommended">の範囲ではクレジットカードのリンク一覧大枠のコードを記述しています。
4つのカードを並列で表示させるようにしています。

3-1.クレジットカード

「3.クレジットカード一覧」の4つ並列に表示するコードの中に<div class="mod-recommended">の範囲で各カードのサムネイル(カード券面)とテキストリンクを記述しています。
上記のサンプルコードではモーメントカードのみを記述しており他3つのカード情報は省略にしています。

4.利用シーン別リンク

<div class="top-scene">の範囲ではカードの利用シーン別の情報の大枠のコードについて記述をしています。
4つのシーンが並列で表示するためのことを記述しています。

4-1.各利用シーンのサムネイルとリンク

各利用シーンのサムネイルとリンクについては<div class="mod-scene">の範囲でコーデを記述しています。
上記サンプルコードは一つだけ正規で書いており他3つは省略をしています。

5.注意項目一覧

<section class="top-attention">の範囲では注意項目の一覧エリアでは箇条書きリンクのコードを書いています。

6.お知らせニュース一覧

<section class="top-news">の範囲ではお知らせニュース一覧のコードを記述しています。
ここでは「すべてのお知らせ」「ニュースリリース」「安心・安全にご利用いただくために」のニュース一覧をタブで切り替えできるように記述しています。

「モーメントカード新規ご入会」と「モーメントカード会員さま向け」の一覧をタブで切り替えできるようにしています。(上記のサンプルコードではニュース一案の詳細の記述については省略しています。)

5.フッターエリアを記述する

フッターエリア部分<footer role="contentinfo" id="str-footer">の範囲では下記のエリアを入れています。

  • ページ上部へ戻るボタン
  • フッターサイトマップ
  • フッターサブナビゲーション

マークアップする前にデザインカンプにid、classを付けて確認してみましょう。

フッターエリア内の各エリアのマークアップをしていきます。

HTMLコード

<footer id="str-footer">
    <!--▼▼ 1.ページ上部へ戻るボタン ▼▼-->
    <div class="footer-in-01">
        <div class="inner">

            <div class="footer-top">
                <a href="#top" class="totop"><span class="text">ページ上部へ戻る</span></a>
            </div>

        </div>
    </div>
    <!--▲▲ 1.ページ上部へ戻るボタン ▲▲-->

    <!--▼▼ 2.フッターサイトマップ ▼▼-->
    <div class="footer-in-02">
        <div class="inner">

            <div class="footer-sitemap-wrap">

                <div class="footer-sitemap">
                    <h3 class="hdg-footer-sitemap">クレジットカード</h3>
                    <ul class="footer-sitemap-links">
                        <li><a href="/learning/moment-card/creditcard/merit/">モーメントカードのメリット</a></li>
                        <li><a href="/learning/moment-card/creditcard/service/">機能・サービス</a></li>
                        <li><a href="/learning/moment-card/creditcard/lineup/">カード一覧</a></li>
                        <li><a href="/learning/moment-card/creditcard/cashing/">キャッシング</a></li>
                        <li><a href="/learning/moment-card/creditcard/revo/">リボ払い</a></li>
                    </ul>
                </div>

                <div class="footer-sitemap">
                    <h3 class="hdg-footer-sitemap">ポイント</h3>
                    <ul class="footer-sitemap-links">
                        <li><a href="/learning/moment-card/point/">モーメントポイントとは?</a></li>
                        <li><a href="/learning/moment-card/point/save/">ポイントをためる</a></li>
                        <li><a href="/learning/moment-card/point/use/">ポイントを使う</a></li>
                    </ul>
                </div>

                <div class="footer-sitemap">
                    <h3 class="hdg-footer-sitemap">カードローン・キャッシング</h3>
                    <ul class="footer-sitemap-links">
                        <li><a href="/learning/moment-card/finance/bank/">銀行</a></li>
                        <li><a href="/learning/moment-card/finance/insurance/">保険</a></li>
                        <li><a href="/learning/moment-card/finance/housing-loan/">住宅ローン</a></li>
                        <li><a href="/learning/moment-card/finance/loan/">各種ローン</a></li>
                        <li><a href="/learning/moment-card/finance/loan-entry/">カードローン申し込み</a></li>
                    </ul>
                </div>

                <div class="footer-sitemap">
                    <h3 class="hdg-footer-sitemap">キャンペーン</h3>
                    <ul class="footer-sitemap-links">
                        <li><a href="/learning/moment-card/campaign/">モーメントカード新規ご入会</a></li>
                        <li><a href="/learning/moment-card/campaign/member/">モーメントカード会員さま向け</a></li>
                    </ul>
                </div>

            </div>

        </div>
    </div>
    <!--▲▲ 2.フッターサイトマップ ▲▲-->

    <!--▼▼ 3.フッターサブナビゲーション ▼▼-->
    <div class="footer-in-03">
        <div class="inner">

            <ul class="footer-utility-links">
                <li><a href="/learning/moment-card/faq/">よくある質問</a></li>
                <li><a href="/learning/moment-card/contact.html">お問い合わせ</a></li>
                <li><a href="/learning/moment-card/security.html">セキュリティポリシー </a></li>
                <li><a href="/learning/moment-card/privacy.html">プライバシーポリシー</a></li>
                <li><a href="/learning/moment-card/browser.html">ご利用環境について</a></li>
                <li><a href="/learning/moment-card/sitemap.html">サイトマップ</a></li>
                <li><a href="/learning/moment-card/company.html">企業情報</a></li>
            </ul>
            <p class="footer-copyright">Copyright 2019 (c) Moment card. All Rights Reserved.</p>

        </div>
    </div>
    <!--▲▲ 3.フッターサブナビゲーション ▲▲-->
</footer>

1.ページ上部へ戻るボタン

<div class="footer-in-01">の範囲では「ページ上部へ戻る」ボタンのコードを記述しています。
「ページ上部へ戻る」ボタンはスクロールするとフェードインで表示されるギミックはJavaScript(jQuery)を使用しています。

2.フッターサイトマップ

<div class="footer-in-02">の範囲ではサイトマップをコードを記述しています。
サイトマップは4カラム(4列)にしていますにしていますので、<div class="footer-utility">を4つ分記述しています。

3.フッターサブナビゲーション

<div class="footer-in-03">の範囲ではサブナビゲーションとコピーライト(著作権保持明記)のコードを記述しています。
「3.ヘッダーエリアを記述する」の「1.ヘッダー上部」のサブナビゲーションと同じマークアップを使用しています。このように似ているデザインには同じマークアップをしていくことで作業効率が上がります。

5.CSSでデザインする

HTMLのマークアップが出来たら、CSSで見た目のデザイン(装飾)していきます。
下記の流れでエリアごとにCSSの記述を解説していきます。

  1. リセットCSSを記述する
  2. ヘッダーエリアのCSSを記述する
  3. コンテンツエリアのCSSを記述する
  4. フッターエリアのCSSを記述する

今回のサンプルでは上記のCSSの記述をstyle.cssファイルにまとめています。

1.リセットCSSを使う

Google Chrome、Microsoft Edge、Internet Explorer、Firefoxなどの各ブラウザごとにオリジナルの仕様としてCSSが設定されています
リセットCSSとはブラウザごとに異なる表示がされてしまうのを防ぐためにブラウザごとの違いを最初にリセットして、制作を効率的に行うためのCSSです。

リセットCSSは複数存在しているので、ネットで探しておすすめのリセットCSS使えば問題ないでしょう。

今回、サンプルで使用したリセットCSSは「Normalize.css」を使用しています。この「Normalize.css」はデフォルトのスタイルはあえて残しつつ、ブラウザごとの違いを修正するという方向で作られています。

CSSコード

@charset "UTF-8";
/* ============================================================================
 * リセットCSS
 * ========================================================================= */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  /* 1 */
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}
/** <省略> **/

2.ヘッダーエリアのCSSを記述する

ヘッダーエリアにCSSは細かく4つのエリアに分けています。(先頭の数字は下記CSSのコメントから抜粋しています。)

  • 1-1.ロゴ周り
  • 1-2.ヘッダー内サブナビゲーション
  • 1-3.検索ボックス
  • 1-4.グローバルナビゲーション
  • 1-5.ドロワーメニュー

ヘッダーエリアに使われているフレックスボックス(display:flex)はヘッダーエリア以外のほとんどのエリア(ヘッダーエリア内のサブナビゲーションやグローバルナビゲーション、コンテンツエリア内であれば、メインビジュアルスライダーやお知らせ切り替えボタンタブなど。)にも使用していますのでフレックスボックス(display:flex)はマスターすることが必須です。

フレックスボックス(display:flex)は横並びレイアウトを実現させるCSSの要素になります。

CSSコード

/** <省略> **/
/* ============================================================================
* 1.ヘッダエリア
* ========================================================================= */
body {
  overflow-x: hidden;
}

/* ----------------------------------------------------------------------------
* 1-1.ロゴ周り
* ------------------------------------------------------------------------- */
/* header要素 */
#str-header {
  background: #ffffff;
  width: 100%;
}

.str-header-top {
  padding: 8px 0 0 0;
}

.str-header-top > .inner {
  -ms-flex-align: end;
  -ms-flex-pack: justify;
  -webkit-box-align: end;
  -webkit-box-pack: justify;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1112px;
  padding: 0 16px;
  position: relative;
}

.header-in-01 {
  margin-right: 24px;
  padding: 0;
}

/* ロゴ自体の調整 */
.header-logo .logo {
  display: block;
  height: auto;
}

/* ----------------------------------------------------------------------------
* 1-2.ヘッダー内サブナビゲーション
* ------------------------------------------------------------------------- */
.header-utility-links {
  font-size: 1.4rem;
  margin-top: 3px;
  text-align: right;
}

.header-utility-links > ul {
  -ms-flex-flow: wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  line-height: 1;
}

.header-utility-links > ul > li:not(:last-child) {
  border-right: 1px solid #666666;
  margin-right: 22px;
  padding-right: 22px;
}

.header-utility-links > ul > li a {
  color: #666666;
  position: relative;
  text-decoration: none;
}

.header-utility-links > ul > li a:visited, .header-utility-links > ul > li a:hover, .header-utility-links > ul > li a:active {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
* 1-3.検索ボックス
* ------------------------------------------------------------------------- */
.header-search {
  margin-top: 22px;
  text-align: right;
}

.header-search > p {
  background: #acacac;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 48px;
}

.header-search input:not([type]),
.header-search [type="text"],
.header-search [type="search"] {
  background: #f3f3f3;
  border: none;
  border-radius: 0;
  outline: 0;
  padding: 8px 8px 8px 16px;
  width: 16em;
}

.header-search input:not([type]):focus,
.header-search [type="text"]:focus,
.header-search [type="search"]:focus {
  background-color: #f3f3f3;
}

.header-search button:not([type]),
.header-search [type="submit"] {
  background: #f3f3f3;
  border: none;
  color: #33419e;
  cursor: pointer;
  font-size: 2.2rem;
  padding: 8px 16px;
}

/* ----------------------------------------------------------------------------
* 1-4.グローバルナビゲーション
* ------------------------------------------------------------------------- */
.str-header-bottom {
  background: #f3f3f3;
  margin-top: 22px;
}

.str-header-bottom::before {
  background: #33419e;
  content: "";
  display: block;
  height: 3px;
}

.str-header-bottom > .inner {
  margin: auto;
  width: 1080px;
}

/* グローバルナビのボタン要素 */
.nav-global .list-nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}

.nav-global .list-nav-links li:hover {
  background: #33419e;
  color: #fff;
}

.nav-global .list-nav-links li:hover .megamenu-area::after {
  border-right: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
}

.nav-global .list-nav-links > li {
  -ms-flex: auto;
  -webkit-box-flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: auto;
}

.nav-global .list-nav-links > li:hover .megamenu {
  max-height: 9999px;
  opacity: 0.9;
  padding: 16px 0;
}

.nav-global .list-nav-links > li a {
  color: inherit;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 18px 8px 17px;
  text-decoration: none;
  width: 100%;
}

.nav-global .list-nav-links > li a .megamenu-area {
  padding-right: 16px;
}

.nav-global .list-nav-links > li a .megamenu-area::after {
  -webkit-transform: translateY(-50%) rotate(135deg);
  border-right: 2px solid #33419e;
  border-top: 2px solid #33419e;
  content: "";
  height: 8px;
  margin-left: 16px;
  margin-top: 9px;
  position: absolute;
  transform: translateY(-50%) rotate(135deg);
  width: 8px;
}

/* メガメニュー要素 */
.megamenu {
  -webkit-transition: all 0.3s ease-in;
  background: #33419e;
  left: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 170px;
  transition: all 0.3s ease-in;
  width: 100%;
  z-index: 999;
}

.megamenu > .inner {
  -ms-flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 1080px;
}

.megamenu > .inner li {
  padding: 0;
  width: calc((100% / 4));
}

3.コンテンツエリアのCSSを記述する

コンテンツエリアにCSSは細かく7つのエリアに分けています。(先頭の数字は下記CSSのコメントから抜粋しています。)

  • 2-1.メインビジュアルスライダー
  • 2-2.コンテンツ幅
  • 2-3.キャンペーン情報一覧
  • 2-4.クレジットカード一覧
  • 2-5.利用シーン別リンク
  • 2-6.注意項目一覧
  • 2-7.お知らせニュース一覧

「2-1.メインビジュアルスライダー」で使われているスライダー機能はjQueryというJaveScriptライブラリ「slick」になります。スライダーに対応するCSSは後述します。

メインビジュアル背景には._mv._mv-02._mv-03._mv-04でそれぞれ付け分けています。

CSSコード

/* ============================================================================
* 2.コンテンツエリア
* ========================================================================= */
/* ----------------------------------------------------------------------------
* 2-1.メインビジュアルスライダー
* ------------------------------------------------------------------------- */
.str-mainvisual {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}

.str-mainvisual > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 400px;
  margin: 0 auto;
  width: 1080px;
}

.str-mainvisual > .inner > .text-block {
  margin: 31px 0 50px 44px;
  width: 482px;
}

.str-mainvisual > .inner > .mv-block {
  margin: 78px 0 0 60px;
}

/* メインビジュアル1枚目の画像 */
._mv {
  background-image: url(/img/index_bg_mv.png);
}

/* メインビジュアル2枚目の画像 */
._mv-02 {
  background-image: url(/img/index_bg_mv_02.png);
}

/* メインビジュアル3枚目の画像 */
._mv-03 {
  background-image: url(/img/index_bg_mv_03.png);
}

/* メインビジュアル4枚目の画像 */
._mv-04 {
  background-image: url(/img/index_bg_mv_04.png);
}

/* ----------------------------------------------------------------------------
* 2-2.コンテンツ幅
* ------------------------------------------------------------------------- */
#str-content {
  padding: 0 16px;
}

.str-mainvisual,
.slide,
.top-campaign,
.top-recommended,
.top-attention {
  margin: 0 -16px 0;
}

/* 各エリア内の幅 */
.str-mainvisual > .inner,
.top-attention > .inner,
.top-news > .inner,
.footer-in-02 > .inner,
.footer-in-03 > .inner {
  margin: auto;
  width: 1080px;
}

/* 各エリア内の幅 */
.top-campaign > .inner,
.top-recommended > .inner,
.top-scene > .inner,
.footer-related > .inner {
  margin: auto;
  width: 1104px;
}

/* ----------------------------------------------------------------------------
* 2-3.キャンペーン情報一覧
* ------------------------------------------------------------------------- */
.top-campaign {
  padding-bottom: 44px;
  padding-top: 22px;
}

.top-campaign .hdg-campaign {
  font-size: 3.2rem;
  text-align: center;
}

.mod-campaign-wrap {
  margin-top: 24px;
  text-align: center;
}

.mod-campaign-wrap .mod-campaign {
  margin-left: 12px;
  margin-right: 12px;
  width: 252px;
}

.mod-campaign-wrap .mod-campaign .image-area img {
  display: block;
  height: auto;
  margin: auto;
  width: 100%;
}

.mod-campaign-wrap .mod-campaign .mod-text {
  margin-top: 16px;
}

.mod-campaign-wrap .mod-campaign a {
  color: #33419e;
  text-align: left;
  text-decoration: none;
}

.mod-campaign-wrap .mod-campaign a:visited, .mod-campaign-wrap .mod-campaign a:hover, .mod-campaign-wrap .mod-campaign a:active {
  text-decoration: underline;
}

.mod-campaign-wrap .mod-campaign img {
  width: 100%;
}

.tab-item, .tab-item02 {
  -webkit-transition: all 0.2s ease;
  background-color: #eeeeee;
  color: #333333;
  cursor: pointer;
  display: inline-block;
  font-size: 1.6rem;
  height: 40px;
  line-height: 40px;
  margin-bottom: 23px;
  text-align: center;
  transition: all 0.2s ease;
  width: 280px;
}

.tab-item:hover, .tab-item02:hover {
  opacity: 0.75;
}

.tab-content {
  clear: both;
  display: none;
  overflow: hidden;
}

input[name="tab-item"],
input[name="tab-item02"] {
  display: none;
}

#new:checked ~ #content01,
#member:checked ~ #content02,
#all:checked ~ #content03,
#release:checked ~ #content04,
#safety:checked ~ #content05 {
  -ms-flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.tabs input:checked + .tab-item,
.tabs input:checked + .tab-item02 {
  background-color: #bfc7fc;
  color: #333333;
}

/* ----------------------------------------------------------------------------
* 2-4.クレジットカード一覧
* ------------------------------------------------------------------------- */
.top-recommended {
  background: #eceeff;
  padding-bottom: 32px;
  padding-top: 32px;
}

.top-recommended .hdg-recommended {
  font-size: 3.2rem;
  text-align: center;
}

.top-recommended .image-area img {
  display: block;
  height: auto;
  margin: auto;
}

.top-recommended .mod-text {
  margin-top: 16px;
  text-align: center;
}

.mod-recommended-wrap {
  -ms-flex-pack: justify;
  -ms-flex-wrap: wrap;
  -webkit-box-pack: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
}

.mod-recommended-wrap .mod-recommended {
  margin-left: 12px;
  margin-right: 12px;
  width: 252px;
}

.mod-recommended-wrap .mod-recommended a {
  color: #33419e;
  text-decoration: none;
}

.mod-recommended-wrap .mod-recommended a:visited, .mod-recommended-wrap .mod-recommended a:hover, .mod-recommended-wrap .mod-recommended a:active {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
* 2-5.利用シーン別リンク
* ------------------------------------------------------------------------- */
.top-scene {
  padding-bottom: 32px;
  padding-top: 42px;
}

.top-scene .image-area img {
  display: block;
  height: auto;
  margin: auto;
  width: 100%;
}

.top-scene .mod-text {
  margin-top: 20px;
  text-align: center;
}

.mod-scene-wrap {
  -ms-flex-pack: justify;
  -ms-flex-wrap: wrap;
  -webkit-box-pack: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mod-scene-wrap .mod-scene {
  margin-left: 12px;
  margin-right: 12px;
  width: 252px;
}

.mod-scene-wrap .mod-scene a {
  color: #33419e;
  font-size: 2.4rem;
  text-decoration: none;
}

.mod-scene-wrap .mod-scene a:visited, .mod-scene-wrap .mod-scene a:hover, .mod-scene-wrap .mod-scene a:active {
  text-decoration: underline;
}

.mod-scene-wrap .mod-scene .scene-list {
  display: table;
  margin-top: 24px;
  width: 100%;
}

.mod-scene-wrap .mod-scene .scene-list > li {
  border-top: 1px dotted #33419e;
  line-height: 2.8;
}

.mod-scene-wrap .mod-scene .scene-list > li:last-child {
  border-bottom: 1px dotted #33419e;
}

.mod-scene-wrap .mod-scene .scene-list > li a {
  color: #33419e;
  display: block;
  font-size: 1.7rem;
  padding-left: 20px;
  position: relative;
  text-decoration: none;
}

.mod-scene-wrap .mod-scene .scene-list > li a:hover, .mod-scene-wrap .mod-scene .scene-list > li a:focus {
  background-color: #f3f3f3;
  color: #33419e;
}

.mod-scene-wrap .mod-scene .scene-list > li a::before {
  -webkit-transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid #33419e;
  border-top: 2px solid #33419e;
  content: "";
  display: block;
  height: 8px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
}

/* ----------------------------------------------------------------------------
* 2-6.注意項目一覧
* ------------------------------------------------------------------------- */
.top-attention {
  background-color: #f3f3f3;
  padding-bottom: 40px;
  padding-top: 40px;
}

.top-attention .attention-list {
  display: table;
  width: 100%;
}

.top-attention .attention-list > li {
  background: url(/common/img/icon_attention.png) left 0px top 50% no-repeat;
  background-size: 18px auto;
  line-height: 2;
  padding-left: 32px;
}

.top-attention .attention-list a {
  color: #d72060;
  text-decoration: none;
  text-decoration: underline;
}

.top-attention .attention-list a:hover, .top-attention .attention-list a:focus {
  color: #d72060;
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
* 2-7.お知らせニュース一覧
* ------------------------------------------------------------------------- */
.top-news {
  padding-bottom: 64px;
  padding-top: 40px;
}

.top-news .hdg-news {
  font-size: 3.2rem;
  text-align: center;
}

.mod-news-wrap {
  margin-top: 24px;
  text-align: center;
}

.mod-news-wrap .report-list {
  display: table;
  text-align: left;
  width: 100%;
}

.mod-news-wrap .report-list > li {
  border-top: 1px dotted #33419e;
  line-height: 2.8;
}

.mod-news-wrap .report-list > li:last-child {
  border-bottom: 1px dotted #33419e;
}

.mod-news-wrap .report-list a {
  color: #33419e;
  display: block;
  font-size: 1.7rem;
  padding-left: 20px;
  position: relative;
  text-decoration: none;
}

.mod-news-wrap .report-list a:hover, .mod-news-wrap .report-list a:focus {
  background-color: #f3f3f3;
  color: #33419e;
}

.mod-news-wrap .report-list a::before {
  -webkit-transform: translateY(-50%) rotate(45deg);
  border-right: 2px solid #33419e;
  border-top: 2px solid #33419e;
  content: "";
  display: block;
  height: 8px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
}

.info-list {
  display: table;
  margin-top: 16px;
  width: 100%;
}

.info-list > li {
  border-top: 1px dotted #33419e;
}

.info-list > li:last-child {
  border-bottom: 1px dotted #33419e;
}

.info-list .info-date {
  display: table-cell;
  padding: 15px 0 11px 30px;
  vertical-align: top;
  white-space: nowrap;
}

.info-list .info-detail {
  display: table-cell;
  padding: 15px 16px 11px 24px;
  vertical-align: top;
}

.info-list .info-detail a {
  color: #33419e;
  text-decoration: none;
}

.info-list .info-detail a:hover, .info-list .info-detail a:focus {
  color: #33419e;
  text-decoration: underline;
}

4.フッターエリアのCSSを記述する

フッターエリアにCSSは細かく3つのエリアに分けています。(先頭の数字は下記CSSのコメントから抜粋しています。)

  • 3-1.ページ上部へ戻るボタン
  • 3-2.フッターサイトマップ
  • 3-3.フッターサブナビゲーション

ページ上部へ戻るボタンのCSSは.totopのクラスにCSSを書いています。

CSSコード

/* ============================================================================
* 3.フッターエリア
* ========================================================================= */
/* ----------------------------------------------------------------------------
* 3-1.ページ上部へ戻るボタン
* ------------------------------------------------------------------------- */
.footer-top .totop {
  -webkit-transition: 0.5s;
  background: #33419e;
  border-radius: 50%;
  bottom: 16px;
  bottom: 130px;
  color: transparent;
  height: 56px;
  position: fixed;
  right: 16px;
  text-align: center;
  transition: 0.5s;
  width: 56px;
  z-index: 100;
}

.footer-top .totop::before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  border-right: 4px solid #ffffff;
  border-top: 4px solid #ffffff;
  bottom: 60px;
  content: "";
  display: block;
  height: 14px;
  left: 50%;
  position: absolute;
  top: 55%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 14px;
}

.footer-top .totop:focus,
.footer-top .totop:hover {
  opacity: 0.4;
}

/* ----------------------------------------------------------------------------
* 3-2.フッターサイトマップ
* ------------------------------------------------------------------------- */
.footer-in-02 {
  background: #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  border-top: 1px solid #f3f3f3;
  padding: 40px 16px;
}

@media screen and (max-width: 30em) {
  .footer-in-02 {
    display: none;
  }
}

.footer-in-02 .footer-sitemap-wrap {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.footer-in-02 .footer-sitemap {
  width: 24%;
}

.footer-in-02 .footer-sitemap dl {
  margin-top: 16px;
}

.footer-in-02 .footer-sitemap dl dd {
  color: #666666;
  font-size: 1.7rem;
  line-height: 1.846153;
  margin-top: 8px;
}

.footer-in-02 .footer-sitemap .hdg-footer-sitemap {
  font-size: 1.7rem;
  font-weight: bold;
}

.footer-sitemap-links {
  margin-top: 16px;
}

.footer-sitemap-links > li {
  margin: 8px 0 0 0;
}

.footer-sitemap-links > li a {
  color: #333333;
  position: relative;
  text-decoration: none;
}

.footer-sitemap-links > li a:visited,
.footer-sitemap-links > li a:hover,
.footer-sitemap-links > li a:active {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
* 3-3.フッターサブナビゲーション
* ------------------------------------------------------------------------- */
.footer-in-03 {
  background: #20277d;
  color: #f3f3f3;
  font-size: 1.6rem;
  padding: 26px 16px 40px;
  text-align: center;
}

.footer-in-03 .footer-utility-links {
  -ms-flex-flow: wrap;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

@media screen and (max-width: 30em) {
  .footer-in-03 .footer-utility-links {
    display: block;
    text-align: left;
  }
}

.footer-in-03 .footer-utility-links > li:not(:last-child) {
  border-right: 1px solid #f3f3f3;
  margin-right: 12px;
  padding-right: 12px;
}

@media screen and (max-width: 30em) {
  .footer-in-03 .footer-utility-links > li:not(:last-child) {
    border-right: none;
  }
}

@media screen and (max-width: 30em) {
  .footer-in-03 .footer-utility-links > li {
    margin: 8px 0 8px 16px;
    padding: 0;
  }
}

.footer-in-03 .footer-utility-links > li a {
  color: #f3f3f3;
  position: relative;
  text-decoration: none;
}

.footer-in-03 .footer-utility-links > li a:visited,
.footer-in-03 .footer-utility-links > li a:hover,
.footer-in-03 .footer-utility-links > li a:active {
  text-decoration: underline;
}

@media screen and (max-width: 30em) {
  .footer-in-03 .footer-utility-links > li a::before {
    -webkit-transform: translateY(-50%) rotate(45deg);
    border-right: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    content: "";
    display: block;
    height: 8px;
    left: -16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
  }
}

.footer-copyright {
  margin-top: 16px;
  text-align: center;
}

5.その他(リンクボタンとスライダープラグイン「slick」)

リンクボタンはトップビジュアルのボタンを.mod-btn-01.mod-btn-02で管理しています。
スライダープラグイン「slick」のオフィシャルサイトで持ってきたCSSを改修して使用しています。

CSSコード

/* ============================================================================
* 4.ボタンモジュール
* ========================================================================= */
.mod-btn-01 {
  -webkit-backface-visibility: hidden;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.63);
  -webkit-transition: all 0.3s ease;
  backface-visibility: hidden;
  background: #20277d;
  border: 1px solid #20277d;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.63);
  color: #ffffff;
  display: inline-block;
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin: 0 auto;
  padding: 20px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  width: 375px;
}

@media screen and (max-width: 30em) {
  .mod-btn-01 {
    font-size: 1.6rem;
    width: 100%;
  }
}

.mod-btn-01:visited,
.mod-btn-01:hover,
.mod-btn-01:active {
  opacity: 0.8;
}

.mod-btn-wrap-02 {
  margin-top: 40px;
  text-align: center;
}

@media screen and (max-width: 30em) {
  .mod-btn-wrap-02 {
    margin-top: 24px;
  }
}

.mod-btn-02 {
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.3s ease;
  backface-visibility: hidden;
  background-color: #ffffff;
  border: 1px solid #33419e;
  border-radius: 8px;
  color: #33419e;
  display: inline-block;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 auto;
  padding: 16px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  width: 240px;
}

.mod-btn-02:visited,
.mod-btn-02:hover,
.mod-btn-02:active {
  opacity: 0.5;
}

/* ----------------------------------------------------------------------------
* 【スライダープラグイン】slick
* ------------------------------------------------------------------------- */
.slick-slider {
  -moz-user-select: none;
  -ms-touch-action: pan-y;
  -ms-user-select: none;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  box-sizing: border-box;
  display: block;
  position: relative;
  touch-action: pan-y;
  user-select: none;
}

.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  bottom: -33px;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.slick-dots li {
  cursor: pointer;
  display: inline-block;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  position: relative;
  width: 20px;
}

.slick-dots li button {
  background: transparent;
  border: 0;
  color: transparent;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 20px;
  line-height: 0;
  outline: none;
  padding: 5px;
  width: 20px;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  color: #d72060;
  content: "•";
  font-family: "slick";
  font-size: 32px;
  height: 20px;
  left: 0;
  line-height: 20px;
  opacity: 0.25;
  position: absolute;
  text-align: center;
  top: 0;
  width: 20px;
}

.slick-dots li.slick-active button:before {
  color: #d72060;
  opacity: 0.75;
}

.slick-list {
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  display: block;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0;
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  border: 1px solid transparent;
  display: block;
  height: auto;
}

.slick-arrow.slick-hidden {
  display: none;
}

6.JavaScriptで動きをつける

このサイトではJavaScriptによる機能を使っています。
簡単ですが下記の流れで示してみたいと思います。

  1. HTMLファイルの記述方法
  2. jsファイルの記述方法

順番通りに説明をしていきます。

1.HTMLファイルの記述方法

HTMLコード

    <!-- JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="/learning/moment-card/common/js/slick.min.js"></script>
    <script src="/learning/moment-card/common/js/script.js"></script>
</body>

まずは、HTMLにJavaScriptのファイルを読み込みをします。
JavaScriptのファイルを読み込みをする際にタグの最後に入れており、これは、サイトの表示を早くさせるための方法として行っています。

なぜならば、ブラウザはHTMLを上から順に読んでいきます。
JavaScriptファイルが<head>タグ内にあると、そこのJavaScriptファイルを読み終わってからサイトが表示されることになりますが、<body>タグの最後に入れておくとサイトが表示されてからJavaScriptファイルが読み込むことになります。

2.jsファイルの記述方法

Javascriptコード

$(function () {
	//上部トップページに戻る:600px分スクロールしたら「トップページに戻る」ボタンが表示される。
	var pageTop = $('.totop');
	pageTop.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 600) {
			pageTop.fadeIn();
		} else {
			pageTop.fadeOut();
		}
	});

	//トップページに戻る時の速度は5秒で始めと終わりは緩やかに動く。
	pageTop.click(function () {
		$('body, html').animate({ scrollTop: 0 }, 500, 'swing');
		return false;
	});

	//JaveScriptライブラリ「slick」のオプション設定。(あらかじめ決まっている値を選択)
	$('.slider').slick({
		infinite: true,
		arrows: false,
		autoplay: true,
		dots: true,
		fade: true,
		cssEase: 'linear',
	});

	//ドロワーメニュー内に使われているアコーディオンメニューの表示・非表示の動きをする
	$('.js-menu').each(function () {
		$(this).on('click', function () {
			$(this).toggleClass('on');
			$("+.submenu", this).slideToggle()
			return false;
		});
	});
});

このサイトでのJaveScripts(JQuery)の機能は下記の3点です。

  • 上部トップページに戻るの動き
  • slickのオプション
  • アコーディオンメニューの表示・非表示

近年のWebサイトは表現の幅が広がり細かいギミックからダイナミックな動きまで実装していく場合もあります。
今回はシンプルな機能でしたので、コードの記述を数行で収まりましたが、複雑な機能には高いJaveScripts(JQuery)のスキルが必要とされます

Webデザイナーはこのサンプルサイト程度の簡単な動きは出来ると良いと思います。

この記事のまとめ

クライントからデザインカンプの確定が取れた後のコーディングしていく過程をまとめてました。

WebサイトのHTML/CSSコーディングの手順を解説のおさらい
文章構造を確認する
まずは、HTMLをブロックごとに区別します。
パーツ画像を作成する
切り出す画像を把握した後にPhotoshopで画像を切り出します。
制作フォルダを作成する
制作するにあたりHTML、CSS、JavaScript、画像の各データを入れるフォルダをそれぞれ作成します。
HTMLでマークアップする
マークアップとは、テキストや画像などをページ内でHTML言語で意味付けしていく作業のことを言います。
CSSでデザインする
HTMLでマークアップされたものをCSSにて装飾(デザイン)します。
JavaScriptで動きをつける
JavaScriptにてサイトのモーションなどを動きを与えていきます。

ユウジの体感コラム

Webデザイン初学者にとってまず何が難しいかというと、HTMLをどのようにして書いていくかではないでしょうか。

著者もHTMLの書き方を覚える際に紙にヘッダーエリア、コンテンツエリア、フッターエリアのエリアごとに分ける。更にヘッダーエリアの中にロゴ、検索、グローバルナビゲーションといったように細かいエリアに分けていましたね。
これって結構、紙で一旦アウトプットしておくと頭の整理と理解が出来て、実際のHTMLのマークアップする際にとても簡単に書くことができます。

HTMLの勉強で一番効果的な方法だったので、声を大にして重要ですよと言いたいですよね。
騙されたと思って(騙すつもりはありませんが、、)やってみていただきたいですね。

Webサイト制作実践ガイド

「Webサイト制作実践」カテゴリー内ページではお好きなページから読んでも問題ありませんが、ステップ順に読んでいただけるとより理解できるようになります。