見出し画像

【Web制作独学】写経用サイトを無料公開します【完全初心者向け】

こんにちは、シュンです。

「Progateやドットインストールで学習後、いざ1から自分でコーディングしてみようと思っても、全く手が動かない・・・」

こういった経験ありませんか?

基礎学習を終え、いきなり模写に移ろうとする人いますが、正直それはおすすめしません。

まずは「写経」をして、コーディングの流れを掴みましょう。

とは言え、「写経用のコードはどこから探せばいいですか?」という声が聞こえてきそうなので、今回はそういった方向けに「写経用サイト」を作りました。


今回作るのは、下記のようなコーポレートサイトの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%);
}


ここでのポイントは、2つ。

・背景画像を暗くする
・文字を真ん中にする


背景画像を暗くしているのは、この部分です。

.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">
            <!-- 1列目 -->
            <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>
            <!-- 2列目 -->
            <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">
            <!-- 1列目 -->
            <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>
            <!-- 2列目 -->
            <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制作で場所に縛られない生活を実現する講座

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!