HTMLはどうやって練習すればいいの？
HTMLを練習するためオススメのサイトが知りたい
こんな疑問を持つ方も多いのではないでしょうか？HTMLは他のプログラミング言語と比べて独特な書き方なので、自分でコードを書く練習をしっかりしておきたいですよね。
そこで今回は、HTMLの練習ができるオススメのサイトを6つ紹介します。また簡単な練習問題も紹介していますので、ぜひ参考にしてください。
当ブログがオススメする
HTMLの練習におすすめの
無料プログラミングサイト3選
| 1位：侍テラコヤ | 2位：Progate | 3位：ドットインストール | |
|---|---|---|---|
| サイト名 |  |  |  |
| 学べる内容 | HTML/CSS、JavaScript、jQuery、Bootstrap、PHP、Laravel、Ruby、Ruby on Rails、Python、Java、WordPress、Cloud9、Git、AWS 、ChatGPT、Webデザインなど | HTML/CSS、JavaScript、PHP、Ruby、Python、Java、Go、Git、SQL など | HTML/CSS、JavaScript、Java、Ruby、Python、C言語 など |
| 質問 相談サポート | |||
| 練習問題の数 | |||
| 特徴 | 現役エンジニアとのマンツーマンレッスン 回答率100%のQ&A掲示板が使い放題 実践的なスキルを身につけられる課題機能 | 環境構築をしなくても学べる イラスト付きのスライド式教材 スマホアプリでも学べて手軽 | レッスン動画でインプット可能 3分の簡単な動画で手軽に学べる 有料プランなら質問ができる |
| 詳細 | 公式サイト | 公式サイト | 公式サイト |
HTMLの練習ができるサイト6選と使い方
HTMLの練習にオススメなサイトを6つピックアップしました。
- 1位：侍テラコヤ
- 2位：paizaラーニング
- 3位：SKILLHUB
- 4位：Progate
- 5位：CODEPREP
- 6位：Schoo
それぞれ特徴や活用方法を解説していきます。
1位：侍テラコヤ
登録無料で100種類以上の教材が学べる侍テラコヤは、
- 回答率100％のQ&A掲示板
- 必要に応じて受けられるオンラインレッスン
といったサポート体制を整えているため、学習中に出てきた不明点を解決しながらスキルの習得が可能です。また「学習ログ」で勉強の進み具合やこれまでの学習時間を確認しながら、自分のペースで学習を進められます。
＼ 現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る
なお、侍テラコヤは入会金不要・いつでも退会OKに加え、「無料会員登録」でお試し利用ができるので「他のサービスを選べばよかった」と後悔する心配もありません。
コスパよく効率的にスキルを習得したい方は、ぜひ侍テラコヤをお試しください。
| 運営会社 | 株式会社SAMURAI |
| 実績 | ・業界最安値0円から ・累計登録者1万8,000名以上 ・講師満足度95% |
| 受講形式 | オンライン ・テキスト/動画視聴 ・マンツーマンレッスン |
| 習得できるスキル | HTML、CSS、PHP(Laravel)、Ruby(Ruby on Rails)、Python、Java、JavaScript (jQuery) 、AWS、Linux、ITパスポート、Webデザイン、WordPressなど |
| 担当講師 | 現役エンジニア/Webデザイナー |
| 対応時間 | 全日24時間 ※営業時間(10時~22時)外の質問は翌営業日に回答 |
| サポート内容 | ・無料でのお試し利用可能 ・100種類以上の教材閲覧 ・回答率100%のQ&A掲示板 ・現役エンジニアとのマンツーマンレッスン(回数制) ・就職/転職サポート(20~31歳の利用者に限る) |
| アクセス | 完全オンライン |
| 備考 | ※全プランの共通事項 ・入学金：無料 ・利用継続：最短1ヶ月から利用可能 ・全額返金保証制度あり ・1レッスン時間60分 |
・各項目は公式サイトに記載された情報をもとに掲載しています。
・料金には2024年6月時点の税込み価格を掲載しています。
＼ 現役エンジニアと1on1レッスンが可能！／
公式サイトで詳細を見る
2位：paizaラーニング
動画でHTMLを学習できるサイトです。一部有料コンテンツもありますが、入門レベルなら無料コンテンツだけでも学習できます。
HTML文を書くための練習用スペースが用意されているのが特徴です。動画を見ながら練習用スペースにコードを書いていくことで、HTMLのコードを書くスキルが養えます。
公式サイトで詳細を見る3位：SKILLHUB
こちらも動画でHTMLを学習できるサイトです。基本的には無料なので、気軽に試せます。
動画の中で練習時間が与えられているのが特徴です。そのため、動画を停止しなくても説明を聞きながらHTMLのコードを書く練習ができます。
公式サイトで詳細を見る4位：Progate
テキストを読みながらHTMLを学習できるサイトです。無料会員登録することでHTMLの基礎を習得できます。
テキストベースなので自分のペースで学習したい方にオススメです。また、練習用スペースがあるため学習内容に沿ってHTMLプログラミングの実践ができます。
公式サイトで詳細を見る5位：CODEPREP
こちらもテキストを読みながらHTMLを学習できるサイトです。基本的に無料で、ログインは必要ですがSNSアカウントも使えます。
練習用スペースがあり、テキストを読みながらHTMLのコードを書く練習ができます。また、質問コーナーもあるため困りごとが発生したら相談すると良いでしょう。
公式サイトで詳細を見る6位：Schoo
動画でHTMLを学習できるサイトです。月額料金はかかりますが、すべての講座動画が見放題となるため、講師や受講内容を自由に選べるのが魅力といえます。
使い方としては、Webブラウザとは別に練習用のテキストエディタを開いておき、動画を見ながらテキストエディタでHTML文を書いていくと良いでしょう。
また、生放送授業がほぼ毎日行われており、プロの講師に直接質問できるのが大きな特徴です。生放送授業は無料なため、一人で学習するのが好きでない方は受講してみてはいかがでしょうか。
公式サイトで詳細を見る【すぐできる】HTMLの練習問題をサンプルコード付きで3つ紹介
練習サイトを選ぶのも見るのも大変……。という方のために、HTMLの練習問題を3つ用意しました。空のHTMLファイルを作成して、解いてみてください！
【HTMLの練習問題1】HTMLの基本構造を把握する
■問題
Webブラウザで開いたとき、以下の表示となるHTMLコードを書いてください。
■解答
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLとは？</title>
<meta name="description" content="HTMLとは何なのか、詳しく解説します。">
</head>
<body>
<h1>HTMLとは？</h1>
<p>HTMLは、Webコンテンツを表現するためのプログラミング言語です。</p>
</body>
</html>
■解説
HTMLにはフォント調整、画像やリンクの挿入など、様々な機能を持った「タグ」が用意されています。<タグ名>～</タグ名>のように、タグの開始と終了で文字を挟むのが基本です。ただし、中には終了タグが不要なものもあります。
1行目<!doctype html>は、ドキュメントのタイプが「HTML」であることを指定しています。HTMLコードを書く際は頭に必ず入れましょう。
2行目<html>～13行目</html>で囲まれた部分に、Webページで表現したい内容を書いていきます。<html>の中には、headタグ、bodyタグの順に記述する必要があります。
headタグにはWebブラウザや、検索エンジンがWebページの内容を理解するための情報(タイトルや説明)が入ります。bodyタグには、実際にWebページに表示する内容を記述していきます。
4行目<meta charset=”UTF-8″>は、Webページの文字コード(charset)を指定しています。「UTF-8」が推奨されているので、解答のように記載すれば基本的に大丈夫です。なお、ここで使われているmetaタグはWebページの情報を設定するタグで、</meta>のように終端を付ける必要がありません。
5行目は、titleタグでWebページのタイトルを指定しています。Googleなどで検索した時に表示されるタイトルなので、Webページの内容を的確に表す言葉を入れましょう。
6行目はmetaタグで、Webページの説明文(description)を指定しています。Googleなどで検索した時に表示される説明文なので、タイトル同様的確な内容を入れましょう。
9行目以降がbodyタグで、実際にWebブラウザ上で表示される部分となります。h1タグは大見出しを意味し、1つのWebページに1つだけ入るのが基本です。
他にも見出しはh2～h6まであり、数字が大きくなるほどWebブラウザ上での表示サイズが小さくなります。どの見出しを使用するかはWebページの内容次第です。
10行目は大見出しに対する具体的な説明内容を記載しています。pタグを使うと、文章の中に段落を作れるのです。
＼ 現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る
【HTMLの練習問題2】箇条書き
■問題
Webブラウザで開いたとき、以下の表示となるHTMLコードを書いてください。
■解答
※bodyタグ以外は練習問題1と変わらないため、省略します。
<body>
<h1>HTMLとは？</h1>
<p>HTMLは、Webコンテンツを表現するためのプログラミング言語です。</p>
<h2>HTMLを覚えるメリット</h2>
<ul>
<li>初心者でも簡単に習得できる</li>
<li>Webの仕組みがわかる</li>
<li>Webデザインもできる</li>
</ul>
</body>
■解説
「HTMLを覚えるメリット」は大見出しより一階層下のh2タグを使用します。
また、箇条書きにはulタグまたはolタグを使用します。
ul = unordered list(順序がないリスト)
ol = ordered list(順序付きリスト)
を意味します。今回は順序がないリストなのでulタグを使うのが正解です。(5、9行目)
リストの各項目はliタグでそれぞれ囲みます。(6～8行目)
ちなみにですが、olタグを使うと「1, 2. 3.…」と頭に番号が付きます。
＼ 現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る
【HTMLの練習問題3】文字や背景の装飾
■問題
Webブラウザで開いたとき、以下の表示となるHTMLコードを書いてください。
■解答
※bodyタグ以外は練習問題1と変わらないため、省略します。
<body bgcolor="black">
<font color = "white">
<h1>HTMLとは？</h1>
<p>HTMLは、Webコンテンツを表現するためのプログラミング言語です。</p>
<h2>HTMLを覚えるメリット</h2>
<ul>
<li>初心者でも簡単に習得できる</li>
<li>Webの仕組みがわかる</li>
<li>Webデザインもできる</li>
</ul>
</font>
</body>
■解説
背景色を変更するには、bodyタグのbgcolor属性に背景色を設定します。1行目bgcolor=”black”を追加したことで、背景が黒に変更されました。
また、文字の色を変えたい場合はfontタグを使い、color属性に文字色を設定します。2行目<font color = “white”>を追加したことで、文字色が白に変更されました。
＼ 現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る
【効果が変わる】HTMLの練習を効果的に行うための「写経」とは？
練習問題が解けなかった方には、解答のHTMLコードをそのまま書き写すことをオススメします。HTMLに関わらず、プログラミングの知識やスキルを高めるには「写経」がとても効果的です。
プログラミングで言う写経とは、参考サイトや書籍などのコードを真似してそのまま書いてみることを指します。お手本のコードを書き写すことで、言語ごとの基本的な書き方が頭に入りやすく、自分で正しいコードを書いているという自信も得られるのです。
プログラミングでの写経についてもっと深く知りたい方は、以下記事がオススメです。
HTMLの基礎を学ぶなら、アプリや書籍の活用もおすすめ
練習サイトや写経以外にも、効果的なHTMLの学習方法が2つあります。
- 書籍
- スマホアプリ
書籍は情報の信ぴょう性が高く、幅広い知識を習得できるのがメリットです。書籍でHTMLを学びたい方は、以下記事を見てみてください！
スマホアプリは、通勤などの隙間時間にも学習できる手軽さがメリットです。スマホアプリでHTMLを学習したい方は、以下記事も要チェックです！
＼ 現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る
挫折なくHTMLの習得を目指すなら
ここまでの解説を踏まえ、独学でHTMLを習得しようと考えている人のなかには、
独学で習得できるかな…
途中で挫折したらどうしよう…
と不安な人もいますよね。
実のところ、HTMLといったプログラミングの学習途中で挫折する独学者は多くいます。事実、弊社の調査では
- 不明点を聞ける環境になかった
- エラーが解決できなかった
- モチベーションが続かなかった
などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
また、こうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では
- 確実にスキルを身につけられると思ったから
- 独学では不安がある
- 効率よく学べそう
などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。
調査概要：プログラミングに興味がある方の意識調査
調査期間：2021/11/19~2021/12/3
対象者：プログラミング学習を検討している10代~50代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES
＼ 現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る
加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。
上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。
いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とHTMLの習得自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。
そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。
| 料金 | 月分割4.098円~ |
| 実績 | ・累計指導実績3万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99% |
侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。
先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。
しかし、侍エンジニアでは
- 現役エンジニア講師によるマンツーマンレッスン
- 現役エンジニアに質問できるオンラインでのQ&Aサービス
- 不安や悩み・勉強の進み具合を相談できる学習コーチ
といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。
侍エンジニアのサポート体制
また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でも効率的に必要なスキルだけを習得可能です。
侍エンジニアのカリキュラム例
最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。
なぜ侍エンジニアが挫折せずHTMLを習得できるのか気になる人はぜひ公式サイトをご覧ください。
公式サイトで詳細を見るまとめ
今回はHTMLの練習ができるサイトやHTMLの練習問題、その他学習方法についてご紹介しました。
HTMLは他の言語と比べて独特な書き方で、最初は慣れないかもしれません。しかし、あらゆるWebサイトはHTMLで作られているため、書き方を練習すれば仕事で活かせるチャンスはぐっと広がります。
また分からなくなったらこの記事を見に来てください！
＼ 現役エンジニアと1on1レッスンが可能！／
侍テラコヤ詳細を見る
