HTMLを練習するためオススメのサイトが知りたい
こんな疑問を持つ方も多いのではないでしょうか？HTMLは他のプログラミング言語と比べて独特な書き方なので、自分でコードを書く練習をしっかりしておきたいですよね。
そこで今回は、HTMLの練習ができるオススメのサイトを5つ紹介します。また簡単な練習問題も紹介していますので、ぜひ参考にしてください。
この記事の目次
HTMLの練習ができるサイト5選と使い方
HTMLの練習にオススメなサイトを5つピックアップしました。
- 1.paizaラーニング
- 2.SKILLHUB
- 3.Progate
- 4.CODEPREP
- 5.Schoo
それぞれ特徴や活用方法を解説していきます。
1.paizaラーニング
動画でHTMLを学習できるサイトです。一部有料コンテンツもありますが、入門レベルなら無料コンテンツだけでも学習できます。
HTML文を書くための練習用スペースが用意されているのが特徴です。動画を見ながら練習用スペースにコードを書いていくことで、HTMLのコードを書くスキルが養えます。
2.SKILLHUB
こちらも動画でHTMLを学習できるサイトです。基本的には無料なので、気軽に試せます。
動画の中で練習時間が与えられているのが特徴です。そのため、動画を停止しなくても説明を聞きながらHTMLのコードを書く練習ができます。
3.Progate
テキストを読みながらHTMLを学習できるサイトです。無料会員登録することでHTMLの基礎を習得できます。
テキストベースなので自分のペースで学習したい方にオススメです。また、練習用スペースがあるため学習内容に沿ってHTMLプログラミングの実践ができます。
4.CODEPREP
こちらもテキストを読みながらHTMLを学習できるサイトです。基本的に無料で、ログインは必要ですがSNSアカウントも使えます。
練習用スペースがあり、テキストを読みながらHTMLのコードを書く練習ができます。また、質問コーナーもあるため困りごとが発生したら相談すると良いでしょう。
5.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タグを使うと、文章の中に段落を作れるのです。
【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.…」と頭に番号が付きます。
【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">を追加したことで、文字色が白に変更されました。
【効果が変わる】HTMLの練習を効果的に行うための「写経」とは？
練習問題が解けなかった方には、解答のHTMLコードをそのまま書き写すことをオススメします。HTMLに関わらず、プログラミングの知識やスキルを高めるには「写経」がとても効果的です。
プログラミングで言う写経とは、参考サイトや書籍などのコードを真似してそのまま書いてみることを指します。お手本のコードを書き写すことで、言語ごとの基本的な書き方が頭に入りやすく、自分で正しいコードを書いているという自信も得られるのです。
プログラミングでの写経についてもっと深く知りたい方は、以下記事がオススメです。
HTMLの基礎を学ぶなら、アプリや書籍の活用もおすすめ！
練習サイトや写経以外にも、効果的なHTMLの学習方法が2つあります。
- 書籍
- スマホアプリ
書籍は情報の信ぴょう性が高く、幅広い知識を習得できるのがメリットです。書籍でHTMLを学びたい方は、以下記事を見てみてください！
スマホアプリは、通勤などの隙間時間にも学習できる手軽さがメリットです。スマホアプリでHTMLを学習したい方は、以下記事も要チェックです！
まとめ
今回はHTMLの練習ができるサイトやHTMLの練習問題、その他学習方法についてご紹介しました。
HTMLは他の言語と比べて独特な書き方で、最初は慣れないかもしれません。しかし、あらゆるWebサイトはHTMLで作られているため、書き方を練習すれば仕事で活かせるチャンスはぐっと広がります。
また分からなくなったらこの記事を見に来てください！
