プログラミング

コーディングでオススメの学習方法『クロッキーコーディング』

書籍や学習サイトでHTML/CSSの文法やお作法は学んだけど、
次はどうしたらいいの?という質問を受けることがあります。
そこでオススメの学習方法を記事にしました。

クロッキーコーディングとは?

絵を描く練習方法の1つに「クロッキー」というのがあります。
対象のモチーフを簡潔に短時間描く練習です。
量を多くこなせるので、いろいろな種類のモチーフを描くことで、画力をアップさせる方法ですね。

サイトコーディングでもその方法を取り入れたらコーディングスキルはアップすると思います。

習慣化すると、コーディングスピードコーディングの品質を上げる練習になります。

本業でも副業でもコーディングスピードが速ければその分、自分の作業量/単価も上がりますので、絶対に身に付けて置いて損はありません。
コーディングの基礎はいろいろな教材で学べますが、意外と練習する教材っていないんですよね。。。

具体的な方法

それでは具体的な方法を見ていきましょう。

ルール

以下のルールを取り入れるとより集中できます。

  • 制限時間は30分以内とする
  • 開発環境を整える
  • Emmetを使う

開発環境に関してはエディタのVisualStudioCodeの拡張機能を使い、コーディングスピードを上げましょう。
以下にSassとオートリロードを使った方法を記事にしています。

またEmmetについは以下の記事を参考にしてください。

クロッキー対象のサイトを1つ決める

あまりレイアウトが複雑ではないサイトにしましょう。
ここでは例として、Qiitaのトップページをクロッキーしてみます。

HTMLコーディングをする

HTMLを書くときに注意点としては、必要以上に細かく書かないことです。
クラス名も最低限で良いでしょう。
サイト内で使用されている画像なども取得する必要はありません。

CSSコーディングをする

CSSもいちいちブラウザのデベロッパーツールを開いて、サイズや色などを調べたりする必要はありません。
全てフリーハンドで良いです。
またエディタもHTMLファイルとCSSファイルを2分割すると、効率が良いです。

VisualStudioCodeのメニューから「表示」→「エディターレイアウト」から変更できます。

どこまで出来たか確認する

30分経ったら、作業をストップしてどこまで出来たか確認しましょう。
本家のコードを見て、自分が書いたものと見比べてみても良いでしょう。
後は、時間を気にせず作り込んでも良いですし、JavaScript実装を入れてみても良いでしょう。

サンプルコード

参考までに僕が試しにクロッキーコーディングしたものを載せておきます。

所要時間:30分
環境:VisualStudioCode,Gulp(gulp-sass browser-sync)

スクリーンショット

HTML

<!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="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <header>
    <div class="header__inner">
      <div class="h__side">
          <h1><a href="#">練習Qi</a></h1>
          <nav>
            <ul>
              <li><a href="#">リンク</a></li>
              <li><a href="#">リンク</a></li>
            </ul>
          </nav>
          <form action="">
            <input type="text">
          </form>
      </div>
      <div class="h__side">
        <nav>
          <ul>
            <li><a href="#">ストック一覧</a></li>
            <li><a href="#">投稿する</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <main>
    <div class="container">
      <div class="md2">
        <ul class="sidemenu">
          <li><a href="#">トレンド</a></li>
          <li><a href="#">タイムライン</a></li>
          <li><a href="#">タグフィード</a></li>
          <li><a href="#">マイルストーン</a></li>
        </ul>
      </div>
      <div class="md7">
        <h2 class="heading">トレンド</h2>
        <ul class="newslist">
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="icon">画像</div>
              <div class="ttl">
                <div class="ttl__main">
                  <p>記事タイトル記事タイトル記事タイトル記事タイトル</p>
                </div>
                <div class="ttl__sub">
                  <p><span>by user 2 days ago</span></p>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="md3">
        <div class="ad">広告</div>
      </div>
    </div>
  </main>
  <footer>
    &copy;2019 kukka.me
  </footer>
</body>
</html>

CSS

body {
  background: #e6e4e4;
}

a {
  text-decoration: none;
  color: #000;
}

header {
  background: #10d610;
  padding: 10px;
  margin-bottom: 20px;
}

header .header__inner {
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

header .h__side {
  display: flex;
}

header .h__side nav>ul {
  display: flex;
}

header .h__side nav>ul li {
  margin-right: 5px;
}

main>.container {
  display: flex;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}

main>.container .md2 {
  flex: 0 0 calc(2/12*100%);
}

main>.container .md7 {
  flex: 0 0 calc(6/12*100%);
}

main>.container .md3 {
  flex: 0 0 calc(4/12*100%);
}

main>.container .sidemenu {
  margin-right: 10px;
}

main>.container .sidemenu li {
  padding: 5px;
  margin-bottom: 10px;
}

main>.container .sidemenu li:first-child {
  background: #10d610;
}

main>.container .heading {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 15px;
}

main>.container .newslist li {
  margin-bottom: 10px;
}

main>.container .newslist a {
  display: flex;
  align-items: center;
}

main>.container .newslist .icon {
  width: 50px;
  height: 50px;
  background: #504e4e;
  text-align: center;
  line-height: 50px;
  margin-right: 10px;
}

main>.container .newslist .ttl .ttl__sub {
  font-size: 10px;
}

main>.container .ad {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  background: #10d610;
  height: 200px;
}

footer {
  width: 70%;
  margin: 0 auto;
}

さいごに

このクロッキーコーディングをしようとしても、全然手が進まない人は、基礎力が足りないので、書籍や動画で復習しましょう。

書籍なら『スラスラわかるHTML&CSSのきほん 第2版』が架空サイトを作る流れで学習できるのでオススメです。

動画ならUdemyの講座がオススメです。最近は動画から学ぶことが増えましたね。
フロントエンドエンジニアになりたい人の Webプログラミング入門