プログラミングの勉強

模写コーディングのすすめ

この記事は、プログラミング初心者がHTML/CSS/JavaScript/PHP/WordPressを勉強して、実際に案件を受注するまでの軌跡・過程を情報発信していきます。

0.模写コーディングの効用

模写コーディングを行うことを通じて、実際に色々なスキルが身についていきますが、
模写コーディングの効用を一つだけ挙げて下さいと言われたら、下記の一点につきるかと思います。

コーディング案件を実際に受注して、
ある程度対応できる実践的な力が培われる。

書籍学習やProgate, ドットインストールのオンライン教材やチュートリアルなどの受け身学習、インプットをいくら何度も繰り返したところで、受注した案件を完成することができる実践的なスキルは身につきません。

しかし模写コーディングを行うことによって、LPサイト、コーポレートサイトのコーディング案件を実際に受注して、完成物として納品するのに必要なスキルが模写コーディングを取り組むことである程度身につきます。

一番最初の模写コーディングはけっこう大変ですが、自分の頭で考え、自分の手を動かすことによって得られるものが沢山あります。以下実際に模写コーディングをしてみて、感じたことを簡単に思いつく範囲で何点か挙げてみました。

・全体を俯瞰してサイトの大枠の構造を組むことができるようになる。

・模写コーディングを取り組むことで実際に自分が分からない箇所、
詰まってしまう箇所が明確になる。

模写コーディングを行うことで「自分が分からない箇所、詰まってしまう箇所が明確になる」というのはとても大切です。分からない場所が明確になってしまえば、それを調べるか或いは詳しい人に聞くかして、その部分を解決することができるようになるからです。

もし自分でも自分が分からない場所が分からなければ、自分で調べることも出来ませんし、
誰か詳しい人に質問もする事も出来ません。それなので、分からない、詰まってしまう事が駄目な事なのではなく、まずは分からない箇所を明確にしましょう。

そして最初は書籍、インターネットなどを使って解決方法を自分なりに調べて、実際にコードをいじってみる。

もしそれでも分からなければ、コーディングやプログラミングに詳しい人に「分からない場所」「参考にしたサイト」「実際にどのコードをいじってみたのか」などを伝えて、質問をしてみましょう。

知人や友人に詳しい人がコーディングやプログラミングに詳しい人がいない場合は、
最近では便利なサービスがありまして、下記のMENTAというサービスが価格もリーズナブルでメンターの方の対応も基本的に丁寧で親切なので、とてもオススメです!

・ 分からなくて、詰まってしまった部分も自分で検索し、
試行錯誤しながら解決・実装することができるようになる。

試行錯誤しながらも、独力で解決しようとするプロセスがとても大切だと思います。
エラー、問題が何時間も取り組んでも解決できない時はとても苦しいですし、悶々とするのですが、この試行錯誤のプロセスを経ることによって、「検索力」「問題解決能力」「自走できる力」が確実に養われます。

・自分である程度は実際のサイトをコーディングできるという自信

これが模写コーディングを通して得ることが出来る一番の収穫かもしれません。
ある程度実際のサイトを自分で作ることが出来るという経験と自信があれば、
コーディング案件に積極的に営業をしていくことができます。

そして実際の案件を受注してお金を頂きながら、経験、スキルを積み上げていくことが出来るという一石二鳥の好循環の流れに入ることが可能です。

以上のように模写コーディングは実際のコーディング案件を受注して納品する上で必要な最低限のスキルが培われていくことはもちろん、「検索力」「問題解決能力」「自走できる力」そして「自信」を得ることが出来ますので、模写コーディングは非常におすすめです!

実際にわたしも幾つかのサイトを模写コーディングをしてから、
コーポレートサイトのコーディング案件を最初に受注して、分からない場所は自分で調べながら納品することが出来ました!

それでは早速実際に模写コーディングの手順をみていきましょう。
下記模写コーディングの簡単な流れになります。

1. 模写コーディング手順

①模写サイトを選ぶ
②大枠のレイアウトを紙に書き出す。
③コーディング
④見直し・答え合わせ

① 模写サイトを選ぶ

2つの条件で選ぶとよいかと思います。

・自分が好きで、興味があるサイト

自分がとても好きで、興味があるサイトは自分の中で作りたいという意欲が湧いてきますし、モティベーションを持続させやすいです。

・現在自分が持っているスキルの難易度にあわせる。

ランディングサイト、コーポレートサイトにもピンからキリまでの難易度があるので、
自分にとって簡単すぎず、難しすぎないサイトを選びましょう。

簡単すぎず、難しすぎないレベルとは、
これまで作ったことがない要素が含まれているが、
自分の頭で考えつつ、調べたり検索したりすれば
試行錯誤しながらも実装できるレベル感。

今回わたしはローカライゼーションとHTMLファイルのWordPress化もしたいと思っているので、自分が好きで興味の持てるWordPressで制作された下記のサイトを選びました。

https://kfa.org/

※こちら掲載許可を頂いております。

② 大枠のレイアウトを紙に書き出す。

簡単なモックアップツールを使ってもいいですが、
個人的には紙と鉛筆・ボールペーンでレイアウトを書き出していくのがオススメです。

第三者に見せる必要のあるデザインのモックアップではないですし、コーディングを行う前に全体を俯瞰してサイトの大枠の構造をどのようにレイアウトしていくのか自分の頭の中で整理するために手軽に書き出すことができればいいので。

