挫折しない！模写コーディングの手順【実践編】

前回の記事では、模写コーディングの方法について、レイアウトの確認や、事前の準備をメインに紹介しました。

まだ、ご覧になっていない方は前回の記事をご覧ください！

挫折しない！模写コーディングの手順 | KATSU LOG

定番の練習方法の模写コーディングの挫折しない進め方や、オススメのサイトを紹介します。

https://katsu-dev.netlify.app/blog/web/copy-coding/

今回記事からは実際のコーディングを行います！

※模写コーディングをやってみたいけど、HTMLもCSSも全然わからない！！という方はまずこちらの記事を先にご覧ください！！

【HTML入門】WEB制作への第一歩 | KATSU LOG

本ブログで紹介するHTMLの入門記事一覧です

https://katsu-dev.netlify.app/blog/web/html/

【CSS入門】WEBページの見た目を綺麗に整えよう | KATSU LOG

本ブログで紹介するCSSの入門記事一覧です

https://katsu-dev.netlify.app/blog/web/css/

【CSS入門】WEBページの見た目を綺麗に整えよう | KATSU LOG-image

注意！
模写コーディングしたものをそのままインターネットに公開してしまうのは著作権的な問題があるのでNGです！
条件付きで公開OKですと謳ってるサイトもありますが、特殊な例です。基本的にはNGと思っておきましょう！

模写する範囲
ファイル構成
HTMLテンプレートを呼出し、CSSファイルをリンクする
ヘッダーのコーディング
- HTMLのコーディング
- CSSのコーディング
まとめ

模写する範囲

前回レイアウトを確認した、ヘッダー～ヒーロービュー～SERVICEセクションまでの模写を紹介します。

coding_image

今回記事は、ヘッダー部分のみとし、実際のコーディングでのプロセスに寄せて、順を追ってコーディングしていきます。

次回以降でヒーロービューとSERVICEセクションまでをポイントを絞って紹介します。

使用するエディタはVSCode等、emmetの使えるもの、ブラウザはChromeを前提として進めます。

ファイル構成

まずは任意の場所に以下のような構成でファイルを作成します。

sample/
  ├ index.html
  ├ css/
  │  ├ style.css
  │  └ reset.css
  └ image/
     ├ hero_image.png
     ├ service_code.png
     ├ service_wordpress.png
     └ service_responsive.png

reset.cssは、ブラウザのデフォルトのスタイルを消すためのリセットCSSを入れます。

"リセットCSS"でググると、The New CSS Resetや、destyle.css等、何種類か出てきますが、基本的にはそこまでの差はありません。

任意のリセットCSSを、まるっとコピーしてreset.cssに保存してください。

imageフォルダにはヒーロービューで使う画像と、SERVICEセクションで使う画像を三つ入れてあります。

HTMLテンプレートを呼出し、CSSファイルをリンクする

index.htmlを開き、emmetコマンドの!+TabキーにてHTMLのテンプレートを呼び出しましょう。ついでに言語設定もlang="en"からlang="ja"に変更します。

<!DOCTYPE html>
<html lang="ja"><head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    
</body>
</html>

reset.cssと、style.cssを読み込む記述をします。

reset.cssを先に読み込み、ブラウザのデフォルトスタイルを消してから、スタイルを指定しなければならないので、上に記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css">  <link rel="stylesheet" href="./css/style.css">  <title>Document</title>
</head>
<body>
    
</body>
</html>

また、<link>要素のhref属性には、読込むファイルのパスを指定しますが、相対パスでの指定をしてください。

<a>要素のhref属性や、<img>要素のsrc属性等も同様ですが、cssフォルダ内やimageフォルダ内へのパスは、基本的には相対パスを指定しましょう。

相対パスとはここではindex.htmlファイルから見た、他のファイルへのパスとなります。

同じフォルダ内でのファイル・フォルダへのパスは./から始まり、一つ上のフォルダのファイル・フォルダへのパスは../から始まります。

今後、サーバーへのアップロードをする場合でも、相対パスであれば、index.htmlファイルから辿った、style.cssまでのパスとなるので問題なく読込むことができます。

ヘッダーのコーディング

ここから、いよいよヘッダー部分をコーディングします。

少し長くなりますが、実際のコーディングでのプロセスに寄せて、順を追ってコーディングしていきます。

HTMLのコーディング

前回の記事で確認したヘッダー部分のレイアウトをもう一度見てみましょう。

coding_img_header

ヘッダー以下の要素のネスト(入れ子)の関係性を表わすと下のようなイメージですね。

<header class="header">
  └ <div class="wrapper">
      ├ <h1 class="header_ttl">
      └ <nav class="header_nav">
          └ <ul>
              ├ <li>
              │   └ <a>
              ├ <li>
              │   └ <a>
              ├ <li>
              │   └ <a>
              ├ <li>
              │   └ <a>
              ├ <li>
              │   └ <a>              
              └ <li>
                  └ <a>

