HTML/CSSのコーディング技術を実務レベルまで高めることは、Web制作の案件を請け負ううえで欠かせません。しかし、自己流で学んでもなかなか上達は見込めないもの。
その点、コーディングの学習サイトを使えば効率的にコーディング技術を磨けます。ただし学習サイトは多種多様なため、選び方が難しいのも事実です。
そこで本記事では、HTML/CSSのコーディングを学べるおすすめサイトを入門編と実務レベル編に分けて8種類紹介します。入門レベルのサイトで基礎を学んだら、次は実務レベル編のサイトにも挑戦するといった具合に、段階的に取り組むと効果的です。この記事に戻って来れるようにブックマークしておくと便利です。
- コーディング練習におすすめのサービス
- 「写経」と「模写」2種類の練習法と、そのやり方
- コーディング力を向上させるために意識すべき3つのポイント
- コーディング練習の具体的な5ステップ
30日間でコーディングを学べる！
HTML/CSSコーディングを最短で学び切りたい方には、ZeroPlus Gateがおすすめです！
ZeroPlus Gateは、たった30日間でWebサイトの制作を学べる学習プログラムです。専属のメンターがサポートしてくれるので、初心者でも安心。受講後には基本的なWebサイトをひとりで制作できるレベルになっています！短期間で実力をつけたい方はZeroPlus Gateを受講してみましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
HTML/CSSコーディング練習の種類は「写経」と「模写」の2種類
コーディングの練習法には「写経」と「模写」の2つの種類があります。2つの練習法の違いをかんたんに表したのが以下の画像です。
大まかにいうと見本のコードを書き写す練習法が「写経」、見本のコードを見ずに、自ら考えてコードを書く練習法が「模写」と捉えることができます。次からは、写経と模写についてもう少し詳しく解説します。
写経
写経とは、見本のコードを見ながらWebサイトを複製する練習法です。写経を通じて、正しい文法でコードを書く感覚が身につきます。
一方、誤った文法で書かれたコードを見本に選んでしまうと、誤った技術が身につきます。そのため、どのコードを見本に選ぶかは重要なポイントです。
本記事で紹介する学習サイトのコードは、プロのエンジニアが監修しており信頼性が担保されているため、安心して写経に使えます。ただし、写経はあくまでコーディングの文法に慣れるための練習法です。
コーディングスキルを実務的なレベルまで向上させるためには、自らの頭で考え、コードを書く訓練が欠かせません。次に解説する模写へと早めに移行するように意識しながら、写経に取り組みましょう。
ただ、漢字の書き取りみたいに覚えるのが得意だよって方には向いてるかもですね！
模写
模写とは、コードを見ずに見本のWebサイトを複製する練習法です。
実際に模写を始めてみると、どのようにコードを書けば見本に近づけられるか分からず、苦労するかもしれません。しかし、自分で解決策を調べながら、少しずつサイトを制作していく過程で、実務に対応できる力が身についていくものなのです。
一口に模写といってもいくつか手法があるため、代表的な方法を2種類紹介します。
見本のWebサイトを見ながらの模写
見本のWebサイトをブラウザに写してコーディングを行う方法は、初めて模写に触れる場合におすすめです。検証ツール（デベロッパーモード）を使って、見本のサイトがどんなコードで書かれているか見られるためです。
基本的に模写は見本のコードを見ずに行うのが望ましいとされています。しかし、はじめから「絶対にコードを見ないルール」を設けてしまうと、模写が全く進まず嫌になるかもしれません。
検証ツールを介して見本コードを確認しながらでも、早くサイトを完成させられる方が上達の近道です。むしろ検証ツールの使い方もまた、コーダーに必要なスキルのため、一石二鳥の練習法といえます。
検証ツールの使い方については、以下の記事で解説しています。
デザインデータを見ながらの模写
見本のWebサイトを確認しながらの模写に慣れてきたら、デザインデータを見ながらの模写にも挑戦してみましょう。
デザインデータとは、AdobeXDやFigmaなどデザインツールで作成された、Webサイトの見本データを指します。現場ではWebデザイナーの作ったデザインデータを基に、コーダーがコーディングを行う流れで、サイト制作が進みます。
デザインデータを見ながらの模写は実務に近い練習法のため、案件に挑戦する前の仕上げに最適です。
ただし検証ツールを使って見本のコードを見られないうえに、デザインツールの扱い方も覚える必要があるため、Webサイトを見本に模写を行う場合と比較して、難易度は上がります。
HTML/CSSコーディング練習の入門編としておすすめのサービス3選
コーディングの入門編としておすすめのサービスは、以下の3つです。
- Progate
- ドットインストール
- ZeroPlus Gate
Progate─初めてコーディングに触れるには最適のサイト
画像引用：Progate
- 環境構築なしで学習を始められる
- 丁寧な解説付きで理解しやすい
- ゲーム感覚で楽しく学習できる
Progateはコーディングの入門に最適な学習サイトです。レッスンは、スライドで知識をインプットしたあとに、コーディングを実践する流れで進みます。ロールプレイングゲームのように、カリキュラムを進めるとアカウントがレベルアップするため、楽しく学べるのが特徴です。
また大きな特色として環境構築なしで、すぐコーディングに取り組めます。環境構築とは、テキストエディタと呼ばれるアプリをインストールして、コーディングできる状態を作るまでの事前準備のことです。初めての人にとって環境構築は手間がかかる工程のため、いきなりつまづきかねません。
そのため環境構築なしでコーディングに触れられるProgateは、初めての学習サイトとしてうってつけなのです。
ただしコーダーにとって「環境構築」は必須の技術です。基本的なコードの書き方を学んだら早めに、別の学習サービスへ移行することをおすすめします。
また無料版では学習できる教材が限られており、応用編までを学ぶには有料版（※1）に登録する必要があります。
※1：有料版の料金｜税込990円/月〜 （2024年9月1日現在）
見た目も綺麗ですし、ゲーム感覚で楽しめるので「プログラミングってどんなもんやろ」のさわりとしてすごくいいサービスだと思います！
ドットインストール─3分程度の動画で効率よく学べる
画像引用：ドットインストール
コーディングの入門編としておすすめなもうひとつの教材は、ドットインストールです。
- 動画講義メインのプログラミング学習サービス
- 動画一本あたりの時間は約3分で、スキマ時間に学びやすい
- 有料会員なら講師への質問サービスも使える
ドットインストールは写経によるコーディング練習を体験できるサイトです。環境構築からカリキュラムが始まるため、Progateの次に取り組む教材として適しています。
動画には、講師が細やかな解説を交えながら実際にコーディングを進める様子が収められています。ユーザーは動画を見ながら講師と同じコードを書くことで、コーディングのテクニックや文法などを身につけられるのが特徴です。
それぞれの動画がおよそ3分と短時間であるため、スキマ時間で学べる点も好評を得ています。
ただし押さえておくべき点は、Progateと同じく無料で学べる教材の種類には限りがあることです。一方、有料版（※2）を利用すれば全ての教材を視聴でき、加えて月に5回まで講師へ質問できます。
※2 ：有料版（プレミアムプラン）の料金｜税込1,280円/月〜（2024年9月1日現在）
ZeroPlus Gate─無料で30日間コーディングが学べるスクール
- 専属メンターが目標設定から学習の進め方までサポート
- 現役エンジニアに回数無制限で質問ができる
- 50本以上の豊富な動画教材でコーディングを学習
ZeroPlus Gateは、無料でコーディングを集中的に学べるプログラミングスクールです。豊富な動画教材でスキマ時間に学習できます。そのため、ドットインストールと類似したサービスと思われるかもしれません。
ZeroPlus Gateは、エンジニア講師へ無制限で質問が可能です（ドットインストールは月5回まで）。学習につまずいたとしても疑問を速やかに解消できます。また、AdobeXDのデザインデータ（Web版）をもらえる点も。そのため1周目は写経に取り組み、2周目はデザインデータを使った模写に挑戦するといった使い方ができます。
一方で、学習期間が30日間に限られる点は「Progate」や「ドットインストール」に比べて弱点といえます。しかし、ご安心ください。ZeroPlus Gateでは個々の利用者にメンターがつき、学習に迷わないようにサポートしてくれます。そのため短い期間であっても、効率的にコーディングの技術を身につけられるのです。
無料でメンターもついて、実践的な知識もつけられて、VSCodeで本格的なコーディングの練習ができる！すばらしい！！！
僕が初学者だったら、とりあえず申し込んで質問しまくります。
ZeroPlus Gateの気になる評判は、以下の記事で詳しく解説しています。
模写コーディングにはデザインツールのインストールが必要！？
多くの場合デザインデータをもとにした模写コーディングには、デザインツールのインストールが必要です。
学習サイトでは、主にAdobeXDかFigmaのデザインデータが渡されます。デザインデータには、大きく分けてWeb版とダウンロード版があります。このうちダウンロード版については、デザインツールがインストールされたPCでないとデータを開けません。たとえばAdobeXDのダウンロード版データは、AdobeXDのアプリが入ったPCでなければ開けないわけです。
現在のところAdobeXDは有料でしか利用できないのに対し、Figmaは機能に制限があるものの無料で利用できます。これからデザインデータからの模写に取り組むなら、Figmaを利用していくことがオススメです。
なお、ZeroPlus Gateで配布しているAdobeXDのWeb版のデザインデータに関しては、アプリを持っていなくてもブラウザで閲覧できます。
HTML/CSSコーディング練習の実務レベル編としておすすめのサービス3選
Web制作の実戦的なコーディング練習をするときにおすすめなサービスはこの3つです。
- Udemy
- ペンギンブログ
- 無料コーディング相談所
- Codejump
- 模写修行
Udemy─豊富な教材の中から自分に合ったものを選べるサイト
画像引用：Udemy
- 買い切り型のプログラミング教材販売サイト
- HTML/CSSコーディングに関する教材は3,000種類以上
- Q&A機能が設けられている教材もある
Udemyはプログラミングに関する教材を購入できるプラットフォームです。HTML/CSSのコーディングに関する教材も豊富にそろっており、自分のレベルや目的に適した教材を選びたい人におすすめできます。
各教材の詳細ページでは「このコースの受講対象者」欄を確認して、自分に適した内容か判断しやすいように設計されています。とはいえ教材の種類があまりに膨大なため、どれを選んで良いか悩んでしまうかもしれません。教材ごとに制作者が異なるためクオリティもバラバラで、かなり慎重な教材選びが求められます。
じっくり時間をかけて、商品やサービスを選ぶ手間が苦にならない人でないと、ストレスを感じてしまうかもしれません。
PENGIN BLOGー無料で3種のコーディング課題に取り組める
画像引用：【デザインカンプ無料配布】未経験からのコーディング学習ステップ - 株式会社PENGIN
- 豊富な実績を持つWeb制作会社が提供する学習サイト
- 【初級・中級・上級】レベル別に用意された3つの無料課題
- 課題のポイントがブログ形式でまとめられている
PENGIN BLOGは、Web制作会社である「株式会社PENGIN」が提供する学習サイトです。
初級・中級・上級からなる3種類の課題が用意されており、自分のレベルに合わせて模写コーディングに取り組めます。教材数は少ないもののその分教材選びのストレスが少なく、すぐに課題にチャレンジできる点は強みです。
またサイトがブログの形式を取っている強みを活かし、課題に挑戦する際に押さえておくべきポイントが記事にまとめられています。
ただしデザインデータはAdobeXDのダウンロード版でしか受け取れません。ダウンロード版のAdobeXDデータを開くためには、Adobe社のサブスクリプションサービス「AdobeCC（月額7,780円）」に加入する必要があります。
無料コーディング練習所ー7種類のコーディング課題に取り組める学習サイト
画像引用：無料コーディング練習所
- 7種類の無料課題を通じて多様なコーディングの手法が学べる
- Figma/AdobeXDどちらのデザインデータも配布されている
- 見本サイトを見ながらの模写が行える
無料コーディング練習所は、猫ぽっぽ株式会社が運営する「未経験からWebデザイナーへ！」というサイト内の学習コンテンツです。無料とはいえ、コーディングスキルをがっちり鍛えたい人にはおすすめできます。
課題ごとにさまざまなコーディングの手法が取り入れられており、コーダーとしての引き出しを増やせるためです。またHTML/CSSのみならず、jQueryを含む課題も用意されており、動きのあるサイトの作り方も学べます。
さらにはデザインデータからの模写だけではなく、見本サイトを見ながらの模写も行えるため、初めて模写に取り組みたいという人の教材としても適しています。これといったデメリットもなく、非常に使いやすい学習サイトです。
Codejump（旧Codestep）─豊富な模写コーディング教材を無料で利用できるサイト
画像引用： Codejump
- 模写コーディング用の課題が無料で豊富に提供されている
- 入門編から上級編まであり、レベルに合わせた学習ができる
- jQueryやWordPressを学習できる課題もある
Codejumpは模写用の課題を配布する媒体としては、最も規模の大きな学習サイトです。入門編から上級編まで用意されており、レベルに合わせて学習できます。
HTML/CSSを使った課題のみならず、難しいとされているWordPressのオリジナルサイト作成まで取り組めるため、確実にコーディングスキルを高められます。
それぞれの課題には目安となる報酬単価も記載されており、自分の技術の価値を数値で明確につかめる点も、Codejumpに取り組む大きなメリットです。デザインデータはFigma、AdobeXDの両方で配布されています。
模写修行─実践に即したコーディング教材を購入できる
画像引用：模写修行
- 実務の流れを意識した教材を提供
- コーディングを効率的に行うための独自ノウハウも満載
- 2種類の無料課題を通じてお試し学習が可能
模写修行は、コーディング用の教材を購入できる学習サイトです。単にコーディングスキルを向上させるのみならず、実務的な力を伸ばしたい方には特に適しています。
なぜなら実務を意識した設計がなされており、現場で効率的にコーディング作業を進めるための、独自ノウハウや手順が提案されているからです。また、現場で求められやすいCSSの記述ルール「CSS設計」にのっとってコーディングを進める内容のため、なおさら実践的です。
無料で利用できる教材も2種類あるため、まずはお試しで使ってみましょう。
学習形式はFigmaまたはAdobeXDのデザインデータをもとにした、模写のスタイルが取り入れられています。いずれかのアプリケーションの準備は必須です。また模写修行にはJavaScript、jQueryを含む課題は用意されていません。これらを学びたい場合には、別の学習サイトを利用する必要があります。
初めは思った以上にできないです。その絶望があなたを成長させます。
僕もProgate終わってから挑戦したら、ヘッダーすらまともに作れなかったです。
そんな模写を無料でさわれ始めて、しかも解説用のコードまでついてるなんて、僕だったら絶対やってます！！！
模写学習のスタートは「ZeroPlus Gate」で
実践的な模写サービスは、
スキルを伸ばすために便利です。
しかし、いきなり難易度の高い模写課題に取り組むと
全然進まず、嫌になるかもしれません。
無料の学習サービス「ZeroPlus Gate」なら
適度な難易度で、基礎が正しく身につく課題を
用意しているため、模写が初めての方にもおすすめです。
（もちろん上級者向けの課題もあります）
スムーズかつ、楽しく、
コーディング学習を進められます。
HTML/CSSコーディング力を向上させるために意識すべき3つのポイント
コーディング力を向上させるために、意識すべきポイントは以下の通りです。
- 段階を踏んでレベルアップする
- HTMLとCSSを正しく記述する
- ひたすら量をこなす
段階を踏んでレベルアップする
コーディングの練習は、段階を踏んでレベルアップしていきましょう。
いきなり難しいサイトにチャレンジすると、思うように学習が進まずに挫折の原因となってしまいます。
この記事で紹介したサービスは、どれも初級編から段々レベルアップしていくことに適しています。まずは簡単なサイトから練習を始めてみましょう。
HTMLとCSSを正しく記述する
HTML/CSSを正しく記述することも、コーディング力の向上に欠かせません。HTMLやCSSの記述にはルールがあります。このルールを知っておかないと、思い通りのコーディングができないほか、あとで自分が見返したときにわかりにくくなってしまいます。
HTMLが正しく書けているかを確認するには、W3C Markup Validation Service というWebサービスを利用するとよいでしょう。エラーがある場合はこのツールですぐにわかります。
ひたすら量をこなす
コーディング力の向上にもっとも大事なことは、ひたすら量をこなすことです。たくさんのWebサイトを模写することで、様々な技術に触れることができます。
コーディングの実務は予想外の実装を行うことも多々あります。そのような実装に対応できるよう、あらかじめ幅広い知識を身につけておきましょう。
実装のモチベが上がるようなサイトや挑戦してみたいアニメーションがあるサイトなどを模写して爆成長しましょう。
HTML/CSSコーディング練習の具体的な5ステップ
ここまでコーディングの練習方法について解説してきましたが、「具体的な手順がよくわからない」という方も多いでしょう。
ここでは、コーディング練習の具体的な手順について解説します。
- 教材を決める
- 画像をダウンロードする
- 全体的な構成を書き出す
- コーディングに挑戦する
- 模範解答のコードを確認する
1．教材を決める
まずは学習する教材を決めましょう。この記事で紹介したWebサイトやサービスを使えば、コーディング力を強化できます。
入門編のコーディングサービスを一通りやったあとは、実務レベルのコーディングにも挑戦してみましょう。
学習するコーディングの教材がまだ決まっていない方は、ZeroPlus Gateがおすすめです。無料で1ヶ月間の学習サポート、デザインからコーディングまで学び切れます！
「まずはお試し」くらいの気持ちで、お気軽にお申し込みください。
2．画像をダウンロードする
コーディングを始める前に、使用する画像をダウンロードしておきましょう。多くの教材では画像データが用意されているので、その画像を使用します。
コーディングで画像を使用するときは、HTMLファイルと同じ階層に画像を格納するフォルダを作成する必要があります。Web制作を行うなら、今後も同様の作業を行う機会は多いので、覚えておきましょう。
3．コーディングに挑戦する
使用する教材を決め、画像をダウンロードしたら、いざコーディングに挑戦してみましょう。
コーディングのやり方は、人それぞれです。
- 全体的な構成を考えてから始める
- 細かいパーツから作っていく
- HTMLをすべて書いてからCSSを書く
- HTML→CSSの順で表示を確認しながら進める
自分がやりやすい方法でコーディングを行っていきましょう。
4．見本通りに表示されているか確認する
コーディングができたら、教材の見本通りに表示できているか確認しましょう。
このとき確認するのは以下の事項です。
- 色やフォントは合っているか
- パーツの位置はずれていないか
- 余白の大きさは正しいか
特にデザインカンプからコーディングを行う場合は、要素同士のpx数を正確に記述しましょう。デザインカンプ通りのコーディングを、実務で求められることも少なくありません。そのため、指定された色やフォント、配置をコーディングで表現できる技術を身につけることが大切です。
5．模範解答のコードを確認する
コーディングが完了したら、教材の模範解答を確認しましょう。
コーディングの結果、見本と同じように表示できていても、コードが読みづらく・保守性の高いものでなければ実務ではあまり活かせません。そのため、見本のコードと見比べて、どのように改善したらきれいにコードが書けるのかを学習することが大切です。
HTML/CSSコーディングの練習にはZeroPlus Gateがおすすめ！
ここまで、HTML/CSSコーディングを練習できるサービスをいくつか紹介しました。
さまざまなサービスがありますが、実務で使えるコーディングを勉強してみたい方は、ZeroPlus Gateがおすすめです。HTML/CSSの独学で成果を出すのは簡単ではありませんが、ZeroPlus Gateを受講する1ヶ月はきっとあなたの力になるはずです。
分からないことはメンターと講師が徹底的にサポートするので、少しでも興味のある方はぜひ受講を検討してください。
＼受講料は完全無料！／
「独学で進めたい！」という人はこちら
ZeroPlus Mediaでも、HTML/CSSコーディングの練習になるデザインデータを提供しています。
ブログサイトを作成する流れで、デザインデータからのコーディングに挑戦できます。「独学で進めたい」という方は、ぜひこちらを活用してください。
デザインデータのダウンロードはこちら
なお、デザインデータはAdobeXDで作成していますが、AdobeXDを導入せず、こちらのリンクからデザインデータを開くこともできます。
こちらがこのデザインデータのコーディング解説記事です。
上記のデザインデータは、ZeroPlus Mediaが提供する「Webサイト制作講座」の一部です。講座の内容に従って学習を進めることで、より効果的に学習を進めていくことができます。れます。
「Webサイト制作講座」は以下5つのSTEPで学習できるので、自分の学習段階に合わせて、教材を選んでみてください。
- STEP1：HTML/CSSの基礎
- STEP2：JavaScript
- STEP3：jQuery
- STEP4：WordPressの基本
- STEP5：デザインデータからWordPress化までのコーディング
こちらのページから各講座を受講できるので、ぜひ活用してください。
まとめ：写経で慣れたら模写をしよう
コーディングの練習ができるサービスは、以下のものがおすすめです。
コーディングの練習には「写経」と「模写」という2つの方法があります。写経でコーディングに慣れたら模写を行いましょう。模写コーディングは数をこなすほどレベルアップにつながります。
段階を踏んでレベルアップしていくこと、HTML/CSSを正しく記述することを意識してコーディングの練習を行っていきましょう！
それこそ、YouTubeでプログラミングの動画が溢れている時代ですし、生成AIを活用すればロードマップを引くこともできます（精度は聞き方によりますが）
できる範囲から触ってみて、いろいろな方法やさまざまなWebサイトを活用しながら、学習を進めていきましょう！
その入り口の一つとしてZeroPlus Gateは、かなりアリな選択だと思います。
無料でコーディングを学べるスクール
ZeroPlus Gateでは、実務レベルのコーディングを完全無料で学べます。専属メンターのサポートや現役エンジニアに質問もできるから、爆速で成長できます！たった30日間でコーディングを学べるのはZeroPlus Gateだけ。
あなたも完全無料でプロレベルのコーディング力を身につけてみませんか？
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