ちなみに下記がわたしがレイアウトをざっくと書き出したものになります。
いま自分で見ても、ちゃんと見ないと解読できない感じですが(笑)

先程書いたように他人に見せるものではないので、サイトの構造の大枠レイアウトをすることで、自分の頭の中が整理できれば良しです。

「ヘッダー」「ナビゲーションメニュー」「メインビジュアル」「2カラムセクション」「4カラムセクション」「フッター」などある程度このレイアウトの時点で決めてしまうと後が楽です。

次にいよいよコーディングをしていきます。
先程紙に書き出したものを見ながら、htmlのマークアップをしていきます。

大まかな手順を説明しているブログ記事はインターネット上に見つかるのですが、
実際のコードを載せながら、模写コーティングを説明している記事がわたしが探した限りあまりないような感じだったので、備忘録も兼ねて実際のコードと共に説明していこうと思います。

③コーディング

今回わたしはBootstrap4のフレームワークを使って、コーディングをしていこうと考えているのでまずその下準備からしていきます。

2. Bootstarp 4 boilerplate(ベーステンプレート)をダウンロードしてスターターテンプレートのセットアップ
https://startbootstrap.com/previews/bare/

この辺りはBootstrap4のフレームワークに関することなので、
あまり詳しく触れませんが、下記参考サイトとして挙げておきます。

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ

https://coliss.com/articles/build-websites/operation/work/bootstrap-4-new-templates-and-components.html

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">

    <title>Krishnamurti Foundation America</title>
</head>
<html lang="en">

は英語のサイトなので、そしてviewportの設定、

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

bootstrap4、fontawesomeの読込を行い、
カスタムcssの読込など最低限の設定を内で行う。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">

そして次に

</body>

の直前にjQuery、JavaScriptなどの読込設定を行っていく。

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>

    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>

</html>

次にサイト全体を俯瞰してサイトの基本的な構造をマークアップしていきます。
headerがあって、headerの中にnavigation-bar、左側にブランド・タイトルロゴのnavbar-brandがあって、navigation-menuはliタグを使って横揃えで実現できそうだな等当たりをつけていきます。

その下にカルーセルのスライド式のメインビジュアルがあって、
ビデオ動画のセクションは2カラムで左側カラムと右側カラムが7:3くらいになって、
次のセクションはbootstrap4だとcol-3を4つ置いてあげれば出来るでしょう。

まずは大枠のheader、section, footerタグを使って、
合計6個のブロック要素を用意しました。

    <header>
    </header>

    <div class="carousel slide main-visual" data-ride="carousel">
    </div>


    <section class="video-feature">
    </section>

    <section class="feature-items">
    </section>

    <section class="main-contents">
    </section>

    <footer>
    </footer>

6個のブロック要素をつくった後は、まずheaderの中をマークアップしていきます。
ナビゲショーンメニューの部分からマークアップ


上記のようなサイトタイトルとナビゲショーンメニューのパターンのウェブサイトは
とても多いと思うのですが、スマホ表示の時に下記のように三本線のトグル
になるやつですね。


この場合Bootstrap4で用意されている下記のnavigation-barのコンポーネントを
利用すると非常に時間を短縮してマークアップすることができます。

    <header>
        <!-- Navigation -->
        <nav id="top" class="navbar navbar-expand-xl navbar-light bg-light fixed-top ">
            <a class="navbar-brand" href="#"><img src="./img/logo.png" alt="kfa logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">THE TEACHINGS
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">PROGRAMS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">VISIT US</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">WHO WE ARE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">STORE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">DONATE</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

詳しいBootstrap4のナビゲーションバー(Navbar)に関しての参考サイトは下記
https://cccabinet.jpn.org/bootstrap4/components/navbar

ナビゲーションメニューの各nav-itemの右にある縦線はborder-rightにて実装。
最後のnav-itemは縦線がないので、li.nav-item:last-child { border-right: 0px; }
を設定。

li.nav-item {
  font-family: "open sans", "HelveticaNeue", "Helvetica Neue", "Helvetica-Neue",
    Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 95px;
  letter-spacing: 1px;
  padding: 0 15px 0 20px;
  border-right: 1px solid #e3e3e3;
}

次にカルーセル メインビジュアルのスライダーの実装ですが、
このコンポーネントもBootstrap4にあるので、そこから実装していきます。

またサイトで使用されている画像を取得しましょう。
Google Chrome拡張機能である「Image Downloader」を使うと簡単です。


「select all」にチェックを入れると、サイトで使われている画像をワンクリックで
全てダウンロードすることができます。

<nav id="top" class="navbar navbar-expand-xl navbar-light bg-light fixed-top">

直前の要素でfixed-topを使って、固定ナビゲーションメニューにしているので
その次の要素であるmain-visualに下記を設定して、
ナビゲーションバー分の高さ92pxをmargin-topを使って余白をとる。
※この部分意外と嵌りやすい部分なので、注意。

.main-visual {
  margin-top: 92px;
}

margin-topの設定をcssで行わないと、下記のようにメインビジュアルがナビゲーションメニューの高さ92px分上に食い込んでしまっているように表示されてしまいます。

※この部分意外と嵌りやすい部分なので、注意。


下記がカルーセル・スライダーの参考サイト
https://startbootstrap.com/snippets/full-slider/

