模写コーディング No.1（HTML・CSS編）

ゆうき（ @BASEBALLY15 )です^^

最近，HTML・CSSについて勉強しています．
今回，初めて模写コーディングを行ったのでそのコード等をご紹介します．
（Visual Studio Codeを使用）

『模写コーディング』って何？
模写コーディング～全体のコード（HTML・CSS）～
- HTML編（＋jQuery）
- CSS編
  - レスポンシブ対応
作ってみて分かったこと
終わりに
Q &A
- いいね:
- 合わせて読みたい関連記事

『模写コーディング』って何？

実際のWebサイトを見ながら，同じデザインのサイトを自分で作ることを言います．

初心者がHTMLやCSS，JavaScriptを勉強した後に，次の段階で行うことが多いです．

自分自身，HTMLとCSSの勉強を今までしてきて，どれくらい力が付いたのか確認したかったので，今回，模写コーディングを行うことにしました．

ちなみに，今回は以下のサイトを模写コーディングしました．

これから，模写コーディングのコードなどを紹介するのですが，大まかな流れを先にまとめておきます．

全体のコードを紹介（HTML→CSSの順で）
HTMLのコードの解説（header→main→footerの順番で）
CSSのコードの解説（HTMLの解説と同じ順番で）
レスポンシブ対応

解説は，コード内にコメントアウトという形で載せます．

それでは見ていきましょう⤵

模写コーディング～全体のコード（HTML・CSS）～

完成したものが以下の画像です．

所々，模写することが出来ていない（検索窓など）のですが，全体的に見ると上手く模写できたのではないかと思います！！

レスポンシブ対応前

この画像では，どこがヘッダーで，どこがメインで，どこがフッターなのかが分からないので，別々でも載せておきます．

ヘッダー

メイン

フッター

レスポンシブ対応

ナビゲーションボタンを押した時

それでは，コードを見ていきましょう⤵

