独学でWebサイト制作学習・コーディングスキルを向上させる「3つの鍵」

Webコーディングやプログラミングの学習に一区切り付いた時、例えば入門編やカリキュラムを終えた時に「ここからどうすれば良いかわからない」と感じたことはありませんか？

そんな方が、学んだことを活かしつつ更にステップアップできる方法をご紹介します。たった３つのことを意識するだけで、自己学習・スキルアップができますよ。

これから始めたいと思っている方、独学派の方、スクール等で学習中の方、どなたでも実践可能な内容です。これから学習される方は、効率よく基礎～応用までの習得にも繋がります。
ぜひ本記事の内容を実践してみてください！

• 習ったこと「だけ」では限界があります
• Web制作スキルを高める3つの鍵
• 1.Web制作の基礎を知る
• 2.Webページもしくはパーツのコーディングを行う
• 3.わからないことはWeb検索で調べて、書いてみる
• まとめ

習ったこと「だけ」では限界があります

大学や専門学校、スクールなどWeb制作を教える教育機関は多くありますね。我々スキルハブもWeb制作を中心としたスクールです。

こうした機関では、仕事としてWeb制作を行えるようにコーディングやプログラミングを教えています。しかし、学校やスクールを終了すれば、誰もがどんなWebサイトやWebアプリでも作れるというわけではありません。

なぜなら、教わることができるのは知識と、こういう場合はこう組み立てるという考え方・技術のため。これはWeb制作だけではなく、どの業種やジャンルも同じですよね。

身近なものに例えると、料理教室で食パンの作り方は教えてもらえます。ですが、チョコやクリームを混ぜてアレンジしたり、味や食感を理想に近付けるための材料配合は自分で考えますよね。

同じようにWebサイト制作でも、必要な機能やデザインに応じて、最適な方法を調べて（学んで）、試す必要があるのです。

また、コーディング・プログラミング言語は日々進化しています。新しいフレームワーク等も登場してきますから、制作者側も日々アップデートが必要とされているのです。

自分が考えたものを形にしたい、お客様の要望に応えたい。その場合は学んだことの応用や、学んだこと以上もしくは最新の技術習得が必要です。

Web制作スキルを高める3つの鍵

最初から独学スタートでも、ある程度の制作スキルをスクール等で学んだ後でも、今以上のWeb制作スキルを身に着けようと思えば、自分で行動する必要があります。

スキルハブで教えている先生達も、HTML&CSSコーディングを完全独学で覚えた、Javascriptは習ったけれどPHPは自分で学んだ、など自分でWeb制作スキル習得や向上を行っています。

問題は、今以上になるために何をするのかです。
そこで、本記事ではWeb制作の基礎とも言えるHTML&CSSコーディングを中心に、どうすれば低コストかつ短時間で効率的にスキルアップが出来るのかを紹介します。

1.Web制作の基礎を知る

ここは大前提、まず最低限の基礎知識は身につける必要があります。
基礎知識が全く無い状態だと、調べても説明の意味や実例のコードがわかりません。この段階で、複雑なページのコーディングをしようすれば高確率で挫折してしまいます。できた人は天才の類です。

学習を始める際には説明、説明内に使われている用語がなんとなく理解できるくらいの基礎知識を習得しましょう。HTML&CSSコーディングの場合は、下記7つが分かれば大丈夫です。

1.HTMLの基本書式がわかる
2.HTMLタグが何かがわかる
3.HTML文書で画像を表示できる
4.他のWebページへリンクを設置できる
5.CSS（スタイルシート）の役割がわかる
6.セレクタ、プロパティ、プロパティ値が何かわかる
7.id,classを使って簡単なスタイル指定が出来る

当ブログの入門シリーズ（HTMLとCSS）ができれば、７つはクリア出来てきます。

Skillhubブログ

HTMLの書き方入門 - はじめてのWebデザイン

Skillhubブログ

CSSの書き方入門 - はじめてのWebデザイン

完全初心者さんにおすすめのSkillhub講座（無料）

スキルハブでは動画でさらにやさしく解説した、HTMLやCSSの基礎講座も無料で公開しています。動画と一緒にコードを書くだけで簡単に基礎が身につきます。コーディング初チャレンジの方は、ぜひご覧ください。

どの講座も暗記要素はほぼゼロ。
講座の一部はYoutubeに公開しており、10000人以上のチャンネル登録者数、3000以上の高評価と好意的なコメントをいただいています。「本を買ったけれど分からなかった」「他のスクールで挫折してしまった」という生徒さんも、数日でHTMLとCSS基礎をマスターされていますよ。

無料講座

基礎から学びたい人のためのHTML入門【動画で学ぼう】

無料講座

基礎から学びたい人のためのCSS入門【動画で学ぼう】

無料講座

新HTML/CSS入門講座 （基礎編）

何から手を付けて良いか悩んでいる方は、上記の順番で動画講座を受講してみてください。今日中にHTMLとCSSの書き方がわかります。

無料～Web制作を学習できるサイト5選

HTMLとCSS未経験者の方が、Web制作学習スタートに使いやすい学習サービスを紹介します。