こちらにあるbootstarp 4のfull-slider templateを使い、
カスタマイズしていく。そのコードは以下になります。

    <div id="carouselExampleIndicators" class="carousel slide main-visual" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active">
                <picture>
                    <source srcset="img/carousel-slider_01.jpg" media="(min-width: 769px)">
                    <img srcset="img/carousel-slider_sm_03.jpg" alt="responsive image" class="d-block img-fluid">
                </picture>
            </div>

            <!-- Slide Two - Set the background image for this slide in the line below -->
            <div class="carousel-item">
                <picture>
                    <source srcset="img/carousel-slider_02.jpg" media="(min-width: 769px)">
                    <img srcset="img/carousel-slider_sm_03.jpg" alt="responsive image" class="d-block img-fluid">
                </picture>
            </div>

            <div class="carousel-item">
                <picture>
                    <source srcset="img/carousel-slider_03.jpg" media="(min-width: 769px)">
                    <img srcset="img/carousel-slider_sm_03.jpg" alt="responsive image" class="d-block img-fluid">
                </picture>
            </div>

        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
   </header>

769pxまでの時に表示されるスライダー画像と、769px以下の時に表示されるスライダー画像を違うものに表示させたいので、以下のサイト(英語にはなりますが、良記事。)を参考にしながら、下記のコードを使いました。

How to Create a Full Width Bootstrap 4 Responsive Carousel
https://bootstrapcreative.com/create-full-width-bootstrap-4-responsive-carousel/

Full Width Carousel with Responsive Images
https://bootstrapcreative.com/pattern/full-width-carousel-responsive-images/

<picture>
 <source srcset="img/carousel-slider_03.jpg" media="(min-width: 769px)">
  <img srcset="img/carousel-slider_sm_03.jpg" alt="responsive image" class="d-block img-fluid">
</picture>

そしてこのままだと、下記のcarousel-indicators がライン、線状なのでCSSの設定で
これを丸の状態にしていきます。

下記参考にしたサイト

Bootstrapで画像スライダーを簡単に作る
https://taroken.org/bootstrap-slider-carousel/http://taroken.mixh.jp/demo/bootstrap-slider/

デモ
http://taroken.mixh.jp/demo/bootstrap-slider/


下のcssの設定をほどこして、見栄えを整えます。

.carousel-indicators {
  bottom: -4px !important;
}

.carousel-indicators li {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 2px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #601c18;
  border-radius: 50%;
}

.carousel-indicators .active {
  background-color: #fff;
  opacity: 0.8;
}

次のセクションのvideo-featureに移っていきます。

    <section class="video-feature">
        <div class="d-flex flex-wrap wrapper">
            <div class="col-md-8 krishnamurti_video">
                <div class="iframe-content">
                    <iframe src="https://www.youtube.com/embed/xwQzyAfXpgw" frameborder="0"></iframe>
                </div>
            </div>
            <div class="col-md-4 krishnamurti_quote">
                <p class="quote">“If you have died to one of your pleasures, the smallest or the greatest,
                    naturally, without any enforcement or argument, then you will know what it means to die. To die
                    is to have a mind that is completely empty of itself, empty of its daily longing, pleasure; and
                    agonies.”</p>
                <p class="quote_frm">— J. Krishnamurti, Freedom from the Known, p. 77
                </p>
            </div>
        </div>
    </section>

これが最適なコードなのかどうか分かりませんが、上記のようにマークアップしてみました。(これはこの記事に表示されているコード全部に言えることです。)
ただ大きな表示崩れなどはありません。

このiframeタグが意外と嵌りやすい部分です。
注意点が記されている参考サイトを以下に載せておきます。

iframe要素のレスポンシブWebデザイン対応
https://www.tam-tam.co.jp/tipsnote/html_css/post5074.html

[CSS]iframe 要素をレスポンシブ対応させる方法
https://www.webantena.net/css/iframe-responsive-web-design/

上記記事を参考にしながら、下記のようにcssを設定してみました。
おそらくもっとスマートなマークアップの仕方があるかも知れません。

これはこの記事に表示させた私のコードすべて言えることなのですが、
コーディング、マークアップのご経験の豊富な奇特な方がいらっしゃって、
こんな感じのコーディングの方がいいのではと万が一ご指摘、アドバイスなど
頂けますと大変有難く思います!

section.video-feature {
  margin-top: 54px;
  margin-bottom: -110px;
}

/* Krishnamurti YouTube movie  */

.iframe-content {
  position: relative;
  width: 100%;
  height: 0;
  padding: 75% 0 0 0;
}

.iframe-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%;
}

.krishnamurti_video {
  height: 100%;
  padding: 0 !important;
}

ではその下のセクションのfeature-itemsを次にコーディングしていきます。

    <section class="feature-items">
        <div class="d-flex flex-wrap wrapper">
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-globe-africa my-gray icon-size"></i>
                </div>
                <div>
                    <h3>FOUNDATION</h3>
                    <P>Krishnamurti’s lifetime body of work spans more than 60 years. The mission of the KFA is to
                        preserve and disseminate these teachings. <a href="#">More...</a></P>
                </div>

            </div>
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-home my-gray icon-size"></i>
                </div>
                <div>
                    <h3>RETREAT</h3>
                    <P>An oasis for the mind amidst 11 acres of nature, where one may retreat, inquire, and
                        establish a new relationship with life. <a href="#">More...</a></P>
                </div>

            </div>
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-book my-gray icon-size"></i>
                </div>
                <div>
                    <h3>CENTER</h3>
                    <P>The Center is dedicated to the study of the teachings of Krishnamurti. It has an extensive
                        library as well as spaces for study and dialogue. <a href="#">More...</a></P>
                </div>

            </div>
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-graduation-cap my-gray icon-size"></i>
                </div>
                <div>
                    <h3>SCHOOL</h3>
                    <P>The Oak Grove School is a pre-K to Grade 12 school in Ojai, founded in 1975 by Krishnamurti
                        and inspired by his teachings. <a href="#">More...</a></P>
                </div>

            </div>
        </div>
    </section>

