ゆうき（ @BASEBALLY15 )です^^
最近，HTML・CSSについて勉強しています．
今回，初めて模写コーディングを行ったのでそのコード等をご紹介します．
（Visual Studio Codeを使用）
『模写コーディング』って何？
実際の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でも対応しています！
また，「もっと，こうした方がいいよ！」といったアドバイスなどあれば，教えて欲しいです^^
お願いします！
作ってみて分かったこと
横幅を設定する際に，『px』で書くのではなく，『%』，『rem』，『vw』など，相対的な単位を使うべきだと強く感じました！！
『px』を使うと幅の大きさが固定されてしまうため，スマートフォンなど画面が小さい端末で閲覧した際に，型崩れを起こしてしまいます．
ですので，横幅を設定する際は，相対的な単位を使うことを強くお勧めします！！
created by Rinker
パナソニック(Panasonic)
終わりに
今回は，初めて行った模写コーディングの結果などをご紹介しました．
まだまだ未完成な部分が多いので，後々修正していきます．
また，『模写コーディングNo.2』にも取り掛かろうと思います．
予定では，企業のホームページの模写コーディングに挑戦しようと考えています．
それでは・・・