スライド式の解説を読んだあと、画面上でコードを書いて学習できるサービスです。HTML & CSS 初級編は無料会員でも利用可能。HTML基礎学習

CODEPREPも解説・正解コードを見ながら、画面上でコードを書いていける学習サービスです。プレミアム会員システムが終了し、HTML・CSSからアプリ制作まで幅広いコンテンツが全て無料で確認できます。

※2017～2018年あたりから更新も止まっているようです。

3分の動画によってプログラミングを学ぶことが出来るサービスです。
こちらも“はじめてのWeb制作”など入門系のレッスンは無料で学習することが出来ます。また、学習環境の準備やエディタ活用なども用意されています。

WEBデザイン編とWEBアプリ編があります。教科書のようにテキストで説明されており、上の3サイトより難易度はやや高めです。
公開コンテンツは会員登録不要で読むことができる点が特徴。

Codecademyはアメリカのプログラミング学習サービス。コンテンツの充実度が素晴らしく、学習できる言語も豊富。英語がお得意な方なら登録の価値はあるでしょう。
HTMLやCSSは無料で学習できます。

2.Webページもしくはパーツのコーディングを行う

基礎知識＆コーディングの方法がわかったら、あとは実践あるのみです。
デザインにしろコーディングにしろ、実際の制作を行わずに習得するのは相当に難しいでしょう。手（と頭）に馴染ませる・定着させるイメージで学習したほうが習得は早いです。

ご自身で作ってみたいWebデザインがある方は、デザインからコーディングまでを行うのがおすすめ。作りたいものを作るのが一番楽しく、モチベーションも維持できます。

WebデザインからWebページへとコーディングしていく中で、HTMLの組み方・CSSの書き方などわからないところも出てくるはずです。そのときは後記の“3.Web検索で調べて、書いてみる”を行います。調べてコードを書いくことで実力もアップし、自分が強化すべき箇所も見えてきます。

●デザインが思いつかない時は？

良いなと思ったWebページをトレースさせてもらいましょう。
自分のサイトとして公開すると犯罪ですが、学習目的で模写するだけであれば問題ありません。模写コーディングとも呼ばれる、Web制作学習によく使われているトレーニングの1つです。

いきなりリリースされているサイトの模写は難易度が高い！という場合は、コーディング学習支援でカンプ+見本コードを用意してくれているサイトもあります。活用させて頂きましょう。

外部リンク

【デザインカンプ無料配布】未経験からのコーディング学習ステップ | PENGIN BLOG

●Webサイト/ページ作成は時間的に厳しい時は？

お仕事等でWeb制作の学習時間が限られている方は、パーツの模写からはじめてみるのがおすすめです。「記事一覧部分」「サイドバーのカテゴリーリスト」「料金料」「見出し」などなど、部分的にコーディングするだけでも十分力は付きますよ。

慣れてくるとコーディング速度も上がっていきますから、週末や長期休暇などお時間が取れる時にWebページ全体のコーディングをしてみてください。

3.わからないことはWeb検索で調べて、書いてみる

自分のデザインをコーディングするにしろ、模写コーディングをするにしろ、コーディングをしていると「ここってどうすれば……？」という箇所が出てきます。出てこない方は相当な上級者くらいかと思います。

できない、とコーディングを諦めて画像化したり、抜いてしまうのは非常に勿体ないです。諦める前に、ほんとうに制作不能かを調べて、できそうなコードがあれば試してみましょう。

時間がかかりますし、上手くいかなくてイライラすることもあるかもしれません。が、調べて実装する。これはWeb制作で重要なことです。調べて新しいことを学び使用できるようになれば、Web制作スキルは自動的にどんどん伸びていきます。

ここからは調べることでWeb制作スキルを向上させていく、5つのポイントを紹介します。

①Google検索を習慣づける

気になったこと、上手くいかないことがあったら、調べてみることを習慣づけましょう。検索するときは「何（言語/ソフト）で」「どうしたいか」をセットで入力すると良いです。

例えば、画像をCSSで丸くトリミングしたように表示させたい場合。
[画像 丸 切り抜き]だけで検索すると、画像のトリミングツールやグラフィックソフトを使った加工方法なども出てきてしまいます。
[CSS 画像 丸 切り抜き]と、何を使って行いたいかをキーワードに入れることで、表示結果を絞り込むことが出来ます。

また、見慣れないHTMLタグやCSSプロパティを発見したときも、検索すると「どんな役割を持つコードか」を教えてくれるページをすぐに開けます。

【英語で検索する】
HTMLとCSSの場合は日本語検索でもかなり多くの情報が出てきます。しかし、WordPress、Javascriptほかプログラミング言語やそのライブラリなどは英語検索のほうが良い情報が出てくることが多いです。エンジニアを目指している方であれば、英語でも検索できるようになっておきましょう。

WordPressCodex日本語版は更新停止予定と告知されているので、英語版Codexを見たいときにもよく使います。日本ではメジャーでない（日本語解説がほとんどない）プラグイン等もありますので、WordPressでの制作スキル強化を目指している方も英語検索の頻度が高くなると思います。