PC表示時に4カラム、
ipadなどのタブレット表示時に2カラムが、そしてスマホ表示では1カラムというように表示させてたいので、Bootstrap4で用意されているcol-lg-3col-md-6 をまず使います。
これでPC表示時に4カラム、タブレット表示時は2カラム×2、スマホ表示時に1カラムに切り替わってくれます。

今回はfontawesomeを使ったアイコンと「見出しテキスト」と「普通のテキスト」を横に並べて表示させたいので、横並びさせたい子要素である2つの<div> の親要素である<div class=”col-lg-3 col-md-6 feature-item”>にこれもBootstrap4で用意されている
d-flex というクラス名を右記のように<div class=”col-lg-3 col-md-6 d-flex feature-item”> 追加して、2つの子要素を横並びにしてあげます。

Bootstrap4のブレークポイントについては下記を参考にしてください。

こうすれば理解できるBootstrap 4のレスポンシブWebデザインとそのCSS
https://qiita.com/tonkotsuboy_com/items/7c01460b59c3ca5ee047

Bootstrap4で用意されているFlexbox系のクラス名については
下記が詳しいので、参考にしてください。

Bootstrap4でFlexboxを使いこなすためのクラス名一覧
https://cotodama.co/bootstrap4_flexbox/

Fontawesomeの使い方は下記を参考

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome

    <section class="feature-items">
        <div class="d-flex flex-wrap wrapper">
            <div class="col-lg-3 col-md-6 d-flex feature-item">
                <div>
                    <i class="fas fa-globe-africa my-gray icon-size"></i>
                </div>
                <div>
                    <h3>FOUNDATION</h3>
                    <P>Krishnamurti’s lifetime body of work spans more than 60 years. The mission of the KFA is to
                        preserve and disseminate these teachings. <a href="#">More...</a></P>
                </div>

            </div>

上記のように感じで表示されるので、これを同じ要領であと3回繰り返します。
実際のコードは下記のようになるかと思います。

    <section class="feature-items">
        <div class="container feature-wrapper">
          <div class="d-flex flex-wrap wrapper">
                <div class="col-lg-3 col-md-6 d-flex feature-item">
                    <div>
                        <i class="fas fa-globe-africa my-gray icon-size"></i>
                    </div>
                    <div>
                        <h3>FOUNDATION</h3>
                        <P>Krishnamurti’s lifetime body of work spans more than 60 years. The mission of the KFA is to
                            preserve and disseminate these teachings. <a href="#">More...</a></P>
                    </div>

                </div>
                <div class="col-lg-3 col-md-6 d-flex feature-item">
                    <div>
                        <i class="fas fa-home my-gray icon-size"></i>
                    </div>
                    <div>
                        <h3>RETREAT</h3>
                        <P>An oasis for the mind amidst 11 acres of nature, where one may retreat, inquire, and
                            establish a new relationship with life. <a href="#">More...</a></P>
                    </div>

                </div>
                <div class="col-lg-3 col-md-6 d-flex feature-item">
                    <div>
                        <i class="fas fa-book my-gray icon-size"></i>
                    </div>
                    <div>
                        <h3>CENTER</h3>
                        <P>The Center is dedicated to the study of the teachings of Krishnamurti. It has an extensive
                            library as well as spaces for study and dialogue. <a href="#">More...</a></P>
                    </div>

                </div>
                <div class="col-lg-3 col-md-6 d-flex feature-item">
                    <div>
                        <i class="fas fa-graduation-cap my-gray icon-size"></i>
                    </div>
                    <div>
                        <h3>SCHOOL</h3>
                        <P>The Oak Grove School is a pre-K to Grade 12 school in Ojai, founded in 1975 by Krishnamurti
                            and inspired by his teachings. <a href="#">More...</a></P>
                    </div>

                </div>
            </div>
        </div>

    </section>

次のセクションに移りましょう。
次のセクションはカラムが2つあります。
そしてその2つのカラム、左のカラムは3カラム、右のカラムは1カラム
という入れ子状(ネスト)のグリット構造になっています。
それなので、まず2つのカラムからマークアップしていきましょう。

Bootstrap4の入れ子状(ネスト)のレイアウトに関しては下記URLリンクを
参考に。

【Bootstrap4】グリッドレイアウト基本 ~入れ子(ネスト)~
https://niwaka-web.com/bs4_grid/

こちらも分かりやすいです。
Bootstrapで遊ぶ4(グリッドシステムのネスト)
https://shachicode.hatenablog.com/entry/2018/06/30/161353

<section class="main-contents">
   <div class="wrapper">
     <div class="d-flex">
        <div class="col-md-9 col-sm-12 left-col">左カラム</div>
    <div class="col-md-3 right-col">右カラム</div>
     </div>
    </div>
</section>

上記のようにマークアップしました。
基本的には「左カラム」「右カラム」をつくり、
「左カラム」はブラウザが768px以下になったら、1カラムに。
「右カラム」はブラウザが768px以下になったら、非表示になるように設定します。

「右カラム」の非表示はメディアクエリーを使って、下記のようにCSSで設定してあげます。PC表示時に設定していた「左カラム」のボーダーも非表示になるように設定します。