HTMLで記述すると以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>
  <header class="header">    <div class="wrapper">      <h1 class="header_ttl">KATSU portforio</h1>      <nav class="header_nav">        <ul>          <li><a>service</a></li>          <li><a>portfolio</a></li>          <li><a>skill</a></li>          <li><a>price</a></li>          <li><a>profile</a></li>          <li><a>contact</a></li>        </ul>      </nav>    </div>  </header></body>
</html>

※ナビゲーションメニューの<a>要素のhref属性はページ内リンクとするため、各々href="#service"のように、各セクションのIDを指定してください。href属性は必須指定です。ここではブログシステムの不具合で属性を付けられませんでした…

ネストしている要素はインデント(字下げ)を付けるのが分かりやすいのでオススメです。VScodeでは通常Tabキーで半角スペース4つが挿入されると思います。

ここの例では私の好みでスペース2つでインデントを付けています。

この段階では何もスタイルをあてておらず、リセットcssのみが適用されている状態なので、index.htmlをブラウザで開くと以下のような感じです。

heder_element_coded

HTML側の記述はとりあえずこんな感じでいいでしょう。事前にタグ・クラス名の検討を詳細に行っておく事で、HTML記述はかなり楽になると思います。

CSSのコーディング

ここからCSSを記述してスタイルを指定するので、style.cssをエディタで開きます。

まずは文字コードの指定を記述しておきましょう。

@charset "utf-8";

ヘッダーの要素を外側から順にみていきましょう。

coding_img_header

一番外側の.headerは幅は画面幅いっぱいで、高さは内容物次第で良さそうです。(ブロック要素の既定の動作)

ですが、上下のpaddingを指定しておかない内容物との余白がなくピッタリくっつく状態になるので指定します。

@charset "utf-8";
.header {  padding: 20px 0;}

一つ内側の要素の、.wrapperクラスは固定幅で左右中央揃えにしたいものでした。

この.wrapperの幅を調べたいので、Chrome拡張機能のDesignerToolsで確認してみましょう。

まずは模写するWEBサイトを開きましょう。

DesignerToolsをChromeに追加している方は、下のようにツールバーにアイコンが表示されていると思うのでクリックしてください。

Designertools

拡張機能にDesignerToolsがない方はリンク先から追加してください。

DesignerToolsを起動した状態でマウスカーソルを要素にかざすと、以下のように要素のサイズが表示されます。

header_width

幅は1000pxとなっていますね！

従って次のようにスタイルを指定します。

@charset "utf-8";
.header {
  padding: 20px 0;
}
.wrapper {  width: 1000px;  margin: 0 auto;}

幅を1000px固定として、margin: 0 auto;で左右マージンを自動化して中央揃えとなります。

ここで一旦、各ボックスがどのようになっているか背景色を付けてみてブラウザで確認しましょう。

@charset "utf-8";
.header {
  padding: 20px 0;
  background-color: pink;}
.wrapper {
  width: 1000px;
  margin: 0 auto;
  background-color: gold;}

header_centering

中央揃えになってますね！確認したら背景色は消去しておきましょう。

尚且つここでは、<h1>と<nav>は横並びにしたいのでdisplay: flex;を追加したいところですが…

この.wrapperクラスに左右中央揃え以外のスタイルをつけてしまうと、他のセクションで.wrapperを使えなくなってしまいます。どうしましょう？？

ここでは、新しく.header_wrapクラスを追加することとし、そこにdisplay: flex;のスタイルを指定することにしましょう。

一旦index.htmlファイルに戻り、次の通りwrapperクラスのついている<div>にheader_wrapクラスを追加します。

...
<header class="header">
  <div class="wrapper header_wrap">    <h1 class="header_ttl">KATSU portforio</h1>
    <nav class="header_nav">
      <ul>
          <li><a>service</a></li>
          <li><a>portfolio</a></li>
          <li><a>skill</a></li>
          <li><a>price</a></li>
          <li><a>profile</a></li>
          <li><a>contact</a></li>
      </ul>
    </nav>
  </div>
</header>
...

wrapperとheader_wrapの間に半角スペースを入れるの忘れずに！

style.cssに戻り、追加した.header_wrapのスタイルを新しく記述します。

@charset "utf-8";
.header {
  padding: 20px 0;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
}
.header_wrap {  display: flex;  justify-content: space-between;  align-items: center;}

ここまでで、見出しとメニューが左右横並びになったと思います。

header_flex

次はフォントを調整します。

Chrome拡張のWhatFontでフォントを調べてみましょう。

模写するWEBサイトを開き、下記のツールバーのWhatFontのアイコンをクリックします。(WhatFontが無い方はChromeに追加して下さい)

WhatFontを起動した状態で、テキストをドラッグ・クリックすると、フォント情報が表示されます。

header_font

header_nav_font

タイトルでは、

font-familyは"Noto Sans Jp", sans-serif
font-sizeは26px
font-weightは700

ナビゲーションでは、

font-familyは"Noto Sans Jp", sans-serif
font-sizeは16px
font-weightは400