②1ページだけ見て諦めない

使ったことのないタグやプロパティ、メソッドなどを検索すると、検索上位にリファレンスサイトが多く表示されることが多いです。

ページ開いてみると、定義や説明が書かれています。
が……説明文が難しいですよね。例として使わせていただいたMDN Web Docsは素晴らしいドキュメントですが、専門用語が多く難解な箇所があることは否めません。

mask-image - CSS: カスケーディングスタイルシート | MDN

説明が難しく感じた場合は、ここで諦めず別のページを見てみましょう。
分かりやすい解説ページが見つけられないときは「使い方」「実例」「サンプル」などのキーワードを足して見ましょう。デモコードや使い方解説のページが表示されやすくなります。

③へぇ、で終わらせずにコードを書く

コーディングで実現したいデザインがあるときは、調べてわかったHTML構成やCSSの指定を使ってコーディングを完成させますよね。

気になるCSSプロパティ等を検索した場合も、可能な限り自分でコードを書いて、ブラウザでどう表示されるかを確認してみましょう。読んで「分かった」と思っただけよりも、実際に作てみると忘れにくいです。
試したコードや自分なりのメモ保存しておくと、コーディングのお仕事を受けた時にテンプレートとして使えることもありますよ。

④疑問があれば試してみる

Web制作・コーディング方法を検索していると、同じ記事内に「こういう場合は、こちらを使う」という紹介があったり、解説を読んで「こうしたいときは？」と疑問を持ったりすることもあります。

例えば、floatとflexどちらで要素を並べるか。
例えば、縦書きに設定した要素の中でFlexitemはどう並ぶのか。

気になることができれば調べるか、実験でコードを書いてみましょう。
自分用のメモですからhtmlファイル内に<style>で書いちゃってOKです。

【例：縦書き時のdisplay:flex】

<style>
  body{
    writing-mode:vertical-rl;
  }
  .flexcontainer{
    display: flex;
  }
  .flexitem{
    margin: 10px;
    min-width: 100px;    
    min-height: 100px;
  }
</style>

<!-- 中略 -->

<h2>縦書きの要素</h2>
<div class="flexcontainer">
    <div class="flexitem">ひとつめ</div>
    <div class="flexitem">ふたつめ</div>
    <div class="flexitem">みっつめ</div>
</div>

【ブラウザでの表示】

flexアイテムの並びについて、MDN Web Docsでは下記のように紹介されています。

row および row-reverse の値は、フレックスコンテナーの書字方向に影響されます。
flex-direction - CSS: カスケーディングスタイルシート | MDN

実際に書いてみたコードと見合わせると、書字方向に影響されるという意味が良くわかりますね。縦書き設定の場合、3つのdivを横並びに配置するのは、親要素にdisplay:flex;を指定しなくても良かったわけです。

このように、リファレンス等を読んで悩むよりも、実際に試してみたほうが理解できることも多いです。どうかな～と思ったことは、形にしてみましょう。

⑤検証ツールを併用する

検索すると解説サイトやスニペットなどで、自分が作りたいWebデザインに使えそうなコードは見つかります。が、デザインとピッタリ同じということはありません。大きさや色・配置などを調整して取り入れることになります。

この時に、検証ツールを使えると効率が格段に上がります。
検証ツールで仕上がりを見ながら調整すれば良いので、エディターとブラウザを何度も行き来しなくても良くなります。

作りたい形にならないときも、思いつく改善方法を画面上で試せます。作業時間が短縮され、CSSファイルに無駄なプロパティ指定が増えるのを防ぐことにも繋がりますね。

Chrome検証ツールの使い方は、こちらのブログにて紹介しています。

Skillhubブログ

【図解たっぷり】Chrome検証ツール入門！コーディングの“崩れる”“直せない”を解決

決まったデザインのコーディングだけではなく、CSS等を試しているときや、コーディング方法を知りたい時にも検証ツールは活躍します。

先程の縦書きレイアウトで、flex-directionを変更してみたり。

背景をツートーンカラーにするにはどうするのかな?と調べてみたり。

気になるWebデザインのコーディングを検証ツールで調べる→わからない指定を検索する→作れるようになる、という流れができるとコーディングは完璧。
どんなサイトでもコーディングできるようになりますよ。

まとめ

習ったこと以上のWeb制作スキルを手にする、３つの方法をご紹介してきました。時間と、人によってはお金もかけて学習・習得したWeb制作スキル。習ったことだけで終わらせてしまわず、更に上を目指して実践してみてください。

今回ご紹介した方法は、Web制作基礎がある程度出来てからのスキルアップ方法です。最初は基礎をしっかり学ぶ、調べてもわからない時に質問できる環境に身を置くなどすると挫折しにくいと思います。

スキルハブではHTMLやCSSの入門講座を無料公開しています。
これからスタートする方は、ぜひ講座をご確認ください。

プレミアムプランでは模写コーディングやデザイントレース等の実践的なカリキュラムもご用意。質問やレビューも無制限なので「いきなりサイトを模写するのは……」という方も着実にプロへのステップアップが可能ですよ。