@media screen and (max-width: 768px) {
  .right-col {
    display: none;
  }

  .left-col {
    border: none;
  }
}

次に左カラムの中に移っていきましょう。

次の部分の構造はPC表示は3カラム


ipadのようなタブレット表示は
上段1カラム
下段2カラム

そしてスマホ表示は1カラム

なのでBootstrap4だと、
col-md-4(PC表示部分のカラム設定)→ 3カラム
col-sm-6(タブレット表示時のカラム設定) → 2カラム

タブレット表示 上段 1カラムの部分が、
col-md-4 (PC表示部分のカラム設定)→ 3カラム
col-sm-12 (タブレット表示時のカラム設定) → 1カラム

実際のコードは下記のようにマークアップしました。

<section class="main-contents">
    <div class="wrapper">
        <div class="d-flex">
            <div class="col-md-9 col-sm-12 left-col">
                <h2 class="feature-title">Program Schedule</h2>
                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <div><img class="responsive" src="img/program_01.jpg" alt="Saturday Dialogue"></div>
                        <p class="cat">Category: <a href="#">Programs</a></p>
                        <h3 class="program-title">Saturday Dialogue</h3>
                        <p class="date">1st, 2nd & 3rd Saturday</p>
                        <p class="desc">Doors open at 3:45. Dialogue begins promptly at 4:00 p.m. and ends at 6:00
                            p.m.
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/program_02.jpg" alt="Saturday Dialogue"></div>
                        <p class="cat">Category: <a href="#">Programs</a></p>
                        <h3 class="program-title">Annual May Gathering 2019</h3>
                        <p class="date">May 4-5</p>
                        <p class="desc">A 2-day Public Program: Come to listen to speakers, participate in
                            dialogues, attend workshops, or simply hang out at Oak Grove School.
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/program_03.jpg" alt="Saturday Dialogue"></div>
                        <p class="cat">Category: <a href="#">Programs</a></p>
                        <h3 class="program-title">Self-inquiry and Self-transformation</h3>
                        <p class="date">March 30, 2019</p>
                        <p class="desc">Evening program. A Talk by Ravi Ravindra titled: Self-inquiry and
                            Self-transformation
                        </p>
                        <p class="read-more"><a href="#">Read more ></a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

次は右カラム部分のマークアップ
下記のようにマークアップしました。

                    <div class="col-md-3 right-col">
                        <div class="right-col-wrapper">
                            <h3 class="donation-title">Support our efforts</h3>
                            <p class="donation-desc">Because of your generosity, the legacy of Krishnamurti has been kept
                                alive
                                in print and online for decades. Your gift allows this to continue. Please join us in
                                support of
                                this vital work.
                            </p>
                            <button type="button" class="btn btn-orange">DONATE TODAY</button>

                            <h3 class="online-shop-title">Online Shop</h3>
                            <img src="./img/cart.png" alt="cart">
                            <p class="online-shop-desc">Explore the books, DVDs and CDs by Krishnamurti. <a href="#">Shop
                                    here&gt;</a></p>
                        </div>
                    </div>

下記のように左カラムは同じように2度繰り返したいので、
下のようにコーディングしました。

<div class="col-md-9 left-col">
    <h2 class="feature-title">Featured Teachings</h2>
      <div class="d-flex flex-wrap">
        <div class="col-md-4 col-sm-12">
            <div><img class="responsive" src="img/featured_teaching_01.jpg" alt="On Conflict"></div>
            <h3 class="teaching-title">On Conflict</h3>
            <p class="desc">Man has accepted conflict as an innate part of daily existence because he
                has accepted competition, jealousy, greed as a natural way of life.
            </p>
            <p class="read-more"><a href="#">Read more ></a></p>
        </div>
        <div class="col-md-4 col-sm-6">
            <div><img class="responsive" src="img/featured_teaching_02.jpg" alt="On Change"></div>
            <h3 class="teaching-title">On Change</h3>
            <p class="desc">Unless I fundamentally change, the future will be what I am now. What is the
                energy, the intensity that will make me change?
            </p>
            <p class="read-more"><a href="#">Read more ></a></p>
        </div>
        <div class="col-md-4 col-sm-6">
            <div><img class="responsive" src="img/featured_teaching_03.jpg" alt="Freedom and Authority">
            </div>
            <h3 class="teaching-title">Freedom and Authority</h3>
            <p class="desc">To be free of authority is to die to everything of yesterday so that your
                mind is always fresh, always young, innocent. Then there is observation and learning.
            </p>
            <p class="read-more"><a href="#">Read more ></a></p>
        </div>
    </div>
</div>

<div class="col-md-9 left-col">
    <h2 class="feature-title">Featured Books</h2>
      <div class="d-flex flex-wrap">
        <div class="col-md-4 col-sm-12">
            <div class="featured-book-img text-center"><img class="responsive"
                    src="img/featured_books_01.jpg" alt="On Conflict"></div>
            <h3 class="books-title">Choiceless Awareness</h3>
            <p class="desc">Krishnamurti proposes that the current crisis is a direct consequence of our
                fragmented way of living. In what way can choiceless awareness heal the division between
                the observer and the observed?
            </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="featured-book-img"><img class="responsive" src="img/featured_books_02.jpg"
                    alt="On Change"></div>
            <h3 class="books-title">What Are You Doing with Your Life?</h3>
            <p class="desc">Compiled with younger audiences in mind, this book offers an introduction to
                many themes of Krishnamurti’s work such as Relationships, Love, Work, Fear, and
                Loneliness.
            </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="featured-book-img"><img class="responsive" src="img/featured_books_03.jpg"
                    alt="Freedom and Authority">
            </div>
            <h3 class="books-title">The First and Last Freedom</h3>
            <p class="desc">If the truth can set us free, where do we find it? The First and Last
                Freedom is a comprehensive book on Krishnamurti’s teachings.
            </p>
        </div>
    </div>
