【たったこれだけで簡単に爆速成長します】オススメ駆け出し模写 〜前編（PCサイズ）〜
皆さんこんにちは！
Web制作事業部部長＆大学生のだいすけです！
簡単に私の自己紹介をさせていただくと、
・学習4ヶ月目で制作案件獲得
・学生であり株式会社の部長
・スキルなしの友人を1ヶ月で立派なコーダーへと教育
と、いった感じですね！
僕は教えることに自信があり、必要なことのみを教えるので、
爆速で立派なコーダーへと成長させることが出来ます！
それではよろしくお願いします！
⇩本題へGOです！！！！！⇩
「Progate終わったけどここから何をすればいいの？」「模写ってやつをしてみたいけどどれがいいかわからない」「簡単かつ爆速で成長できる模写が欲しい！」というあなたに朗報です！
今回は僕も体験したその悩みを解決するために、
『簡単に最強になれる模写』
を制作させていただきました！
これはお知らせなのですが、
もしどうしてもわからないところができたら、
すぐに私にTwitter等のDMで質問してきてくださいね！👌
あなたの時間を奪わないためにも導入も短くしておきますね！
それでは早速模写の完成形をチェックしていきましょう！↓↓↓
都合上画像の画素が少し荒くなりなしたが、全然問題はないので大丈夫です！
ぱっと見実際にありそうなデザインにしてみました！
今回はこのコーポレートサイトのコーディング解説をしていきます！
[0]環境構築
一番はじめは環境構築からですね。
環境構築が既に終わっている人は次のセクションの
[1]headerに飛んでください！👋
〔準備するもの〕
・テキストエディタ（VSCode、Atom等）
・ブラウザ（Google Chrome推奨）
・デザインカンプ（完成版のお手本）↓↓↓
・サイトに使う好きな画像
・フォルダ（デスクトップ上でもどこでも作ってください）の中に
・index.htmlファイル
・style.cssファイル
・reset.cssファイル
・img（このフォルダの中に画像を入れてください）
↓このような感じになればOKです！
（※今回は画像とわかりやすくするために、「img1」のようにしていますが、画像の名前はしっかりとしたものをつけましょう！🙌）
↓こちらがindex.htmlに最初に入力コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>駆け出し模写 〜中級編〜</title>
</head>
<body>
<!--ここにセクション[1]〜[7]のコードを入力してください-->
</body>
</html>（※この<body>の中に[1]headerからのコードを記入します。）
↓こちらがreset.cssに記入するコードです。
/*
http://html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
*, *:after, *:before {
box-sizing: border-box;
}
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, li {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
a {
text-decoration: none;
color: inherit;
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
a:visited {
color: inherit;
}
/* 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; }
/*# sourceMappingURL=http://reset.css.map */reset.cssを簡単に説明すると、記載されていないpaddingやmarginを
消してくれるという効果があります。
（※reset.cssにはこの先何も入力しないので放置で大丈夫です。）
[1]header
headerはここの部分に当たります。↓
これらのコーディング手順は、
①HTMLで必要な要素を書きこむ。（会社名、ナビリスト）
②CSSでheaderの高さと横幅決める。
③CSSでFlexboxを使って、[会社名とナビリスト]と[ナビリスト内の要素]を横並びにする。
④marginを使って両脇とナビリストの間隔を空ける。
⑤headerの背景を透過させる。
※⑥headerを一番上に固定させる。
（この工程は今すると効果がわかりにくいので、[2]のmainvisualが終わったら書いてみましょう！）
ざっとこのくらいですね！
初めてのポイントは⑤の背景の透過とかですかね！
1つ1つ解説したheaderのHTML、CSSコード全体を載せておきます！↓
[HTML]
<!--header-->
<header class="header">
<div class="header-width">
<h1>株式会社 Nature Forest</h1>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="globalMenuSp">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">Q＆A</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>[CSS]
/*----------------------*/
/*------header---------*/
/*----------------------*/
.header {
position: absolute; /*位置を固定*/
width: 100%; /*横幅を100％に*/
z-index: 5;/*z軸を手前に5*/
background: none; /*背景色を無しに*/
}
.header .header-width {
display: flex; /*Flexboxを使う*/
justify-content: space-between; /*要素同士の横の間隔を均等に空ける*/
align-items: center; /*要素同士の縦の中央寄せ*/
height: 70px; /*高さを70pxに指定*/
width: 85%;
margin: 0 auto; /*「.header-width」の中央寄せ*/
}
.header nav li a:hover {
border-bottom: 3px solid skyblue; /*3pxの空色の直線の下線*/
border-radius: 2px; /*要素の囲み線に丸みを*/
transition: 0.5s; /*動作から動作までの時間指定*/
}
.header ul li {
margin-left: 40px; /*右に余白40px*/
color: white; /*文字の色を白に*/
font-size: 1.4rem; /*文字の大きさを1.4remに指定*/
}
.header h1 {
font-weight: bold; /*文字の太さを指定*/
font-size: 1.9rem;
color: white;
font-family: cursive; /*文字の書体を指定*/
}<span>等の部分を記入する意味が今は謎かもしれませんが、
レスポンシブ（携帯画面サイズに適応）させる時に理解できるので、
今は気にしなくて大丈夫です！🙆♂️
別のサイトを制作する際はこちらのコードをコピペしまくってOKです！
時短になるのでお好きなようにいじって使い回し必須ですね😌
[2]mainvisual
mainvisual（メインビジュアル）はこの部分に当たります。↓
これらのコーディング手順は、
①HTMLで中央の文字を書き込みます。
②CSSで背景画像、高さ、横幅、文字の大きさ、文字の中央寄せをする。
mainvisualでやることはたったこの2ステップだけですね。
1つ1つ解説したmainvisusalのHTML、CSSコード全体を載せておきます！↓
[HTML]
<!--mainvisual-->
<section class="mainvisual">
<h2>私たちの未来は、<br>人と森で繋がり生きる</h2>
</section>[CSS]
/*mainvisual*/
.mainvisual {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /*【重要】高さを画面いっぱいに指定*/
background-image: url(img/img1.jpg); /*背景画像の指定*/
background-size: cover; /*背景画像の大きさを指定*/
background-position: bottom; /*背景画像の表示させる位置を指定*/
}
.mainvisual h2 {
font-size: 4rem;
color: white;
text-align: center; /*要素の横の中央寄せ*/
}こちらもFlexboxを使うので慣れていきましょう😌
ここまで来たら1度、[1]のheaderの⑥に戻ってから先に進みましょう！
[3]ABOUT
ABOUTはこの部分に当たります。↓
これらのコーディング手順は、
①HTMLで必要な要素を書きこむ。（会社名、ナビリスト）
②CSSで横幅と縦の間隔を空ける。
③Flexboxで要素のグループを縦と横で並べる。
ここも簡単3ステップですね。
[HTML]
<!--about-->
<section class="about">
<h2>ABOUT</h2>
<article>
<img src="img/img2.jpg">
<P>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</P>
</article>
</section>[CSS]
/*about*/
.about {
padding-top: 100px; /*上部に100pxの余白*/
padding-bottom: 100px; /*下部に100pxの余白*/
font-family: 'Times New Roman', Times, serif;
}
.about h2 {
font-size: 4rem;
text-align: center;
margin-bottom: 50px;
}
.about article {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 85%;
margin: 0 auto;
}
.about img {
width: 45%;
}
.about p {
width: 45%;
font-size: 2rem;
line-height: 40px; /*行間の指定*/
}ここまででFlexboxを使う感覚に慣れておきましょう。
基本Flexboxが使えると要素の配置には困ることはありませんからね😌
[4]grid-zone
grid-zoneはこの部分に当たります。↓
これらのコーディング手順は、
①gridの特徴と使い方を学んで実施する
これだけです。
このgridを使ってできることは、
・均等に綺麗に配置できる
・画面幅を狭くしても、画像の幅を保ったまま自動で調節してくれるので、レスポンシブの際かなり便利になる
と、いったところです。
[HTML]
<!--grid-zone-->
<section class="grid-zone">
<div class="grid">
<div class="item">
<img src="img/img3.jpg" alt="">
<h3>〜ダミータイトル〜</h3>
</div>
<div class="item">
<img src="img/img4.jpg" alt="">
<h3>〜ダミータイトル〜</h3>
</div>
<div class="item">
<img src="img/img5.jpg" alt="">
<h3>〜ダミータイトル〜</h3>
</div>
<div class="item">
<img src="img/img6.jpg" alt="">
<h3>〜ダミータイトル〜</h3>
</div>
<div class="item">
<img src="img/img7.jpg" alt="">
<h3>〜ダミータイトル〜</h3>
</div>
<div class="item">
<img src="img/img8.jpg" alt="">
<h3>〜ダミータイトル〜</h3>
</div>
</div>
</section>[CSS]
/*grid-zone*/
.grid-zone {
width: 85%;
margin: 0 auto;
padding-bottom: 200px;
font-family: 'Times New Roman', Times, serif;
}
.grid-zone .grid {
display: grid; /*グリッドを使う*/
gap: 26px; /*グリッドアイテム（画像）同士間の余白を指定*/
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/*画面幅を小さくしてもグリッドアイテムの幅を最小300pxに保ち、自動で全て比率が1になるように指定*/
margin-top: 6%;
margin-bottom: 50px;
}
.grid-zone .grid img {
width: 100%;
height: 250px;
}
.grid-zone h3 {
text-align: center;
font-size: 1.2rem;
margin-top: 5px;
}（※）
実際に自分で使ってみるとその便利さに感動しちゃうかもですね😌
[5]after-nav
after-navはこの部分に当たります。↓
これらのコーディング手順は、
①HTMLで必要な要素を書きこむ。（会社概要、お知らせ、求人募集それぞれのブロックなど）
②横幅とそれぞれのブロックの縦を調節する。
（「左側のブロックの高さ＝右上側の高さ＋右下側の高さ」になるように気をつけてください🙌）
③それぞれのブロックに黒フィルターをかける。
④hoverを使って黒フィルターの上にカーソルを持ってきた時の動作を付けてあげる。
⑤最後にtransitionを使って④の部分を自然な動きに変えてやる。
[HTML]
<!--after-nav-->
<section class="after-nav">
<article class="after-nav-left">
<a href="#" class="bg">
<h3>会社概要</h3>
</a>
</div>
</article>
<article class="after-nav-column">
<div class="after-nav-top">
<a href="#" class="bg">
<h3>お知らせ</h3>
</a>
</div>
<div class="after-nav-bottom">
<a href="#" class="bg">
<h3>求人募集</h3>
</a>
</div>
</article>
</section>[CSS]
/*after-nav*/
.after-nav {
display: flex;
flex-direction: row; /*子要素を横並びに*/
width: 100%;
padding-bottom: 100px;
font-family: 'Times New Roman', Times, serif;
}
.after-nav h3 {
font-size: 2rem;
color: whitesmoke;
}
.after-nav .after-nav-left {
width: 50%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/after-nav-left.png);
background-size: cover;
transition: 0.5s;
}
.after-nav .after-nav-column {
display: flex;
flex-direction: column;
width: 50%;
height: 400px;
}
.after-nav .after-nav-column .after-nav-top {
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/after-nav-top.png);
background-size: cover;
transition: 0.5s;
}
.after-nav .after-nav-column .after-nav-bottom {
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/after-nav-bottom.png);
background-size: cover;
transition: 0.5s;
}
/*黒フィルター*/
.bg {
background-color: rgba(0, 0, 0, 0.3); /*色を黒に指定し、透過度を0.3に指定*/
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.bg:hover {
background-color: rgba(0, 0, 0, 0.1);
}この工程の目玉はやはり、「黒フィルターとその部分のhover」ですね👍
黒フィルターはちょっとしたコツがいりますが、出来ると一気に
サイトの雰囲気がかっこよくなるので是非チェックですね。
↓もみじろくさんのこちらのサイトがかなり参考になります🥳
hoverは、簡単に言うと、
「カーソルを乗せてあげると動作が起きるやつ」
ですね。
↓hoverに関してはこちらのサイトが参考になります🥳
[6]footer
footerはこの部分に当たります。↓
（※「SNSボタン」のところは次の[5]のパートで行います。）
これらのコーディング手順は、
①HTMLで必要な要素を書きこむ。
（会社名、フッターナビリスト、コピーライト）
②Flexboxを使ってそれぞれの<ul>の中身の<li>達を縦並びに、<ul>の塊を横並びにして、等間隔にする。
③全体の余白を調整する。
[HTML]
<!--footer-->
<footer class="footer">
<h2>株式会社 Nature Forest</h2>
<article>
<ul>
<a href="#">
<li class="list-title">ダミータイトル1</li>
</a>
<a href="#">
<li>ダミーテキスト1</li>
</a>
<a href="#">
<li>ダミーテキスト1</li>
</a>
<a href="#">
<li>ダミーテキスト1</li>
</a>
<a href="#">
<li>ダミーテキスト1</li>
</a>
<a href="#">
<li>ダミーテキスト1</li>
</a>
</ul>
<ul>
<a href="#">
<li class="list-title">ダミータイトル2</li>
</a>
<a href="#">
<li>ダミーテキスト2</li>
</a>
<a href="#">
<li>ダミーテキスト2</li>
</a>
<a href="#">
<li>ダミーテキスト2</li>
</a>
<a href="#">
<li>ダミーテキスト2</li>
</a>
</ul>
<ul>
<a href="#">
<li class="list-title">ダミータイトル3</li>
</a>
<a href="#">
<li>ダミーテキスト3</li>
</a>
<a href="#">
<li>ダミーテキスト3</li>
</a>
<a href="#">
<li>ダミーテキスト3</li>
</a>
<a href="#">
<li>ダミーテキスト3</li>
</a>
<a href="#">
<li>ダミーテキスト3</li>
</a>
<a href="#">
<li>ダミーテキスト3</li>
</a>
</ul>
<ul>
<a href="#">
<li class="list-title">ダミータイトル4</li>
</a>
<a href="#">
<li>ダミーテキスト4</li>
</a>
<a href="#">
<li>ダミーテキスト4</li>
</a>
<a href="#">
<li>ダミーテキスト4</li>
</a>
<a href="#">
<li>ダミーテキスト4</li>
</a>
</ul>
</article>
<!--ここには「SNSボタン」のHTMLコードが入ります。-->
</footer>
<!--copy-right-->
<p class="copy-right"><small>© 2020 STYLE&. KidoDaisuke</small></p>[CSS]
/*footer*/
.footer {
width: 85%;
margin: 0 auto;
padding-bottom: 0px;
}
.footer h2 {
font-size: 2.3rem;
margin-bottom: 40px;
}
.footer article {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
font-family: 'Times New Roman', Times, serif;
padding-bottom: 130px;
}
.footer ul {
display: flex;
flex-direction: column;
justify-content: center;
width: 25%;
}
.footer .list-title {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 30px;
padding-bottom: 5px;
border-bottom: 2px solid black;
width: 160px;
}
.footer li {
margin-bottom: 20px;
}
/*copyright*/
.copy-right {
width: 100%;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.copy-right small {
color: white;
}これもよくコーポレートサイトで目にしますよね😌
よく見るやつから身につけていけば、自然と実案件をこなせるレベルまで
成長することが出来ます！✊🔥
[7]SNSボタン
SNSボタンはこの部分に当たります。↓
これらのコーディング手順は、
①HTMLで必要な要素を書きこむ。
（FontAwesomeからアイコンを持ってくる）
②Flexboxを使ってそれぞれのアイコンを横並びにして、等間隔にする。
③CSSで丸型に＋hoverをつける。
（自作でなくてもググれたらよし。）
④全体の余白を調整する。
[HTML]
<!--sns-->
<section class="sns">
<a href="https://twitter.com/daipro777" class="btn-social-circle btn-social-circle--twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/profile.php?id=100045033095827" class="btn-social-circle btn-social-circle--facebook">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="btn-social-circle btn-social-circle--instagram">
<i class="fab fa-instagram"></i>
</a>
</section>[CSS]
/*sns*/
.sns {
padding-bottom: 100px;
width: 270px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.sns .btn-social-circle {
display: inline-block;
position: relative;
box-sizing: border-box; /*paddingとborderを高さや幅に含めて指定*/
text-decoration: none; /*文字の装飾を行わない*/
color: #FFF;
width: 70px;
height: 70px;
line-height: 50px;
padding: 5px;
font-size: 25px;
border-radius: 50%;
text-align: center;
font-weight: bold;
box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18);
/*ブロックに影をつける*/
transition: .2s;
}
.sns .btn-social-circle .fa {
line-height: 30px;
}
.sns .btn-social-circle:hover {
box-shadow: none; /*影をhover時に消す*/
}
.sns .btn-social-circle--twitter {
background: #1da1f3;
border: solid 5px #1da1f3;
}
.sns .btn-social-circle--facebook {
background: #3b75d4;
border: solid 5px #3b75d4;
}
.sns .btn-social-circle--instagram {
background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
border: solid 5px #ef4d4d;
}SNSボタンのデザインをサイトの雰囲気に合わせることはかなり重要なので、ボタンデザイン集のようなサイトはブックマークしておきましょう！
↓こちらのサルワカさんのサイトはブックマーク必須です👍
いかがだったでしょうか？
たったこの7つのステップで簡単なコーポレートサイトが作れちゃいます。
PC幅のWebサイトで怖いのはもうないですね😌
お疲れ様でした！😆
前編のPC版のコーディングはこれで完了です！
次回の後編では、レスポンシブ編に進んでいきたいと思います！
レスポンシブは僕が1ヶ月も悩んで困って、自力で解決出来たという、
「レスポンシブで悩んでいる人のための教材」
を制作します！
徹底的にわかりやすくレスポンシブを解説＆今回のサイトを
実際にレスポンシブ化していきます！🔥✊
次回の『後編（レスポンシブ編）』でまたお会いしましょう！✨
この記事が気に入ったらサポートをしてみませんか？