HTML編（＋jQuery）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 詳細 -->
    <meta name="description" content="本ブログを読むと，〇〇が理解できます．">
    <!-- style.cssを使うために用意 -->
    <link rel="stylesheet" href="style.css">
    <title>Write-書くためのテーマ</title>
    <!-- アイコン -->
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="C:\jQuery\jquery.min.js"></script>
</head>
<body>
    <div class="page">
        <!-- ヘッダー -->
        <header class="home-header">
            <!-- タイトルとナビゲーションを横並びにするために用意(Flex) -->
            <div class="header-flex">
                <div class="all-title">
                    <!-- メインタイトル -->
                    <h1 class="main-title"><a href="index.html">Write</a></h1>
                    <!-- サブタイトル -->
                    <div class="sub-title">書くためのテーマ</div>
                </div>

                <!-- ハンバーガーメニュー -->
                <button type="button" class="btn">
                    <span class="btn-line"></span>
                    <span class="btn-line"></span>
                    <span class="btn-line"></span>
                </button>

                <!-- ナビゲーション -->
                <nav>
                    <!-- リストと検索窓を横並びにするために用意(Flex) -->
                    <div class="nav-flex">
                        <ul class="nav-ul">
                            <li><a href="index.html">ホーム<i class="fas fa-chevron-down"></i></a>
                                <ul class="nav-hover">
                                    <li><a href="#">→カスタマイズ</a></li>
                                </ul>
                            </li>
                            <li><a href="page.html">ページ<i class="fas fa-chevron-down"></i></a>
                                <ul class="nav-hover">
                                    <li><a href="#">→アイキャッチ画像なしのページ</a></li>
                                    <li><a href="#">→ページ（全幅テンプレート）</a></li>
                                </ul>
                            </li>
                            <li><a href="taipo.html">タイポグラフィー</a></li>
                            <li><a href="contact.html">お問い合わせ</a></li>
                        </ul>
                        <!-- 検索窓 -->
                        <div class="seach-div">
                            <form action="index.html" method="GET" role="search">
                                <input type="search" id="search-button" class="fas-seach" placeholder="検索...">    
                            </form>
                        </div>
                    </div>
                </nav>
            </div>
            
            <!-- 画像 -->
            <div class="header-image">        
                <img src=".//img//cropped-nicole-honeywill-730102-unsplash.jpg" alt="メイン画面イメージ">
            </div>

            <!-- 簡単な説明文 -->
            <div class="header-content">
                Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。
            </div>

        </header>


        <!-- メイン -->
        <main class="home-main">
            <!-- <article></article>内に記事の内容を書いていく -->
            <article>
                <span>
                    <a href="#"><time datetime="2018-09-01" >2018年9月1日</time></a>
                </span>
                <div class="article-contents">
                    <h2 class="entry-title"><a href="#">書くためのテーマ</a></h2>
                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>    
                </div>
            </article>

            <article>
                <span>
                    <a href="#"><time datetime="2018-03-05" >2018年3月5日</time>
                    </a>
                </span>
                <div class="article-contents">
                    <h2 class="entry-title"><a href="#">画像付きの投稿</a></h2>
                    <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>    
                </div>
            </article>

            <article>
                <span>
                    <a href="#"><time datetime="2018-03-05" >2018年3月5日</time></a>
                </span>
                <div class="article-contents">
                    <h2 class="entry-title"><a href="#">引用付きの投稿</a></h2>
                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>    
                </div>
            </article>

            <article>
                <span>
                    <a href="#"><time datetime="2018-03-03" >2018年3月3日</time></a>
                </span>
                <div class="article-contents">
                    <h2 class="entry-title"><a href="#">コメント付きの投稿</a></h2>
                    <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>    
                </div>
            </article>

            <article>
                <span>
                    <a href="#"><time datetime="2018-03-03" >2018年3月3日</time></a>
                </span>
                <div class="article-contents">
                    <h2 class="entry-title"><a href="#">吾輩は猫である</a></h2>
                    <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>    
                </div>
            </article>

            <article>
                <span>
                    <a href="#"><time datetime="2018-09-01" >2018年9月1日</time></a>
                </span>
                <div class="article-contents">
                    <h2 class="entry-title"><a href="#">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a></h2>
                    <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>    
                </div>
            </article>

            <!-- 『次へ』のボタン等を作成 -->
            <div class="nav-linkd">
                <!-- 現在のページとそれ以外のページでクラスを分ける -->
                <!-- 現在のページ -->
                <a class="page1" href="#">1</a>
                <!-- それ以外 -->
                <a class="another-page" href="#">2</a>
                <a class="another-page" href="#">3</a>
                <a class="next-page" href="#">NEXT</a>
            </div>
        </main>

        <!-- 線を引く -->
        <hr>


        <!-- フッター -->
        <footer>
            <div class="fotter-all">
                <div class="fotter-upper-flex">
                    <!-- 顔の画像とプロフィール -->
                    <aside class="profile-flex">
                        <div class="face-name-flex">
                            <img src="./img/profile-m.png" alt="自分の顔写真">
                            <div class="name-sns-flex">
                                <strong>John Doe</strong>
                                <div class="sns-flex">
                                    <a target=”_blank” class="twitter" href="https://twitter.com/WordPress"><i class="fab fa-twitter"></i></a>
                                    <a target=”_blank” class="facebook" href="https://www.facebook.com/WordPress"><i class="fab fa-facebook-f"></i></a>
                                    <a target=”_blank” class="instagram" href="https://www.instagram.com/unsplash/"><i class="fab fa-instagram"></i></a>
                                </div>
                            </div>
                        </div>
                        <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
                    </aside>
    
                    <!-- 『フッター右』 -->
                    <aside class="fotter-right">
                        <h2>フッター右</h2>
                        <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
                    </aside>
    
                    <!-- 最近の投稿 -->
                    <aside class="recent-posts">
                        <h2>最近の投稿</h2>
                        <ul>
                            <li>
                                <a href="#">書くためのテーマ</a>
                                <span class="post-date">2018年9月1日</span>
                            </li>
                            <li>
                                <a href="#">画像付きの投稿</a>
                                <span class="post-date">2018年3月5日</span>
                            </li>
                            <li>
                                <a href="#">引用付きの投稿</a>
                                <span class="post-date">2018年3月5日</span>
                                
                            </li>
                        </ul>
                    </aside>
                    <!-- カテゴリー -->
                    <aside class="category">
                        <h2>カテゴリー</h2>
                        <ul>
                            <li>
                                <a href="#">サンプル投稿</a>
                            </li>
                            <li>
                                <a href="#">投稿フォーマット</a>
                            </li>
                            <li>
                                <a href="#">普通の投稿</a>
                            </li>
                        </ul>

                        <!-- 検索窓 -->
                        <form action="index.html" method="GET" role="search">
                            <input type="search" id="search-button" class="fas-2" placeholder="検索...">    
                        </form>

    
                    </aside>
                </div>

                <!-- 線を描く -->
                <hr>

                <div class="fotter-bottom-flex">
                    <div fotter-bottom-sns>
                        <a target=”_blank” class="twitter" href="https://twitter.com/WordPress"><i class="fab fa-twitter"></i></a>
                        <a target=”_blank” class="facebook" href="https://www.facebook.com/WordPress"><i class="fab fa-facebook-f"></i></a>
                        <a target=”_blank” class="instagram" href="https://www.instagram.com/unsplash/"><i class="fab fa-instagram"></i></a>
                    </div>

                    <div class="powered-by">
                        <small>Powered by <a href="https://ja.wordpress.org/">WordPress</a>
                        <span>|</span>Theme: <a href="https://themegraphy.com/ja/wordpress-themes/write/">Write</a> by Themegraphy</small>
                    </div>
                </div>
            </div>    
        </footer>
    </div>



    <script>
        // もしボタンが押されたら
        $(".btn").on("click", function(){
            // 『open』というクラスを追加したり消去したりする
            $(".btn").toggleClass("open");
            $(".nav-flex").toggleClass("open");
            // もし，ボタンに『open』というクラス名があれば
            if($(".btn").hasClass("open")){
                // スクロールが出来ないようにする
                $("html").css("overflow", "hidden");
            }else{
                // 『open』というクラスが消去されたら，スクロールを可能にする
                $("html").css("overflow", "scroll");
            }
        });
    </script>