</div>

これでfooter フッターの手前のセクションまで出来ました!
セクション main-contens部分のコードを載せておきます。

        <section class="main-contents">
            <div class="wrapper">
                <div class="d-flex">
                    <div class="col-md-9 col-sm-12 left-col">
                        <h2 class="feature-title">Program Schedule</h2>
                        <div class="d-flex flex-wrap">
                            <div class="col-md-4 col-sm-12">
                                <div class="text-center"><img class="responsive" src="img/program_01.jpg"
                                        alt="Saturday Dialogue"></div>
                                <p class="cat">Category: <a href="#">Programs</a></p>
                                <h3 class="program-title">Saturday Dialogue</h3>
                                <p class="date">1st, 2nd & 3rd Saturday</p>
                                <p class="desc">Doors open at 3:45. Dialogue begins promptly at 4:00 p.m. and ends at 6:00
                                    p.m.
                                </p>
                                <p class="read-more"><a href="#">Read more &gt;</a></p>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div><img class="responsive" src="img/program_02.jpg" alt="Saturday Dialogue"></div>
                                <p class="cat">Category: <a href="#">Programs</a></p>
                                <h3 class="program-title">Annual May Gathering 2019</h3>
                                <p class="date">May 4-5</p>
                                <p class="desc">A 2-day Public Program: Come to listen to speakers, participate in
                                    dialogues, attend workshops, or simply hang out at Oak Grove School.
                                </p>
                                <p class="read-more"><a href="#">Read more &gt;</a></p>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div><img class="responsive" src="img/program_03.jpg" alt="Saturday Dialogue"></div>
                                <p class="cat">Category: <a href="#">Programs</a></p>
                                <h3 class="program-title">Self-inquiry and Self-transformation</h3>
                                <p class="date">March 30, 2019</p>
                                <p class="desc">Evening program. A Talk by Ravi Ravindra titled: Self-inquiry and
                                    Self-transformation
                                </p>
                                <p class="read-more"><a href="#">Read more &gt;</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 right-col">
                        <div class="right-col-wrapper">
                            <h3 class="donation-title">Support our efforts</h3>
                            <p class="donation-desc">Because of your generosity, the legacy of Krishnamurti has been kept
                                alive
                                in print and online for decades. Your gift allows this to continue. Please join us in
                                support of
                                this vital work.
                            </p>
                            <button type="button" class="btn btn-orange">DONATE TODAY</button>

                            <h3 class="online-shop-title">Online Shop</h3>
                            <img src="./img/cart.png" alt="cart">
                            <p class="online-shop-desc">Explore the books, DVDs and CDs by Krishnamurti. <a href="#">Shop
                                    here&gt;</a></p>
                        </div>
                    </div>
                </div>


            <div class="col-md-9 left-col">
                <h2 class="feature-title">Featured Teachings</h2>
                <div class="d-flex flex-wrap">
                    <div class="col-md-4 col-sm-12">
                        <div class="text-center"><img class="responsive" src="img/featured_teaching_01.jpg"
                                alt="On Conflict"></div>
                        <h3 class="teaching-title">On Conflict</h3>
                        <p class="desc">Man has accepted conflict as an innate part of daily existence because he
                            has accepted competition, jealousy, greed as a natural way of life.
                        </p>
                        <p class="read-more"><a href="#">Read more &gt;</a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/featured_teaching_02.jpg" alt="On Change"></div>
                        <h3 class="teaching-title">On Change</h3>
                        <p class="desc">Unless I fundamentally change, the future will be what I am now. What is the
                            energy, the intensity that will make me change?
                        </p>
                        <p class="read-more"><a href="#">Read more &gt;</a></p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div><img class="responsive" src="img/featured_teaching_03.jpg" alt="Freedom and Authority">
                        </div>
                        <h3 class="teaching-title">Freedom and Authority</h3>
                        <p class="desc">To be free of authority is to die to everything of yesterday so that your
                            mind is always fresh, always young, innocent. Then there is observation and learning.
                        </p>
                        <p class="read-more"><a href="#">Read more &gt;</a></p>
                    </div>
                </div>
            </div>

            <div class="col-md-9 left-col">
                <h2 class="feature-title">Featured Books</h2>
                <div class="d-flex flex-wrap">
                    <div class="col-md-4 col-sm-12">
                        <div class="featured-book-img text-center"><img class="responsive"
                                src="img/featured_books_01.jpg" alt="On Conflict"></div>
                        <h3 class="books-title">Choiceless Awareness</h3>
                        <p class="desc">Krishnamurti proposes that the current crisis is a direct consequence of our
                            fragmented way of living. In what way can choiceless awareness heal the division between
                            the observer and the observed?
                        </p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="featured-book-img"><img class="responsive" src="img/featured_books_02.jpg"
                                alt="On Change"></div>
                        <h3 class="books-title">What Are You Doing with Your Life?</h3>
                        <p class="desc">Compiled with younger audiences in mind, this book offers an introduction to
                            many themes of Krishnamurti’s work such as Relationships, Love, Work, Fear, and
                            Loneliness.
                        </p>
                    </div>
                    <div class="col-md-4 col-sm-6">
                        <div class="featured-book-img"><img class="responsive" src="img/featured_books_03.jpg"
                                alt="Freedom and Authority">
                        </div>
                        <h3 class="books-title">The First and Last Freedom</h3>
                        <p class="desc">If the truth can set us free, where do we find it? The First and Last
                            Freedom is a comprehensive book on Krishnamurti’s teachings.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

