フロントエンドエンジニア

コーディングのトレース(模写)の仕方を6年間コーダーだった僕が紹介!

こんにちは、SHIBAKEN – @dec_shibaken – です

皆さんはどんな学習方法で、コーディングをしていますか?

HTMLコーディングは簡単に始めることができるので、
WEBを始める人にとっては最初のステップになるものではないでしょうか?

コードを書かなくても簡単に覚えられる方法はないのかと思う方もいらっしゃるかもしれませんが、、

残念ながらコードを書かずに覚えるということは不可能です。

マークアップもプログラミングも大事なのはコードを入力して体に染み付けていくという作業なんです。

でも、継続してできないと意味がないですよね。

さて、そんな初心者の方の為に、コーディング上達の近道と継続方法をご紹介させていただきたいと思います!

これは僕も実際に行なっていたことなので是非参考にしていただければと思います!

「トレース(模写)」の仕方を知ろう

トレース(模写)は公開しているWEBサイトを見て、ソースコードを覗かずに似たようにコーディングすることを指します。

デザインから、設計のイメージを湧かせる訓練だと思ってください。

実際に公開されているサイトなので、実践力を身につけるには最適な方法になると思います!

「トレース(模写)」を始める前に環境準備

必要なツールを準備する

これは僕が作業するときに用意していた環境です。是非参考にしてください。

簡単に準備できますので、一つずつクリアしていきましょう!

コードを記述するエディター「VisualStudioCode」のサイトを開いて、DLしましょう。

DLしたらVisualStudioCodeを開き、「LiveServer」というプラグインを検索し、「Install」ボタンをクリックしてインストールしてください。

LiveServer インストールが完了したらこれでOKです!これでローカルサーバーが使えるようになりました!

使い方はとても簡単です!こちらが参考になると思います!

VS Code:ライブリロード機能を備えた簡易ローカルサーバーを起動できる拡張機能「Live Server」ko

必要なファイルを準備する

index.htmlとmain.cssファイルを用意

reset.cssを用意

ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSのことです。

こちらからコピーしてreset.cssに貼り付けましょう。

ここまで準備ができたら、最後に
index.htmlにこちらを貼り付けてください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
 <!-- ここに書いていきます -->



</body>
</html>

貼り付けが完了したら準備完了になります!

トレース(模写)対象のサイトを見つける

お手本になる、良い感じのサイト集が世の中には沢山転がっているので、そこから拝借させていただきましょう!

トレース(模写)にオススメのサイト集

とにかく初心者にはランティングページがオススメ

シンプルな1カラムなので、トレース(模写)にむいていると思います!

 

  • トレース(模写)対象のサイトは極力単純なものにしよう!
  • 初心者はとりあえずランディングページから始めてみましょう!

トレース(模写)の実際の学習法

デザインから大まかな構造をイメージしてみる

イメージをざっくりとしてみて、ノートなどに書き出してみるのも良いかもしれません。

例えばこういうデザインがあったとしたら、

こんな風にイメージしてみる。

このデザインなら、大まかな構造はたったこれだけ!

実際にイメージができたら、htmlだけ組み込んでみましょう!

イメージからHTMLを組み込んでみる

まずは赤枠だけHTMLを組み込んでみます!エディターでこんな感じに書いてみましょう!

<!-- 省略 -->
<body>
 <!-- ここに書いていきます -->

  <div>
    <div>
     <div></div>
    </div>
  </div>

</body>
</html>

 

赤枠の組み込みが完了したら、次は

青枠の「テキスト」と「画像」をそれぞれ埋め込んでみる。

エディターでこんな感じに書いてみましょう!

<!-- 省略 -->
<body>
 <!-- ここに書いていきます -->

  <div class="main">
    <div class="box main__inner">
      <div class="box__list">
        <span>テキスト</span>
        <img src="https://placehold.jp/200x300.png" alt="">
      </div>
    </div>
  </div>
</body>
</html>

 

埋め込みが完了したら、3つコピペしてみる

エディターでこんな感じに書いてみましょう!

<!-- 省略 -->
<body>
 <!-- ここに書いていきます -->

  <div class="main">
    <div class="box main__inner">
      <div class="box__list">
        <span>テキスト</span>
        <img src="https://placehold.jp/200x300.png" alt="">
      </div>
      <div class="box__list">
        <span>テキスト</span>
        <img src="https://placehold.jp/200x300.png" alt="">
      </div>
      <div class="box__list">
        <span>テキスト</span>
        <img src="https://placehold.jp/200x300.png" alt="">
      </div>
    </div>
  </div>