</body>
</html>

SNSのマークは『FontAwesome』を使っています．

SNS以外にも，色々なマークがあるので気に入ったものを使ってみて下さい^^

CSS編

/* 全体 */
body{
    /* フォントのタイプ */
    font-family: Georgia, '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
    /* 横幅の調節 */
    margin: 60px 40px;
}
.page{
    /* 横幅の最大を1035pxにする */
    max-width: 1035px;
    /* auto→自動で調節 */
    margin-left: auto;
    margin-right: auto;
}

/* ヘッダー */
.header-flex{
    /* flex→縦から横に並び替える */
    display: flex;
    /* space-between→2者間を均等に空ける */
    justify-content: space-between;
    padding-bottom: 70px;
}
.all-title{
    width: 260px;
    padding-right: 75px;
    padding-bottom: 10px;
}
.main-title{
    margin: 0;
    font-size: 36px;
}
.main-title a,
.nav-flex ul a{
    color: black;
    /* 下線を消す */
    text-decoration: none;
}
.nav-flex ul a{
    font-size: 1em;
}
.sub-title{
    padding-top: 4px;
    font-size: 18px;
}
/* ナビゲーション */
.btn{
    display: none;
}
.nav-ul{
    display: flex;
    /* 点を非表示にする */
    list-style: none;
    padding: 0;
}
.nav-flex{
    display: flex;
    /* 行間を52pxにする */
    line-height: 52px;
}
.nav-ul li{
    font-size: 0.9rem;
    padding: 0 16px;
    position: relative;
}

.nav-hover{
    padding-left: 0;
    box-shadow: 0 1px 3px #ddd;
    position: absolute;
    visibility: hidden;
    background-color: #fff;
    opacity: 0;
    transition: .5s;
}
.nav-hover li{
    list-style: none;
    border: 1px solid #e6e6e6;
    width: 200px;
}
.nav-hover li a{
    display: block;
}
.nav-ul li:hover .nav-hover {
    visibility: visible;
    opacity: 1;
}