次にFooter フッター部分をマークアップしていきましょう。


Footer フッター部分の基本的な構造は3カラム(タブレット以下の表示は1カラム)
なので、<div class=”col-md-4> を指定してあげて、下記のようにマークアップしてあげれば出来そうです。基本的な構造はこれでOKでしょう。

<footer>
        <div class="footer-wrap">
            <div class="wrapper d-flex flex-wrap">
                <div class="col-md-4 footer-col">左のカラム</div>
                <div class="col-md-4 footer-col">真ん中のカラム</div>
                <div class="col-md-4 footer-col">右のカラム</div>
            </div>
        </div> 
</footer>

中身は「見出し heading」と「文章 Paragraph」そして「form」があるので、
下記のようにコーディングしてみました。

    <footer>
        <div class="footer-wrap">
            <div class="wrapper d-flex flex-wrap">
                <div class="col-md-4 footer-col-1">
                    <h3 class="footer-heading">About the KFA</h3>
                    <p class="footer-desc">The purpose of the Krishnamurti Foundation of America (KFA) is to
                        preserve
                        and disseminate the
                        teachings of J. Krishnamurti and advance public understanding and realization of human
                        potential
                        by means of the study of these teachings. Our activities are focused on making the teachings
                        available through traditional and modern media, outreach programs both in the USA and
                        internationally, and through our adult Educational Center and School in Ojai.</p>
                    <p class="footer-desc">
                        Our challenge is to make Krishnamurti’s teachings available to all age groups, different
                        cultures, economic groups and races, and to do this we continue to expand our dissemination
                        efforts.
                    </p>
                </div>
                <div class="col-md-4 footer-col-2">
                    <h3 class="footer-heading">Mailing list</h3>
                    <p>Sign up here to be kept up to date on the happenings at the KFA</p>
                    <form>
                        <div class="form-group">
                            <label for="first-name">First Name</label>
                            <input type="text" id="first-name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="last-name">Last Name</label>
                            <input type="text" id="last-name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="email-address">Email address:</label>
                            <input type="text" id="email-address" class="form-control">
                            <div class="g-recaptcha" data-callback="validateRecaptcha"
                                data-sitekey="6LfMzJsUAAAAALB2ETjJdCagZ39x9jj_dyotXXNn"></div>
                        </div>
                        <button type="button" class="btn btn-sm-orange">Sign up</button>
                        <p class="privacy-policy"><a href="">Privacy Policy</a></p>
                    </form>
                </div>

                <div class="col-md-4 footer-col-3">
                    <h3 class="footer-heading">Contact us</h3>
                    <h4 class="sub-heading">Krishnamurti Foundation of America</h4>
                    <p class="address">PO Box 1560 Ojai CA 93024<br />
                        Office Phone: (805) 646-2726<br />
                        Tue-Fri 9:30am-4pm
                    </p>
                    <h4 class="sub-heading">Pepper Tree Retreat</h4>
                    <p class="address">1130 McAndrew Road, Ojai, CA 93023<br />
                        Retreat Phone: (805) 646-4773<br />
                    </p>
                    <h4 class="sub-heading">Krishnamurti Center and Library</h4>
                    <p class="address">1098 McAndrew Road, Ojai, CA 93023<br />
                        Library Phone: (805) 646-2726 EXT 816<br />
                        Opening times:<br />
                        Wed, Thu & Fri 1pm-5pm<br />
                        Sat & Sun 10am-5pm<br />
                        On official US holidays 11am-4pm
                    </p>

                    <button type="button" class="btn btn-xs-orange"><i
                            class="fas fa-envelope icon-small"></i>&nbsp;&nbsp;Contact
                        Us</button>



                </div>
            </div>
            <div class="copyright-wrap">
                <p class="copyright">ALL CONTENT COPYRIGHT © KRISHNAMURTI FOUNDATION OF AMERICA
                </p>
            </div>
        </div>
    </footer>

formの部分ですが、Bootstrap4に用意されているform-groupというclassを使って、
マークアップしていきます。下記のようにマークアップしてみました。

