【Web制作独学】写経用サイトを無料公開します【完全初心者向け】
こんにちは、シュンです。
「Progateやドットインストールで学習後、いざ１から自分でコーディングしてみようと思っても、全く手が動かない・・・」
こういった経験ありませんか？
基礎学習を終え、いきなり模写に移ろうとする人いますが、正直それはおすすめしません。
まずは「写経」をして、コーディングの流れを掴みましょう。
とは言え、「写経用のコードはどこから探せばいいですか？」という声が聞こえてきそうなので、今回はそういった方向けに「写経用サイト」を作りました。
▼今回作るのは、下記のようなコーポレートサイトのTOPページです。
よくありがちな構成ですね。
上記のサイトがすらすら作れるようになったら、初心者脱出です！
■ こういった方向け
・ProgateでHTML,CSSを一通り学んだ方
・写経用サイトを探している方
・模写コーディングで行き詰まっている方
なお、コーディング中級〜上級者にとっては、読んでもあまり価値はないと思いますので、ご了承ください。
■ 本記事を読むメリット
・コーディングのイメージが掴める
・模写がスムーズにできるようになる
■注意点
・レスポンシブ対応はしていません。
・Bootstrap、Sassは使用していません。
・アニメーションは実装していません。
なお、自走力を身に付けるためにも、分からない部分があったら自分で調べることを心がけてください。
これを踏まえた上で、早速見ていきましょう！
▼まずは、全体の手順をご覧ください。
・手順①：コーディング準備
・手順②：全体構造の実装
・手順③：ヘッダーの実装
・手順④：メインビジュアルの実装
・手順⑤：ABOUTの実装
・手順⑥：NEWSの実装
・手順⑦：WORKSの実装
・手順⑧：ACCESSの実装
・手順⑨：CONTACTの実装
・手順⑩：フッターの実装
上記の手順に沿って、解説していきます。
それでは、スタートです！
■手順①：コーディング準備
1. お好きな名前で、フォルダを準備します。
2. index.html、style.css、imagesフォルダを作成。
※imagesフォルダの中には、お好きなフリー画像を入れてください。
フリー画像をダウンロードする際は、「O-DAN」というサイトがおすすめです。
3.VSCodeを用意しましょう。
VSCodeのインストールがまだの方は、下記のサイトから「今すぐダウンロード」をクリックして、インストールできます。
4.作ったフォルダを、VSCodeにドラッグ＆ドロップ！
これでコーディング準備が完了です。
それでは、さっそくコーディングに入ります！
■手順②：全体構造の実装
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>写経用コード</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>@charset "UTF-8";
/* ------------------------------------------------
* 全体構造
-------------------------------------------------- */
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #4a4a4a;
line-height: 1.5;
background-color: #fff;
}
h1,h2,h3,h4 {
margin: 0;
padding: 0;
font-weight: bold;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 28px;
text-align: center;
}
h3 {
font-size: 18px;
text-align: center;
}
p, a {
margin: 0;
padding: 0;
font-size: 18px;
color: #4a4a4a;
}
a {
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.inner {
padding: 70px 50px;
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.line {
background-color: #4a4a4a;
width : 55px;
height : 1px;
margin : 30px auto 60px;
}今の時点では、ここはお決まりのものと覚えていただければOKです。
手順③からは、<body></body>の中に、コードを書いていきます。
■手順③：ヘッダーの実装
↑
この部分ですね。
コードがこちら。
<!------------------------------------------------
* ヘッダー
-------------------------------------------------->
<header>
<div class="inner">
<h1>株式会社Practice</h1>
<nav>
<ul>
<li>ABOUT</li>
<li>NEWS</li>
<li>WORKS</li>
<li>ACCESS</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>/* ------------------------------------------------
* ヘッダー
-------------------------------------------------- */
header {
height: 10vh;
background-color: #343a40;
color: #fff;
}
header .inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 100%;
max-width: 980px;
margin: 0 auto;
}
header ul {
display: flex;
}
header li {
padding: 0 20px;
}ここでのポイントは、「Flexboxを使って横並びにする」こと。
Flexboxは実務でもめちゃくちゃ使いますので、ここでしっかり抑えておきましょう。
▼おすすめ記事はこちら。
■手順④：メインビジュアルの実装
↑
この部分です。
コードがこちら。
<!------------------------------------------------
* メインビジュアル
-------------------------------------------------->
<section class="mainvisual">
<h2>SEOに強い<br>田舎のWeb制作会社</h2>
</section>/* ------------------------------------------------
* メインビジュアル
-------------------------------------------------- */
.mainvisual {
height: 80vh;
background-image: url(images/mainvisual_bg.jpeg);
background-size: cover;
background-position: center;
position: relative;
}
.mainvisual::before{
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.mainvisual h2 {
text-align: center;
color: #fff;
font-size: 42px;
font-weight: bold;
line-height: 2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}ここでのポイントは、２つ。
・背景画像を暗くする
・文字を真ん中にする
背景画像を暗くしているのは、この部分です。
.mainvisual::before{
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}このように、「擬似要素」というものを使って実装しています。
簡単に言うと、背景画像にもう一枚、黒い画像を重ねているイメージです。
（※擬似要素を使うときは、content: ' '; を使わないと、中身がないと見なされて表示されなくなってしまいます。）
もう一つのポイントは、真ん中に文字を持ってくること。
こちらですね。
↓
.mainvisual h2 {
・
・
・
・
・
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}position: relative;を指定した親要素を起点に、上から50%、左から50%の位置に文字を持ってきています。しかし、それだけだとズレが生じるため、transformでズレを補正しています。
▼こちらの記事が参考になります。
■手順⑤：ABOUTの実装
↑
この部分です。
コードがこちら。
<!------------------------------------------------
* ABOUT
-------------------------------------------------->
<section class="about">
<div class="inner">
<h2>ABOUT</h2>
<div class="line"></div>
<p>
株式会社Practiceは埼玉県を拠点とした、<br>
SEOに強いWeb制作会社です。<br>
検索で上位表示させたい、売り上を上げたいなど、<br>
様々な要望にお応えします。<br>
Webの知識が全くない方でもスタッフが丁寧にサポートしますので、<br>
お気軽にお問い合わせください。
</p>
</div>
</section>/* ------------------------------------------------
* ABOUT
-------------------------------------------------- */
.about {
background-color: #e2e4e4;
}
.about p {
line-height: 2.5;
}<div class="line"></div>によって、この部分を実装しています。
スタイルは、「全体構造」に記述しています。
↓
.line {
background-color: #4a4a4a;
width : 55px;
height : 1px;
margin : 30px auto 60px;
}■手順⑥：NEWSの実装
↑
この部分です。
コードがこちら。
<!------------------------------------------------
* NEWS
-------------------------------------------------->
<section class="news">
<div class="inner">
<h2>NEWS</h2>
<div class="line"></div>
<ul>
<li><a href="#"><span>2020.09.22</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.09.24</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.09.28</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.10.03</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.10.12</span>xxxxxxxxxxxxxxxxxxx</a></li>
</ul>
<a href="#" class="news-btn">NEWS一覧</a>
</div>
</section>/* ------------------------------------------------
* NEWS
-------------------------------------------------- */
.news .inner {
text-align: left;
}
.news ul {
margin-bottom: 80px;
}
.news li {
border-bottom: 1px dotted #ccc;
padding: 5px 0;
}
.news li span {
margin-right: 30px;
}
.news-btn {
display: block;
width: 150px;
text-align: center;
color: #4a4a4a;
background-color: #e2e4e4;
font-size: 16px;
margin: 0 auto;
padding: 10px 0;
border: 1px solid #4a4a4a;
border-radius: 5px;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.news-btn:hover {
opacity: 0.7;
}こちらも、コーポレートサイトによくありがちなやつですね。
一つ作ってしまえば、そのコードをコピペして違うサイトでも使えたりするので、効率的です。
■手順⑦：WORKSの実装
↑
この部分です。
コードがこちら。
<!------------------------------------------------
* WORKS
-------------------------------------------------->
<section class="works">
<div class="inner">
<h2>WORKS</h2>
<div class="line"></div>
<div class="works-box">
<!-- １列目 -->
<div class="works-card-wrapper">
<div class="works-card">
<img src="images/gym.jpeg" alt="ジム">
<h3>Fitness Gym</h3>
</div>
<div class="works-card">
<img src="images/bar.jpeg" alt="バー">
<h3>Bar</h3>
</div>
<div class="works-card">
<img src="images/cafe.jpeg" alt="カフェ">
<h3>Cafe</h3>
</div>
</div>
<!-- ２列目 -->
<div class="works-card-wrapper">
<div class="works-card">
<img src="images/coworking_space.jpeg" alt="コワーキングスペース">
<h3>Coworking Space</h3>
</div>
<div class="works-card">
<img src="images/dance_studio.jpeg" alt="ダンススタジオ">
<h3>Dance Studio</h3>
</div>
<div class="works-card">
<img src="images/online_business.jpeg" alt="オンラインビジネス">
<h3>Online Business</h3>
</div>
</div>
</div>
</div>
</section>/* ------------------------------------------------
* WORKS
-------------------------------------------------- */
.works {
background-color: #e2e4e4;
}
.works-card-wrapper {
display: flex;
justify-content: space-between;
}
.works-card-wrapper:last-child {
margin-top: 30px;
}
.works-card {
width: 30%;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.works-card img {
width: 100%;
height: 150px;
object-fit: cover;
}
.works h3 {
padding: 10px;
}こちらも、Flexboxで横並びにしています。
また、下記の部分は「擬似クラス」というものを使っています。
.works-card-wrapper:last-child {
margin-top: 30px;
}要するに、「特定の要素に、特定のスタイルを当てる」といった感じです。
▼詳しくは、こちらの記事をどうぞ。
■手順⑧：ACCESSの実装
↑
この部分です。
コードがこちら。
<!------------------------------------------------
* ACCESS
-------------------------------------------------->
<section class="access">
<div class="inner">
<h2>ACCESS</h2>
<div class="line"></div>
<!-- Googleマップ埋め込み -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12926.619811374987!2d139.615100022774!3d35.90646556255685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018c143cc2c5285%3A0x280f665a32e5d413!2z5aSn5a6u6aeF!5e0!3m2!1sja!2sjp!4v1600399700046!5m2!1sja!2sjp" width="100%" height="300px" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</section>/* ------------------------------------------------
* ACCESS
-------------------------------------------------- */
.access {
background-color: #fff;
}こちらに関しては、Googleマップを埋め込んでいます。
▼埋め込み方法は、こちら。
■手順⑨：CONTACTの実装
↑
この部分です。
コードがこちら。
<!------------------------------------------------
* CONTACT
-------------------------------------------------->
<section class="contact">
<div class="inner">
<h2>CONTACT</h2>
<div class="line"></div>
<form id="contact-form" action="">
<label for="form-name">お名前</label>
<p><input id="form-name" type="text" name="" placeholder="入力してください" required=""></p>
<label for="form-mail">メールアドレス</label>
<p><input id="form-mail" type="email" name="" placeholder="入力してください" required=""></p>
<label for="form-detail">お問い合わせ内容</label>
<p><textarea id="form-detail" name="" placeholder="入力してください" required=""></textarea></p>
<p><button type="submit" class="contact-btn" name="button" value="送信">送信</button></p>
</form>
</div>
</section>/* ------------------------------------------------
* CONTACT
-------------------------------------------------- */
.contact {
background-color: #e2e4e4;
}
input {
width: 600px;
padding: 10px 0;
margin-bottom: 30px;
}
textarea {
width: 600px;
padding: 5px 0 120px 0;
margin-bottom: 30px;
}
.contact-btn {
width: 150px;
color: #fff;
background-color: rgb(71, 189, 236);
font-size: 16px;
padding: 10px 0;
border: 1px solid #333;
border-radius: 5px;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.contact-btn:hover {
opacity: 0.7;
}<form>タグは、入力フォームを作る際に使います。
「テキスト入力」「セレクトボックス・ラジオボタン」「チェックボックス」「送信ボタン」などを配置することができ、入力データはPHPやRubyを使って処理をします。
※今回は、HTML,CSSだけで作っているので入力データは処理されません。
▼Googleフォームを埋め込むこともできるので、簡単にお問い合わせフォームを作りたい方はこちらの記事をご覧ください。
■手順⑩：フッターの実装
↑
最後に、フッターです。
コードはこちら。
<!------------------------------------------------
* フッター
-------------------------------------------------->
<footer>
<p><small>©️2020 株式会社Practice</small></p>
</footer>/* ------------------------------------------------
* フッター
-------------------------------------------------- */
footer {
background-color: #4a4a4a;
text-align: center;
}
footer p {
color: #fff;
padding: 20px 0;
}以上。
シンプルなコーポレートサイトの完成です！
一応、完成版のコードも載せておきますね。
↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>写経用コード</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!------------------------------------------------
* ヘッダー
-------------------------------------------------->
<header>
<div class="inner">
<h1>株式会社Practice</h1>
<nav>
<ul>
<li>ABOUT</li>
<li>NEWS</li>
<li>WORKS</li>
<li>ACCESS</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<!------------------------------------------------
* メインビジュアル
-------------------------------------------------->
<section class="mainvisual">
<h2>SEOに強い<br>田舎のWeb制作会社</h2>
</section>
<!------------------------------------------------
* ABOUT
-------------------------------------------------->
<section class="about">
<div class="inner">
<h2>ABOUT</h2>
<div class="line"></div>
<p>
株式会社Practiceは埼玉県を拠点とした、<br>
SEOに強いWeb制作会社です。<br>
検索で上位表示させたい、売り上を上げたいなど、<br>
様々な要望にお応えします。<br>
Webの知識が全くない方でもスタッフが丁寧にサポートしますので、<br>
お気軽にお問い合わせください。
</p>
</div>
</section>
<!------------------------------------------------
* NEWS
-------------------------------------------------->
<section class="news">
<div class="inner">
<h2>NEWS</h2>
<div class="line"></div>
<ul>
<li><a href="#"><span>2020.09.22</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.09.24</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.09.28</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.10.03</span>xxxxxxxxxxxxxxxxxxx</a></li>
<li><a href="#"><span>2020.10.12</span>xxxxxxxxxxxxxxxxxxx</a></li>
</ul>
<a href="#" class="news-btn">NEWS一覧</a>
</div>
</section>
<!------------------------------------------------
* WORKS
-------------------------------------------------->
<section class="works">
<div class="inner">
<h2>WORKS</h2>
<div class="line"></div>
<div class="works-box">
<!-- １列目 -->
<div class="works-card-wrapper">
<div class="works-card">
<img src="images/gym.jpeg" alt="ジム">
<h3>Fitness Gym</h3>
</div>
<div class="works-card">
<img src="images/bar.jpeg" alt="バー">
<h3>Bar</h3>
</div>
<div class="works-card">
<img src="images/cafe.jpeg" alt="カフェ">
<h3>Cafe</h3>
</div>
</div>
<!-- ２列目 -->
<div class="works-card-wrapper">
<div class="works-card">
<img src="images/coworking_space.jpeg" alt="コワーキングスペース">
<h3>Coworking Space</h3>
</div>
<div class="works-card">
<img src="images/dance_studio.jpeg" alt="ダンススタジオ">
<h3>Dance Studio</h3>
</div>
<div class="works-card">
<img src="images/online_business.jpeg" alt="オンラインビジネス">
<h3>Online Business</h3>
</div>
</div>
</div>
</div>
</section>
<!------------------------------------------------
* ACCESS
-------------------------------------------------->
<section class="access">
<div class="inner">
<h2>ACCESS</h2>
<div class="line"></div>
<!-- Googleマップ埋め込み -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12926.619811374987!2d139.615100022774!3d35.90646556255685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018c143cc2c5285%3A0x280f665a32e5d413!2z5aSn5a6u6aeF!5e0!3m2!1sja!2sjp!4v1600399700046!5m2!1sja!2sjp" width="100%" height="300px" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</section>
<!------------------------------------------------
* CONTACT
-------------------------------------------------->
<section class="contact">
<div class="inner">
<h2>CONTACT</h2>
<div class="line"></div>
<form id="contact-form" action="">
<label for="form-name">お名前</label>
<p><input id="form-name" type="text" name="" placeholder="入力してください" required=""></p>
<label for="form-mail">メールアドレス</label>
<p><input id="form-mail" type="email" name="" placeholder="入力してください" required=""></p>
<label for="form-detail">お問い合わせ内容</label>
<p><textarea id="form-detail" name="" placeholder="入力してください" required=""></textarea></p>
<p><button type="submit" class="contact-btn" name="button" value="送信">送信</button></p>
</form>
</div>
</section>
<!------------------------------------------------
* フッター
-------------------------------------------------->
<footer>
<p><small>©️2020 株式会社Practice</small></p>
</footer>
</body>
</html>@charset "UTF-8";
/* ------------------------------------------------
* 全体構造
-------------------------------------------------- */
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #4a4a4a ;
line-height: 1.5;
background-color: #fff ;
}
h1,h2,h3,h4 {
margin: 0;
padding: 0;
font-weight: bold;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 28px;
text-align: center;
}
h3 {
font-size: 18px;
text-align: center;
}
p, a {
margin: 0;
padding: 0;
font-size: 18px;
color: #4a4a4a;
}
a {
text-decoration: none;
}
a:hover {
opacity: 0.7;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.inner {
padding: 70px 50px;
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.line {
background-color: #4a4a4a;
width : 55px;
height : 1px;
margin : 30px auto 60px;
}
/* ------------------------------------------------
* ヘッダー
-------------------------------------------------- */
header {
height: 10vh;
background-color: #343a40;
color: #fff;
}
header .inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 100%;
max-width: 980px;
margin: 0 auto;
}
header ul {
display: flex;
}
header li {
padding: 0 20px;
}
/* ------------------------------------------------
* メインビジュアル
-------------------------------------------------- */
.mainvisual {
height: 80vh;
background-image: url(images/mainvisual_bg.jpeg);
background-size: cover;
background-position: center;
position: relative;
}
.mainvisual::before{
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.mainvisual h2 {
text-align: center;
color: #fff ;
font-size: 42px;
font-weight: bold;
line-height: 2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ------------------------------------------------
* ABOUT
-------------------------------------------------- */
.about {
background-color: #e2e4e4;
}
.about p {
line-height: 2.5;
}
/* ------------------------------------------------
* NEWS
-------------------------------------------------- */
.news .inner {
text-align: left;
}
.news ul {
margin-bottom: 80px;
}
.news li {
border-bottom: 1px dotted #ccc ;
padding: 5px 0;
}
.news li span {
margin-right: 30px;
}
.news-btn {
display: block;
width: 150px;
text-align: center;
color: #4a4a4a ;
background-color: #e2e4e4 ;
font-size: 16px;
margin: 0 auto;
padding: 10px 0;
border: 1px solid #4a4a4a ;
border-radius: 5px;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.news-btn:hover {
opacity: 0.7;
}
/* ------------------------------------------------
* WORKS
-------------------------------------------------- */
.works {
background-color: #e2e4e4;
}
.works-card-wrapper {
display: flex;
justify-content: space-between;
}
.works-card-wrapper:last-child {
margin-top: 30px;
}
.works-card {
width: 30%;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.works-card img {
width: 100%;
height: 150px;
object-fit: cover;
}
.works h3 {
padding: 10px;
}
/* ------------------------------------------------
* ACCESS
-------------------------------------------------- */
.access {
background-color: #fff;
}
/* ------------------------------------------------
* CONTACT
-------------------------------------------------- */
.contact {
background-color: #e2e4e4;
}
input {
width: 600px;
padding: 10px 0;
margin-bottom: 30px;
}
textarea {
width: 600px;
padding: 5px 0 120px 0;
margin-bottom: 30px;
}
.contact-btn {
width: 150px;
color: #fff;
background-color: rgb(71, 189, 236);
font-size: 16px;
padding: 10px 0;
border: 1px solid #333;
border-radius: 5px;
box-shadow: 0 3px 6px rgba(0,0,0,0.7);
}
.contact-btn:hover {
opacity: 0.7;
}
/* ------------------------------------------------
* フッター
-------------------------------------------------- */
footer {
background-color: #4a4a4a ;
text-align: center;
}
footer p {
color: #fff;
padding: 20px 0;
}なお、今回の写経noteに引き続き、
・レスポンシブ対応
・簡単なアニメーション
・HTML→WordPress化
ここまで勉強できる「写経セット」をご用意しましたので、さらに学びを深めたい方は、ぜひご覧ください。
それでは、最後まで読んでいただきありがとうございました！
ーーー
【合計5,000円のnoteを無料配布中！】無料メルマガ講座を始めました！
『Web制作で場所に縛られない生活を実現する具体的なステップ』というテーマで無料のメルマガを配信中です。
1日1通（全15通）の講座が無料で読めるので、興味のある方はぜひ登録して学んでみてください。
詳細はこちら↓
【無料メルマガ】Web制作で場所に縛られない生活を実現する講座
この記事が気に入ったらサポートをしてみませんか？