この記事のアイキャッチのオリジナル画像は下記サイトより拝借しております。
Original Photo by Ilya Pavlov on Unsplash
「コーディング」という新しい趣味を見つけました。
こんにちは、雷奈（＠raihatori）です。
最近、私はちまちまとではありますがHTML・CSSのコーディングの練習に励んでいます。Webサイトの材料となる諸々のデータのことですね。
パズルを組み立てて遊ぶような感覚で、Webページの構築・カスタマイズの練習を楽しんでいます。
最初は「HTML」や「CSS」、「コーディング」という単語を聞くだけで「なんだか難しそう…」と感じる方も多いでしょうが、実際にやってみると「あら意外と簡単じゃない」と感じていただけるかと思います。
もちろんもっと凝ったサイトに仕上げるためには高度なテクニックを必要としますが、HTML・CSSは学習範囲がものすごく広いので簡単なところから始めることで上達していく楽しさを体感しながらスキルアップがしやすくなるでしょう。
そこで今回は、HTML・CSSを「遊ぶ」感覚で技術習得のための学習を始めるすすめについて書いていきたいと思います。
例えるなら…HTMLは「肉体」！CSSは「衣装」！
Webサイトは基本的に「HTML」と「CSS」この2種類のファイルで構成されています。2種類のファイルを組み合わせることで、普段私たちが利用しているWebサイトができているのです。
上記以外にも「JavaScript（ジャバスクリプト）」や「 jQuery（ジェイクエリー）」「PHP」等のファイルが併用されている場合もありますが、今回はその説明は省略します。ご興味のある方はお手数ではございますが各自お調べください…。
私はHTMLを「肉体」、CSSを「衣装」と例えています。HTMLがサイトの素体となる基本情報であるのに対し、CSSはサイトの見栄えを良くするためのお飾りのようなものだからです。下記のイラストをご覧いただくとイメージがしやすいかと存じます。お粗末なイラストで恐縮ですが…。
HTMLだけで構成されたWebページは殺風景で寂しく見えるのですが、これにCSSを紐付けるとあら不思議！読みやすく華やかなページに大変身するのです。
さらに、CSSファイルの中身を書き換えることでフォントや色、配置等を自由自在に変更できます。まるで着せかえ人形のようにWebページの細かい模様替えをすることができるのですね。
上記のことから、私は「HTMLは『肉体』！CSSは『衣装』！」という例え方をしているわけです。
最初は写経からスタート。続けて模写→自作にステップアップを目指す
少し脱線してしまいましたが、HTML・CSSのコーディングのお話に戻ります。
HTML・CSSでのWebサイト構築をマスターするためには、既存のサイトを参考にしてコーディングする「模写コーディング」が一番効果的な練習法であると言われています。
模写したいサイトのスクリーンショットを取ってサイト内の要素（画像や文字のフォント等）を計測し、これを元にしてできるだけ忠実に再現できるようにコーディングを進めていきます。
でも、基礎学習を終えていきなり模写コーディングをしようとしてもどこからどうやって手を付ければ良いのか分からずに困ってしまう方も多いでしょう。
そこで、基礎学習の後は模写コーディングの前に「写経コーディング」を挟むともっと取っ付きやすくなるのではないかなと考えています。
本来の意味での「写経」は仏教用語の一つで、経典（教えが書かれた本）やお経の内容をそっくりそのまま書き写して心を見つめ直す修行法のこと。
これと似たような感じで、サンプルとなるサイトのHTML・CSSをエディターに打ち込んで書き写しながらコードの仕組みやコーディングのテクニックを覚えていくのが、写経コーディングです。
学習サイト（Progateやドットインストール、Udemy等が代表的）やスクールでの授業、教本の内容だけではコーディング技術を身体に染み込ませるのは難しいもの。とにかく最初は実際にコードを繰り返し書いてみて、自然に技術を身体に覚え込ませていくのが次のステップへの近道かなと考えます。
私も今は写経コーディングをメインに練習しているのですが、一定の練習を重ねたらサンプルコードの内容を一部差し替えてみる等のカスタマイズ、そして解答例のコードを見ずに既存サイトの再現に挑戦する模写コーディングに進むという感じでやっていこうかと計画中です。
写経コーディングで書いたコードの一部を書き換えて、例えば文字や背景の色を変えることだけでも立派なカスタマイズ。これができるのとできないのとでは、ほんの少しですが差が出てきますよ。
丸写しからのプチカスタマイズでも十分ステップアップできるぞ！
写経・模写コーディングの課題を配布しているサイト
最後に写経・模写コーディングの練習に使える課題を配布しているサイトをいくつかご紹介します。さまざまな種類のページのコーディングを数多くこなしていけば、きっと自然とコーディング作業が上達しているはず！
Codestep（コードステップ）
私が一番お世話になっているのがこのサイト。必要最低限のコードで構成されている入門編から始まり、続いて初級編へ。中級編からはJavaScriptを取り入れたコーディングにも挑戦できます。
使用頻度が多い「疑似要素」のテクニックや、JavaScriptの派生言語であるjQueryの集中トレーニングもあります。
模写修行
こちらは会員制かつ有料での課題素材（画像や解説文のファイル）の購入となりますが、現在主流の月額定額制（サブスク）ではなく1回購入してしまえばずっと繰り返し使える買い切り型なので手が出しやすいかなと思います。
無料で試せる課題も用意されているので、こちらを先に挑戦してから有料課題の購入を検討するのも良いでしょう。私も近いうちに実際に利用してレビューを書いてみようかなと考えています。
上記のようなサイト以外にも、HTML・CSS関連の教本にも教材としてサンプルコードが付いているものがありますので、購入の際は教材の有無をチェックするのがおすすめです。
コーディングはAtomやDreamweaver、ブログ記事執筆はBear
HTMLやCSSのファイルを作成する作業を専門用語で「コーディング」と呼びます。また、特にHTMLファイルを作成する作業を「マークアップ」と呼ぶ事もあります。
HTML・CSSのコーディングには「Atom（アトム）」「Dreamweaver（ドリームウィーバー）」「Visual Studio Code（ビジュアルスタジオコード）」といったコードエディターを使用しています。
AtomやDreamweaver、Visual Studio Code（通称「VS Code」）は「コードエディター」ということでHTML・CSS等コンピューター言語のコーディングやプログラミングがやりやすいように開発されています。タグ入力の支援機能が付いているのでとても便利。
上記3つのコードエディターの中から、自分に一番似合うエディターは何だろうなと吟味している最中です。
一方で、WordPressブログに投稿する記事の原稿執筆には「Bear（ベアー）」という別のテキストエディターを使っています。こちらはコーディング以外の一般的な文章入力に対する補助機能が充実しています。
Bearでもコーディングをおこなうことはできるのですが、タグ入力支援機能が付いているAtom・Dreamweaver・VS Codeよりはコーディングには向いていないかなぁと思います。やっぱりBearは文章向きのエディターなのですね。
HTML・CSSと「仲良くなって」コーディングを仕事にする人を目指す！
今回はHTML・CSSを「遊ぶ感覚で学ぶ」という考え方についてお話してきました。
近年「Progate」や「ドットインストール」といった初心者向けのコーディング・プログラミング学習サイトが人気を集めているのですが、これらで学べる範囲はほんの入口…基本の「き」程度にしかすぎないという意見も多いです。
コーディングを少しでも速く上達させるためには、やはり実践あるのみ。既存サイトで実際に使われているコードを少しずつ書いていって、書く度にブラウザを更新して実際の表示を確認しながら練習を重ねていくと、ちまちまとですがコーディングの腕が上がっていきます。
カンニングせずにサイトを再現する模写コーディングやオリジナルのサイト構築ができるようレベルまで到達すれば、仕事としてコーディングをできるようになるのも夢ではなくなります。
今回の記事をきっかけにして、ほんの少しでも「HTML・CSSを勉強してみたい！」という気持ちが芽生えた方がいらっしゃるなら嬉しい限りです。
私もWeb関係の仕事への第一歩として、練習を続けていきます。