<footer>
    <div class="footer-wrap">
        <div class="container">
            <div class="row">
                <div class="col-md-4 footer-col">
                    <h3 class="footer-heading">About the KFA</h3>
                    <p class="footer-desc">The purpose of the Krishnamurti Foundation of America (KFA) is to
                        preserve
                        and disseminate the
                        teachings of J. Krishnamurti and advance public understanding and realization of human
                        potential
                        by means of the study of these teachings. Our activities are focused on making the teachings
                        available through traditional and modern media, outreach programs both in the USA and
                        internationally, and through our adult Educational Center and School in Ojai.</p>
                    <p class="footer-desc">
                        Our challenge is to make Krishnamurti’s teachings available to all age groups, different
                        cultures, economic groups and races, and to do this we continue to expand our dissemination
                        efforts.
                    </p>
                </div>
                <div class="col-md-4 footer-col">
                    <h3 class="footer-heading">Mailing list</h3>
                    <p>Sign up here to be kept up to date on the happenings at the KFA</p>
                    <form>
                        <div class="form-group">
                            <label for="first-name">First Name</label>
                            <input type="text" id="first-name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="last-name">Last Name</label>
                            <input type="text" id="last-name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="email-address">Email address:</label>
                            <input type="text" id="email-address" class="form-control">
                            <div class="g-recaptcha" data-callback="validateRecaptcha"
                                data-sitekey="6LfMzJsUAAAAALB2ETjJdCagZ39x9jj_dyotXXNn"></div>
                        </div>
                        <button type="button" class="btn btn-sm-orange">Sign up</button>
                        <p class="privacy-policy"><a href="">Privacy Policy</a></p>
                    </form>
                </div>

                <div class="col-md-4 footer-col">
                    <h3 class="footer-heading">Contact us</h3>
                    <h4 class="sub-heading">Krishnamurti Foundation of America</h4>
                    <p class="address">PO Box 1560 Ojai CA 93024<br />
                        Office Phone: (805) 646-2726<br />
                        Tue-Fri 9:30am-4pm
                    </p>
                    <h4 class="sub-heading">Pepper Tree Retreat</h4>
                    <p class="address">1130 McAndrew Road, Ojai, CA 93023<br />
                        Retreat Phone: (805) 646-4773<br />
                    </p>
                    <h4 class="sub-heading">Krishnamurti Center and Library</h4>
                    <p class="address">1098 McAndrew Road, Ojai, CA 93023<br />
                        Library Phone: (805) 646-2726 EXT 816<br />
                        Opening times:<br />
                        Wed, Thu & Fri 1pm-5pm<br />
                        Sat & Sun 10am-5pm<br />
                        On official US holidays 11am-4pm
                    </p>

                    <button type="button" class="btn btn-xs-orange"><i
                            class="fas fa-envelope icon-small"></i>&nbsp;&nbsp;Contact
                        Us</button>

                </div>
            </div>
        </div>
    </div>
</footer>


Googleの「reCAPTCHA」部分は下記を参考にして実装しました。

Googleの「reCAPTCHA」を5分で実装する
https://liapoc.com/recaptcha.html

次にcopyright コピーライト部分に移ります。

            <div class="copyright-wrap">
                <p class="copyright">ALL CONTENT COPYRIGHT © KRISHNAMURTI FOUNDATION OF AMERICA
                </p>
            </div>

コピーライトの文章・テキストが一行なのでline-height を使い、
下記のようにcssをマークアップしました。

.copyright-wrap {
  width: 100%;
  height: 60px;
  background: #666;
}

.copyright {
  text-align: center;
  color: #f9f9f9;
  line-height: 60px;
  margin-bottom: 0px;
}

縦方向の中央寄せについては下記を参考にしました。

今回はcopyright コピーライトの文章・テキストが一行だったので、
line-height を使うことが出来ましたが、一行ではない時は違う方法で
縦方向の中央寄せをします。

テキストの縦方向の中央揃えについて
https://qiita.com/Shinji-m/items/69a392685699f3ba95fb

CSSで上下左右に中央寄せする方法、全部まとめ
http://www-creators.com/archives/391

【CSS】要素を上下や左右に中央寄せする簡単な方法
https://kuzlog.com/2017/01/11/228/

次に下記のクリックすると「スクロールでページトップへ戻ってくれるボタン」
を実装しましょう。

下記のサイトを参考にしながらカスタマイズしていきます。

jQuery:スクロールで表示されるページトップの実装方法
2. フェードで出現 #2
https://www.nxworld.net/tips/page-top-appears-scroll.html

一定量スクロールすると表示する「ページトップ」ボタンの実装方法
https://www.plusdesign.co.jp/blog/?p=4044

スクロールでページトップへ戻るボタンを表示させる方法まとめ!
https://giga-log.com/homepage/pagetop-button/

上向きの矢印はfontawesomeアイコンを使用します。

下記の参考サイトよく使うFontawesomeのアイコンがまとめられています。

よく使うFontAwesomeの日本語まとめ作ってみたよ。
コード検索とかに手こずったりするので参考にしてみてね
https://website-homepage.com/web-design/tips/font-awesome-japanese/

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome

実際のコードは下記のようにhtmlをマークアップして、

    <p class="pagetop"><a href="#top"><i class="fa fa-chevron-up icon-size-02"></i></a></p>

cssは下記のようにしました。

.pagetop {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 50px;
}
.pagetop a {
  display: block;
  line-height: 50px;
  width: 50px;
  height: 50px;
  background-color: #666;
  border-radius: 2px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  opacity: 0.7;
}

.pagetop a:hover {
  background: #fff;
  border: #fff;
  opacity: 0.7;
}

.icon-size-02 {
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  vertical-align: middle;
  font-size: 0.4em;
  color: #fff;
}

.fa-chevron-up:hover {
  color: #666;
}

※最終的には親要素の四角のボックスをhoverさせた時に
子要素のfontawesome上向き矢印の色を変更する必要があったので、
子要素にも親要素と同じ高さと幅50pxを設定し、下記のような処理をして一件落着!
ハイライトで示している部分が肝となっている部分。

line-height かvertical align=“middle”
どちらか一方だけでは駄目で、両方ともに設定してあげる必要がある。

.icon-size-02 {
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
vertical-align: middle;
font-size: 0.4em;
color: #fff;
}