ゆうき（ @BASEBALLY15 )です^^
最近，HTML・CSSについて勉強しています．
今回，2つ目の模写コーディングを行ったのでそのコード等をご紹介します．
（Visual Studio Codeを使用）
『模写コーディング』って何？
実際のWebサイトを見ながら，同じデザインのサイトを自分で作ることを言います．
初心者がHTMLやCSS，JavaScriptを勉強した後に，次の段階で行うことが多いです．
自分自身，HTMLとCSSの勉強を今までしてきて，どれくらい力が付いたのか確認したかったので，今回，模写コーディングを行うことにしました（2つ目）．
ちなみに，今回は以下のサイトを模写コーディングしました．
これから，模写コーディングのコードなどを紹介するのですが，大まかな流れを先にまとめておきます．
- 全体のコードを紹介（HTML→CSSの順で）
- HTMLのコードの解説（header→aside→main→footerの順番で）
- CSSのコードの解説（HTMLの解説と同じ順番で）
- レスポンシブ対応
解説は，コード内にコメントアウトという形で載せます．
それでは見ていきましょう⤵
模写コーディング～全体のコード（HTML・CSS）～
完成したものが以下の画像です．
今回2回目の模写コーディングということで，ほとんど開発者ツールを使わずに完成させました．
レスポンシブ対応前
この画像では，どこがヘッダーで，どこがメインで，どこがフッターなのかが分からないので，別々でも載せておきます．
ヘッダー
フッター
レスポンシブ対応
iPhone7で見た場合
それでは，コードを見ていきましょう⤵
HTML編
<!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="こちらは〇〇市唯一の歯を治療しないデンタルクリニックです．">
<link rel="stylesheet" href="style.css">
<!-- アイコン(font awesome) -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<title>Dental Clinic</title>
</head>
<body>
<!-- 上のボーダを書くために用意 -->
<div class="page-frame">
<div class="page">
<header class="page-header">
<div class="page-header-top">
<h1 class="page-title">
<a href="index.html">
<img src="./img/siteTitle.png" alt="サイトタイトル">
</a>
</h1>
<div class="phone-info">
<p>“地域に根付いた歯科医院” デンタル クリニック</p>
<div class="phone-number">
<i class="fas fa-phone"></i>
03-0000-0000
</div>
<div class="reserve-info">
予約受付時間 10:00～19:30
<span>日祝 休診</span>
</div>
</div>
</div>
<!-- ナビゲーション部分 -->
<nav class="header-nav">
<ul class="nav-ul">
<li class="nav-list">
<a href="#">
<p>トップページ</p>
<p>HOME</p>
</a>
</li>
<li class="nav-list">
<a href="#">
<p>医院紹介</p>
<p>CLINIC</p>
</a>
</li>
<li class="nav-list">
<a href="#">
<p>診療案内</p>
<p>SERVICE</p>
</a>
</li>
<li class="nav-list">
<a href="#">
<p>院長・スタッフ紹介</p>
<p>STAFF</p>
</a>
</li>
<li class="nav-list">
<a href="#">
<p>アクセス</p>
<p>ACCESS</p>
</a>
</li>
</ul>
</nav>
</header>
<!-- asideとmainを横並びにするために用意 -->
<div class="aside-main-flex">
<aside class="page-aside">
<ul class="aside-ul">
<li class="aside-list-1">
<div class="aside-title">
<h2>一般歯科</h2>
</div>
<ul class="aside-ul-info">
<li class="aside-list-info"><a href="#">虫歯治療</a></li>
<li class="aside-list-info"><a href="#">歯周病治療</a></li>
<li class="aside-list-info"><a href="#">入れ歯</a></li>
<li class="aside-list-info"><a href="#">予防歯科</a></li>
</ul>
</li>
<li class="aside-list-2">
<div class="aside-title">
<h2>審美歯科</h2>
</div>
<ul class="aside-ul-info">
<li class="aside-list-info"><a href="#">ホワイトニング</a></li>
<li class="aside-list-info"><a href="#">オールセラミック</a></li>
<li class="aside-list-info"><a href="#">セラミックインレー</a></li>
<li class="aside-list-info"><a href="#">PMTC</a></li>
</ul>
</li>
</ul>
</aside>
<main class="page-main">
<!-- 画像 -->
<a href="#" class="img-link">
<img src="img/in01.jpg" alt="img1" width="640" height="280">
</a>
<!-- 新着情報 -->
<div class="new-information">
<h2>新着情報</h2>
<div class="new-info-content">
<dl>
<dt>
<span class="date">2012年08月01日</span>
</dt>
<dd>
【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。
</dd>
<dt>
<span class="date">2012年07月24日</span>
</dt>
<dd>
【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。
</dd>
<dt>
<span class="date">2012年07月02日</span>
</dt>
<dd>
【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。
</dd>
<dt>
<span class="date">2012年06月20日</span>
</dt>
<dd>
【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。
</dd>
<dt>
<span class="date">2012年06月01日</span>
</dt>
<dd>
ホームページをリニューアルしました。
</dd>
</dl>
</div>
</div>
</main>
</div>
<footer class="page-footer">
<!-- ナビゲーションメニュー -->
<nav class="footer-nav">
<ul class="footer-ul">
<li><i class="far fa-circle"></i><a href="#">トップページ</a></li>
<li><i class="far fa-circle"></i><a href="#">医院紹介</a></li>
<li><i class="far fa-circle"></i><a href="#">診療案内</a></li>
<li><i class="far fa-circle"></i><a href="#">院長・スタッフ紹介</a></li>
<li><i class="far fa-circle"></i><a href="#">アクセス</a></li>
</ul>
</nav>
<div class="locate-info">
<span class="locate-name"> デンタル クリニック</span>
<span>東京都新宿区市谷左内町21-13</span>
<span>TEL:03-0000-0000</span>
</div>
<!-- copyright -->
<div class="copyright">
<small>
Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.
</small>
</div>
</footer>
</div>
</div>
</body>
</html>サイドバーにあるひし形のマークは『FontAwesome』を使っています．
SNS以外にも，色々なマークがあるので気に入ったものを使ってみて下さい^^
CSS編
/* リセットCSS */
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* ----------------------------------------------------------
---------------------------------------------------------- */
/* 全体 */
body{
text-align: center;
background: #F6F6F6;
color: #515151;
font-family: Verdana,Arial,Helvetica,'meirio','メイリオ','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ Pro W4',Osaka,'ＭＳ Ｐゴシック',sans-serif;
}
.page-frame{
border-top: 8px solid #6CC6C4;
}
.page{
margin: 0 auto 20px;
width: 920px;
}
/* ヘッダー */
.page-header-top{
display: flex;
justify-content: space-between;
}
.page-title{
margin-top: 55px;
}
.phone-info{
margin-top: 15px;
}
.phone-number{
margin-top: 25px;
font-size: 150%;
}
.phone-number i{
transform: scale(-1, 1);
}
.phone-info p{
font-size: 60%;
}
.reserve-info{
font-size: 40%;
border: solid 1px #D6D6D6;
margin-top: 10px;
padding: 10px 7%;
}
.reserve-info span{
color: red;
}
.header-nav{
}
.nav-ul{
display: flex;
margin-top: 20px;
}
.nav-ul .nav-list{
/* 親要素のサイズ内で長さ等を変更する */
box-sizing: border-box;
background: linear-gradient(rgb(156,227,225),rgb(108,198,196));
border-right: 1px solid #71C9C7;
border-left: 1px solid #99E1DF;
width: calc(100%/5);
}
.nav-ul .nav-list:hover{
background: linear-gradient(rgb(108,198,196),rgb(156,227,225));
}
.nav-ul .nav-list a{
font-size: 90%;
line-height: 1.5;
text-decoration: none;
color: #fff;
display: block;
padding: 15px 2%;
/* text-shadow: .5px .5px 1px rgb(92, 92, 92); */
font-weight: bold;
}
/* サイドバーとメイン */
.aside-main-flex{
display: flex;
justify-content: space-between;
margin-top: 20px;
}
/* サイドバー */
.aside-list-1,
.aside-list-2,
.aside-list-info{
list-style: none;
}
.page-aside{
width: 40%;
}
.aside-list-1,
.aside-list-2{
text-align: left;
}
.aside-list-1{
margin-bottom: 23px;
}
.aside-title{
background: linear-gradient(rgb(156,227,225),rgb(108,198,196));
padding: 10px 20% 10px 5%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.aside-title h2{
font-size: 1.1rem;
color: white;
}
.aside-ul-info{
border: 1px solid #6CC6C4;
background-color: white;
}
.aside-list-info:before{
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-right: 7%;
border: 1px solid #6CC6C4;
background-color: #6CC6C4;
transform: rotate(45deg);
/* 中心に持ってくる */
margin-bottom: 3px;
}
.aside-list-info{
padding-bottom: 10px;
border-bottom: 1px solid #6CC6C4;
margin: 15px 5%;
}
.aside-list-info a{
text-decoration: none;
color: black;
font-weight: bold;
}
.aside-list-info a:hover{
color: gold;
}
/* メイン */
/* 全体 */
.page-main{
margin-left: 2%;
}
/* 画像 */
.img-link{
width: 100%;
}
/* 新着情報 */
.new-information{
background-color: white;
text-align: left;
padding: 3%;
}
.new-information h2{
padding: 15px 0;
margin-bottom: 15px;
border-bottom: solid 3px #6CC6C4;
}
.new-info-content dl{
padding: 0 1.7% 10px 1.7%;
margin-bottom: 15px;
}
.new-info-content dt{
float: left;
padding: 10px 0;
font-weight: bold;
}
.new-info-content dd{
/* width: 67%; */
padding: 10px 2% 10px 28%;
margin:0;
font-size: small;
line-height: 1.3;
border-bottom: 1px #CCCCCC dotted;
}
/* フッター */
/* ナビゲーション部分 */
.page-footer{
margin-top: 10px;
}
.footer-ul{
display: flex;
flex-wrap: wrap;
background-color: #6CC6C4;
border-radius: 7px;
padding-left: 2%;
align-items: center;
}
.footer-ul li{
margin: 7px 2% 7px 0;
font-size: 0.8rem;
/* width: 30%; */
/* text-align: left; */
}
.fa-circle{
color: white;
/* margin-right: 7%; */
}
.footer-ul li a{
text-decoration: none;
color: white;
}
.footer-ul li a:hover{
border-bottom: 1px solid white;
}
.locate-info{
text-align: right;
margin: 20px 0;
font-size: 0.8rem;
}
.locate-name{
font-weight: bold;
}
/* copyright */
.copyright{
padding-top: 20px;
border-top: 2px solid #6CC6C4;
}
.copyright small{
font-size: 0.8rem;
}レスポンシブ対応
上で書いたCSSのコードの続きに書いていきます．
レスポンシブ対応を行うことでスマートフォンやタブレットなど，画面が小さい端末でも見やすくすることが出来ます！
/* レスポンシブ対応 */
/* タブレット版 */
@media (max-width:800px){
/* 全体 */
.page{
margin: 0;
width: auto;
}
/* ヘッダー */
.page-header-top{
display: block;
}
.page-title{
margin-top: 0;
}
.phone-info{
margin-top: 8px;
}
.phone-info p{
font-size: 60%;
}
.phone-number{
font-size: 140%;
margin-top: 15px;
margin-bottom: 15px;
}
.reserve-info{
display: inline;
font-size: 45%;
padding: 10px 4%;
}
/* ナビゲーション */
.nav-ul{
display: grid;
/* 1:1の割合で2列に並べる */
grid-template-columns: repeat(2,1fr);
width: auto;
}
.nav-ul .nav-list{
width: auto;
}
.header-nav,
.nav-ul{
border: none;
}
/* 角の曲線 */
.nav-ul .nav-list,
.nav-ul .nav-list a{
border-radius: 5px;
}
.nav-ul .nav-list a{
padding: 15px 2%;
}
/* サイドバーとメイン */
.aside-main-flex{
display: flex;
flex-direction: column;
margin-top: 20px;
padding-left: 2%;
padding-right: 2%;
}
/* サイドバー */
.page-aside{
order: 2;
width: 100%;
}
/* メイン */
/* 全体 */
.page-main{
order: 1;
margin: 0;
}
/* 画像 */
.img-link img{
width: 100%;
height: 100%;
}
/* 新着情報 */
.new-information{
margin-bottom: 40px;
}
.new-info-content dt{
float: unset;
}
.new-info-content dd{
/* 横のpaddingを0にする */
padding: 10px 0;
}
/* フッター */
/* ナビゲーション部分*/
.page-footer{
padding-left: 2%;
padding-right: 2%;
}
.footer-ul{
/* justify-content: space-around; */
text-align: left;
}
.footer-ul li{
margin-right: 5%;
}
.locate-info{
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.locate-info span{
line-height: 1.5;
}
/* copyright */
.copyright{
padding-bottom: 20px;
}
.copyright small{
font-size: 0.7rem;
}
}
/* ----------------------------------------------------------
---------------------------------------------------------- */
/* スマートフォン版 */
@media (max-width:600px){
/* フッター */
.footer-ul li{
margin-right: 10%;
}
}今回の記事で理解できない箇所などありましたら，気軽に下にある『Q&A』で質問して頂けるとありがたいです^^
Q&A以外にも，コメント欄やTwitterでも対応しています！
また，「もっと，こうした方がいいよ！」といったアドバイスなどあれば，教えて欲しいです^^
お願いします！
作ってみて分かったこと
ヘッダー部分では，レスポンシブ対応の際のナビゲーションで『grid』と使うことで，横幅に合わせてリストの表示を変えることが出来るということが分かりました（レスポンシブ対応のコードの37行目から42行目）．
また．『order』を使うことで，Flexbox化したサイドバーとメインの並びを簡単に変更することが出来るということも分かりました（レスポンシブ対応のコードの71行目と79行目）．
もう一つ，全体の横幅はあらかじめ『width:920px』（CSSのコードの119行目）といった感じで指定しておくことをオススメします！
指定していないと，画面のサイズによって横幅が無駄に広がってしまいます．
created by Rinker
パナソニック(Panasonic)
終わりに
今回は，2つ目の模写コーディングを行いました．
前回の模写コーディングとは異なり，開発者ツールをほとんど見ずに完成させたので，かなり力が付いていると実感することが出来ました．
次回は，HikoProさんが紹介されている，中級のLPサイトの模写コーディングに挑戦します！
それでは・・・