</body>
</html>

 

最後に、残りの画像を埋め込んでいきます

最終的にエディターではこんな感じになります!

<!-- 省略 -->
<body>
 <!-- ここに書いていきます -->

  <div class="main">
    <img src="https://placehold.jp/200x100.png" alt="">
    <img src="https://placehold.jp/300x100.png" alt="">
    <div class="box main__inner">
      <div class="box__list">
        <span>テキスト</span>
        <img src="https://placehold.jp/200x300.png" alt="">
        <img src="https://placehold.jp/100x100.png" alt="" class="thum">
      </div>
      <div class="box__list">
        <span>テキスト</span>
        <img src="https://placehold.jp/200x300.png" alt="">
      </div>
      <div class="box__list">
        <span>テキスト</span>
        <img src="https://placehold.jp/200x300.png" alt="">
      </div>
    </div>
  </div>

</body>
</html>

 

全てのHTMLを組み終えたら、最後にCSSで調整してみましょう。

body,html{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  background-color:#e3f6fa;
}
.main{
  height:100%;
  background-color:#fff;
  padding:10px;
  display:flex;
  flex-direction: column;
  align-items: center;
  color:#218a97;
}

.main > img{
  margin-bottom:40px;
}

.main__inner{
  height:100%;
}

.box{
  display:flex;
  justify-content: center;
}

.box__list{
  text-align:center;
}

.box__list{
  display:flex;
  flex-direction: column;
  margin-right:20px;
  position:relative;
  border:1px solid #218a97;
}

.box__list:last-child{
  margin-right:0;
}

.thum{
  position:absolute;
  left:-20px;
  bottom:-20px;
}

これで完了です!

トレース(模写)の完成度はご自身のレベルに合わせて組み込みを行うことをオススメいたいます!

見た目の精度より、構造を理解することの方がトレース(模写)では重要なので、目的を忘れないようにしてください!

できるところから進めていく

今回紹介させて頂いている、組み込みの手順は僕のルールなので、学習しやすい形で進めてください!

トレース(模写)の組み込み手順にルールは本来無いので、自分流を見つけていきながら精度を高めていきましょう!

可能であれば何度も繰り返しトレースは行いましょう!体に染み込ませるつもりで行うと良いと思います!

苦手なところは飛ばしてもOK!

細かく複雑な部分でつまづくこともあるとあると思いますが、思い切って飛ばしちゃいましょう!

何度も言いますが、コードを書く手は極力止めて欲しく無いです!
あとで、振り返り苦手な部分をピックアップして次の課題に残しておくという方法でも良いかもしれません!

まずは自分のペースを守りながら組み込んでいきましょう!

15分悩んでもわからない時は、一旦飛ばそう!悩み続けて疲れてしまうとモチベーションが落ちてしまう為。

時間も意識してみましょう

今後、コーダーとしてお仕事をしていきたいと考えている方であれば、時間も意識してみましょう。

コーダーは正確さとスピードが求められます。時間を確認しながら繰り返しチャレンジしてみましょう!

完璧じゃなくても大丈夫

細かい部分はとにかく今は無視!

トレース(模写)は、見た目の美しさなどにこだわることを1番の目的にはしていないので、細かいところは一旦無視しましょう。

まずは、htmlとcssに慣れる!ここが大事です!

  • レスポンシブはとりあえず無視で大丈夫です
  • 多少のずれは気にしなくて大丈夫です
  • テキストは適当なダミーを入れておきましょう
  • 画像はなんでも大丈夫
  • javascriptはとりあえず無視で大丈夫です

目的はデザインからコーディングをイメージできるようにする事。

ソースコードはコピーしてはダメ

コーディングに慣れてきて余裕が出てきたら、細かいディティールまで極めてみましょう!

フリーランス / ブロガー
SHIBAKEN
埼玉生まれ東京育ちの独身30代男。 都内の出版社でWebデザイナーとして就職。その後転職し、制作会社でフロントエンドエンジニアとして6年間従事。 現在は会社を退職し、フラリフラリと風に吹かれながらフリーランスとして現在に至る。

プロフィールの詳細はこちら
\ Follow me /