同様にスタイルを記述します。

@charset "utf-8";
.header {
  padding: 20px 0;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
}
.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_ttl {  font-family: "Noto Sans Jp", sans-serif;  font-size: 26px;  font-weight: 700;}.header_nav {  font-family: "Noto Sans Jp", sans-serif;  font-size: 16px;  font-weight: 400;}

※font-familyはほとんどの場合<body>等に指定して、ページ全体に継承して統一する使い方が多いですが、ここではとりあえずこのまま続けます。

font-familyプロパティの"Noto Sans Jp"はWEBフォントと呼ばれるもので、フォントを読込みしなければなりません。

WEBフォントを読込むために、index.htmlに戻り、<head>内に次を追加しましょう。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">  <title>Document</title>
</head>

style.cssに戻り、ナビゲーションメニューを横並びにしてしまいましょう。

@charset "utf-8";
.header {
  padding: 20px 0;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
}
.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_ttl {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 26px;
  font-weight: 700;
}
.header_nav {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.header_nav ul {  display: flex;  }

ここまででこんな感じになりました。

header_nav_flex

ナビゲーションメニューのリストの間隔がないので調整しましょう。

この左右の間隔がどれくらいあるのかも、DesignerToolsで調べる事ができます。

DesignerToolsを起動し、メニューの一項目をクリックしてアクティブ状態にしてから、他の要素にカーソルをかざすと、以下のように間隔を測定することができます。

header_menu_margin

少し見づらいですが、塗りつぶしになっている数値が要素間の間隔になります。ここでは各項目の間隔が40pxであることが分かりました！

各リスト要素の左右に20pxずつ設けて、合わせて40pxとしましょう。

@charset "utf-8";
.header {
  padding: 20px 0;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
}
.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_ttl {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 26px;
  font-weight: 700;
}
.header_nav {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.header_nav ul {
  display: flex;  
}
.header_nav ul li {  margin: 0 20px;}

あと、今回は画像データしか載せていないので分からないですが…ナビゲーションメニューにマウスをかざすと下線が表示されます。

実際のサイト模写の時はマウスホバー時の動作も色々試してみましょう。

見出しの左枠線と一緒の色とするので、Chrome拡張のColorPickで調べましょう。

模写するWEBサイトを開き、下記のツールバーのColorPickのアイコンをクリックします。(ColorPickが無い方はChromeに追加して下さい)

colorpick

ColorPickを起動すると、カーソルをかざした箇所が拡大されて、1px単位で色コードを確認できます。

色コードを確認する場所にカーソルをかざし、クリックするとピックアップした箇所が固定されるので、表示された色コードをコピーすることができます。

header_border

ここでは色コードは#FFCF65又は、rgb(255,207,101)のようです。この色コードをコピーして<a>要素をホバーした時の下線に指定しましょう。

@charset "utf-8";
.header {
  padding: 20px 0;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
}
.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_ttl {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 26px;
  font-weight: 700;
}
.header_nav {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.header_nav ul {
  display: flex;  
}
.header_nav ul li {
  margin: 0 20px;
}
.header_nav ul li a:hover{  border-bottom: 3px solid #FFCF65;}

色コードを16進数指定する際、頭に#を付けるのを忘れずに(よく忘れちゃいます笑)

これでヘッダーが完成です。それらしくなりました！

header_fin

最終的なコードはこんな感じです。

index.htmlは…

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <header class="header">
    <div class="wrapper header_wrap">
      <h1 class="header_ttl">KATSU portforio</h1>
      <nav class="header_nav">
        <ul>
          <li><a>service</a></li>
          <li><a>portfolio</a></li>
          <li><a>skill</a></li>
          <li><a>price</a></li>
          <li><a>profile</a></li>
          <li><a>contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>
</html>

style.cssは…

@charset "utf-8";
.header {
  padding: 20px 0;
}
.wrapper {
  width: 1000px;
  margin: 0 auto;
}
.header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_ttl {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 26px;
  font-weight: 700;
}
.header_nav {
  font-family: "Noto Sans Jp", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.header_nav ul {
  display: flex;  
}
.header_nav ul li {
  margin: 0 20px;
}
.header_nav ul li a:hover{
  border-bottom: 3px solid #FFCF65;
}

まとめ

こんな感じでなるべくソースコードを見ずに、拡張機能でサイズ・配色・フォント等を確認して、試行錯誤しながら実装するのが模写コーディングの流れになります。

今回の例のように、事前に確認したレイアウトから変更が生じることもあると思いますが、何度か練習すればスムーズに行けるようになります！

また、紙やデザインデータに書き出したりせずとも、頭の中で構成を考えて、そのままコーディングに…ともできるハズです！

次の記事残りのヒーロービューとSERVICEセクションの模写のポイントを紹介します！

挫折しない！模写コーディングの手順【実践編２】 | KATSU LOG

実践編の続きとして、ヒーロービュー、SERVICEセクションの模写を紹介します。

https://katsu-dev.netlify.app/blog/web/copy-coding3