.seach-div{
    width: 200px;
    text-align: right;
}
.fas-seach{
    /* 左側のpaddingを開けておく */
    padding: 0 0 0 34px;
    /* 背景に画像を配置 */
    /* no-repeatで画像の表示を繰り返さない */
    background: url(.//img//search_mushimegane.png) 5px center no-repeat;
    background-size: 24px 24px;
    height: 40px;
    /* リンクにホバーした時の矢印の表示 */
    cursor: pointer;
    margin-top: 20px; 
    /* 輪郭を『1px』の『実線(solid)』で表す */
    border:none;
    width: 1px;
    
}
/* クリックされた時の処理 */
/* 検索窓を横にスライドする */
.fas-seach:focus{
    width: 200px;
    cursor: text;
    border:solid 1px;
    transition: .5s;
}

.header-image{
    /* 画像や文字を中心に移動 */
    text-align: center;
    margin-bottom: 90px;
}
.header-content{
    font-size: 27px;
    padding-bottom: 25px;
    margin-bottom: 90px;
}

/* メイン */
.home-main{
    max-width: 1035px;
}
article{
    display: flex;
    justify-content: space-between;
}
article h2{
    margin-top: 0;
}
.article-contents{
    margin: 0 0 75px 0;
    /* padding-left: 75px; */
    width: 65%;
}
article time{
    margin: 8px 0;
    color: #333;
    font-size: 18px;
}
/* 次へボタン */
.nav-linkd{
    display: block;
    height: 48px;
    margin: 0 0 75px 35%;
}
.nav-linkd a{
    display: inline-block;
    font-size: 18px;
    padding: 8px 18px;
    margin-right: 6px;
}
.page1{
    background-color: #eee;
    border: solid 1px #ccc;
    color: #333;
    height: 30px;
}
.another-page,
.next-page{
    border: solid 1px #ccc;
    height: 30px;
    color: #444;
}
/* :hover→ホバー時の処理 */
.another-page:hover,
.next-page:hover{
    border: solid 1px rgb(49, 48, 48)
}


/* フッター */
.fotter-all{
    padding-top: 75px;
}
/* フッターの上部 */
.fotter-upper-flex{
    display: flex;
    margin-bottom: 50px;
}
/* 写真とプロフィール */
.profile-flex{
    padding-right: 12%;
    /* 横幅を全体の33.3%にする */
    width: 33.3%;
}
.face-name-flex{
    display: flex;
}
.face-name-flex img{
    /* 角を50%曲線にする */
    border-radius: 50%;
    width: 100px;
    margin-bottom: 20px;
    margin-right: 10%;
}
.sns-flex{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
/* 『フッター右』 */
.fotter-right{
    padding-right: 2%;
    width: 33.3%;
}
.fotter-right h2,
.recent-posts h2,
.category h2
{
    margin-bottom: 30px;
    font-size: 1.125rem;
    color: #333;
}
/* 最近の投稿 */
.recent-posts{
    width: 33.3%;
}
.recent-posts ul{
    padding-left: 0;
}
.recent-posts li{
    list-style: none;
    display: flex;
    flex-direction: column;
}
.recent-posts a{
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}
/* カテゴリー */
.category{
    width: 33.3%;
}
.category ul{
    padding-left: 0;
}
.category li{
    list-style: none;
}
.category a{
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}
/* フッターの検索窓 */
.fas-2{
    height: 40px;
    cursor: pointer;
    margin-top: 20px;  
    border: solid 1px #e6e6e6;
    color: #777;
}

/* フッター下部 */
.fotter-bottom-flex{
    display: flex;
    padding-top: 60px;
}
.fotter-bottom-sns{

}
.powered-by{
    margin: 0 auto;
}
a{
    /* inferit・・・親属性に合わせる */
    text-decoration: none;
    /* inherit→親要素に合わせる */
    color: inherit;
    /* transition→2つの要素の変化の仕方を定義する */
    /* 0.15sかけて次の処理に移る */
    transition: .15s ease-in-out;
}
/* ホバー時の色を変える */
article a:hover,
.recent-posts a:hover,
.category a:hover,
.nav-ul a:hover,
.fa-chevron-down:hover{
color: orange;
}
/* Twitter・Facebook・Instagramマークの編集 */
i{
    color: #999;
}
i:hover{
    color: black;
}
.name-sns-flex strong{
    font-size: 112.5%;
    /* padding-left: 12px; */
}
.sns-flex{
    margin-top: 4px;
}
.name-sns-flex{
    /* 名前部分を下にずらす */
    margin-top: 2.4rem;
}

レスポンシブ対応

上で書いたCSSのコードの続きに書いていきます．

レスポンシブ対応を行うことでスマートフォンやタブレットなど，画面が小さい端末でも見やすくすることが出来ます！

/* レスポンシブ対応 */
@media (max-width:800px){
    body{
        margin: 45px 20px;
    }

    /* ヘッダー */

    /* 画像の横幅を調節 */
    .header-image img{
        /* 以前のimgを基準に考える */
        position: relative;
        /* 基準地-20pxすることで，画面いっぱいに表示する */
        left: -20px;
        height: auto;
        width: 100vw;
    }
    /* ハンバーガーメニュー */
    .btn{
        position: fixed;
        top: 45px;
        right: 20px;
        width: 50px;
        height: 50px;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 20;
        /* 枠線を消す(https://public-constructor.com/hide-button-outline/) */
        outline: none;
        border: none;
        background-color: white;
    }
    /* ボタンのライン */
    .btn-line{
        width: 30px;
        height: 3px;
        background-color: black;
        transition: .5s;
    }
    .btn-line:nth-of-type(1){
        margin-bottom: 10px;
    }
    .btn-line:nth-of-type(3){
        margin-top: 10px;
    }

    .seach-div,
    .nav-ul i{
        display: none;
    }
    
    .nav-ul{
        flex-direction: column;
        background-color: white;
        opacity: 0.8 !important; 
        margin: 0 auto;
        padding-top: 150px;
        width: 100%;
        height: 100vh;

    }
    /* positionをリセットする */
    .nav-ul li{
        position: static;
    }
    /* 文字サイズの編集 */
    .nav-ul li a{
        font-size: 1.6em;
    }
    .nav-hover{
        position: static;
        box-shadow: unset;
        background-color: unset;
    }
    .nav-hover li{
        border: none;
        margin: auto;
    }

    .nav-flex{
        position: fixed;
        top: 0;
        z-index: 10;
        margin: 0 auto;
        text-align: center;
        right: 0;
        left: 0;
        visibility: hidden;
        overflow: scroll;
    }

    /* ボタンが押された時にナビゲーションを表示する */
    .open .nav-ul,
    .open .nav-hover{
        visibility: visible;
        opacity: 1;
    }
    /* ボタンが押された時にボタンのラインを傾ける */
    .open .btn-line:nth-of-type(1){
        margin: 1px;
        transform: rotate(-45deg);
    }
    .open .btn-line:nth-of-type(3){
        margin: -3px;
        transform: rotate(45deg);
    }
    .open .btn-line:nth-of-type(2){
        display: none;
    }

    /* メイン */

    /* 時刻と記事の並びを縦に変更する */
    article{
        display: block;
        width: 100%;
    }
    .article-contents{
        padding: 0;
        width: 100%;
    }
    .nav-linkd{
        margin-left: 0;
    }

    
    /* フッター */
    .fotter-upper-flex{
        display: block;
    }
    .profile-flex{
        padding-right: 0;
    }
    .fotter-right{
        padding-right: 0;
    }
    
    /* 横幅の再調整 */
    .profile-flex,
    .recent-posts,
    .fotter-right,
    .category{
        width: 100%;
        margin-bottom: 15%;
    }
    .fotter-bottom-flex{
        display: block;
    }
    .powered-by{
        margin-left: 0;
        margin-top: 5%;
    }
}

今回の記事で理解できない箇所などありましたら，気軽に下にある『Q&A』で質問して頂けるとありがたいです^^

Q&A以外にも，コメント欄やTwitterでも対応しています！

また，「もっと，こうした方がいいよ！」といったアドバイスなどあれば，教えて欲しいです^^

お願いします！