HTMLを学習したい学生必見！学習方法やおすすめのサイトを紹介

• 1. HTMLを使用した仕事の内容
• 2. HTMLの学習をするために使用するおすすめツール5つ
• 3. HTMLを学習する手順
• 4. HTMLの基礎知識を習得するためのおすすめ学習サイト
• 5. 学生向け！HTMLの次に学習すべきもの

1. HTMLを使用した仕事の内容

HTMLを使用する職種には主に以下の3つがあります。
 

• ・コーダー

  ・Webデザイナー（一部）

  ・フロントエンドエンジニア

コーダーは、Webサイト全体の構成を考えるWebデザイナーがデザインした構成案を、Webブラウザ上で閲覧できる形にコーディングする人のことです。
構成案に合わせて、HTMLやCSSを主に使用し、構成案のイメージに沿ってコーディングを実施します。

Webデザイナーは、クライアントの要望に応えるためにWebサイト全体の構成やデザインを担当する職業です。サイト全体の構成を決めたあと、IllustratorやPhotoshopなどのグラフィックソフトを用いてサイトの配色やロゴのデザインを作成します。デザイナーのスキルによってはコーディングまで担当することもあり、HTMLやCSS、JavaScriptを用いて画面のコーディングを行います。

フロントエンドエンジニアは、JavaScriptなどをメインとして使用し、Webブラウザ上で動作する部分を実装する人のことです。コーダーはHTMLやCSSをメインに扱うのに対して、フロントエンドエンジニアはJavaScriptやPHPを使用した構築を担当します。

2. HTMLの学習をするために使用するおすすめツール3つ

HTMLを学習するための3つのおすすめツールを紹介します。

初心者におすすめのBrackets

Bracketsは、初心者のコーダーにおすすめのテキストエディタです。インストールさえすればすぐに起動することができて、表示設定も簡単に日本語化することができます。
オープンソースのテキストエディタなので、無料で使用可能です。

拡張機能が豊富で、テキストで変更した箇所がリアルタイムで確認できる「ライブプレビュー」など、初心者でもスムーズに作業を進められる便利な機能が備わっています。

作業が捗るAtom

2015年に登場した比較的新しいAtomは、Web開発者が作業を効率化するための機能を網羅している優秀なエディタです。

Atomの特徴は、とにかく使いやすいユーザーインターフェースであることです。タブでエディタを分別して表示することができます。加えて、無料で機能を追加することができるパッケージも豊富にあります。

また、1つのウィンドウで単一のファイルやプロジェクト全体、複数のプロジェクトと、自分の開発スタイルに合わせて自由自在に扱うことができます。

さまざまな言語に対応しているVisual Studio Code

エンジニアの中でも最も多く利用されているのが、Visual Studio Codeです。通称VSCodeとも呼ばれています。

他のエディタと比べて、単にエディタとしての役割を持つだけではなく、プログラミングやシステム開発に関する作業を効率的に行うことができる機能を豊富に持つソフトウェアです。

オープンソースのため、誰でも無償で利用することができます。拡張機能も多く提供されており、コーディングやプログラミングの目的に合わせて最適な環境を作ることが可能です。

3. HTMLを学習する手順

HTMLの学習は主に以下の3つの手順で進めます。
 

• ・基礎知識を身につける

  ・作ってみたいサイトの模写を繰り返す

  ・オリジナルのサイトを作成してみる

それぞれの内容や学習時に気をつけるべきポイントについて詳しく解説します。

基礎知識を身につける

まずは、Webサイトがどのように公開されているのか、インターネットの仕組みやWebサイトを表示する仕組みについて学習します。
その後、HTMLやCSSの基礎について学びます。HTMLの基礎を学ぶことができるオンライン学習サービスや書籍を活用して、HTMLがどんなものであるのかを体感してみましょう。

作ってみたいサイトの模写を繰り返す

ある程度基礎を学習した後は、作ってみたいサイトを参考にしてひたすら模写を繰り返しましょう。
模写とは、すでに完成しているサイトを参考にしながら、自分の手で1からコーディングしていく練習方法です。

ある程度知識がついてきたら、アウトプットをひたすら繰り返すことで、これまでインプットしてきた知識が定着します。
自身の持っている知識を点として考えて、点と点を組み合わせてどうすれば理想のサイトを作り出せるかを考えることが上達する近道です。

オリジナルのサイトを作成してみる

参考サイトの模写を繰り返し作成した後は、オリジナルのサイトを作成してみましょう。
サイトの模写で取り入れたWebサイトの表現方法などを、自分のサイトに落とし込んでいきます。
どう組み合わせるかを考えて作り出すことが上達のために重要なポイントです。

オリジナルサイトを作ったことがある人とそうでない人とでは、実力に明らかな差が発生します。時間と手間はかかりますが、最後まで1つのサイトを作り上げることに大きな意味があります。

4. HTMLの基礎知識を習得するためのおすすめ学習サイト

HTMLの基礎知識を習得するためにおすすめの学習サイトについて解説します。

Progate

Progateは、初心者向けのプログラミングオンライン学習サイトです。環境構築が不要なこともあり、初めてプログラミングを学ぶならこれ、といわれているほど人気のサイトです。
各レッスンはスライド形式で基礎的な知識を学んだ後に、実際に手でコードを入力し、開発を進める形式になっています。

無料のレッスンと有料のレッスンがありますが、無料のレッスンだけでも充実しており、これまでコードに触れたことがない人や、さまざまな言語の特徴を知りたいという人におすすめのサービスです。

ドットインストール

ドットインストールとは、3分の動画でプログラミングを学ぶことができるプログラミング学習サイトです。
公開されている動画のほとんどは約3分で構成されており、通学時間やちょっとしたスキマ時間に気軽に利用できる利点があります。

また、ドットインストールでは、プログラミングの基礎知識だけではなく、周辺の環境構築やよく使用される人気のフレームワークについても学習することができるため、体系的に学習することが可能です。

Schoo

Schooは生放送の講義動画でプログラミングを学習することができるサイトです。さまざまなジャンルや業界の講師が毎日新しい動画を生放送で配信しています。
プログラミングを学習する上で、問題点を抱えたまま進めていくことは、挫折してしまう原因になりかねません。
生放送である利点は、その問題点を講義中に質問でき、すぐに解決できることです。

HTMLクイックリファレンス

HTMLを学習する際に必ずといっていいほど利用するサイトが、HTMLクイックリファレンスです。
ホームページの制作で知りたいタグの情報などをピンポイントで表示してくれる早見表のようなものです。例えば「この文章を太字にしたい」と思った時にさっと検索すると、どのHTMLタグを使用したらいいのかを調べることができます。

5. 学生向け！HTMLの次に学習すべきもの

HTMLの学習がある程度終わった後に、学ぶべきことについて解説します。

Webデザインのフレームワークの知識を身につける

「Webデザイナーになりたい」と考えている人は、Webデザインやフレームワークの知識について学習しましょう。

Webデザイナーは、クライアントが思い描いているWebサイトになるように、サイト全体の構成とデザインを制作します。そのためには、Webサイトを構成する基礎であるHTMLやCSSに加えて、CSSのフレームワークについての知識も必要です。

CSSフレームワークを利用することによってWebデザインの手間を省くことができ、ドロップダウンメニューやスライダーなどを簡単に作成することができます。
よく使用されるCSSフレームワークには、利用者数が多いBootStrapやBootStrap、カスタマイズ性が高いFoundationなどがあります。

サイトに動きをつけるためにJavaScriptを学習する

Webページを制作するための基礎を学んだ後は、Webページに動きをつけることができるJavaScriptの学習を始めましょう。
JavaScriptは、ブラウザ上に表示されているWebページに存在する画像を拡大で表示してみやすくしたり、入力フォームを設置してメッセージを送付することができる問い合わせページを簡単に作成したりすることができる言語です。Webページを制作するには必須の知識と言えます。

Webアプリを開発したいならPHPやRubyの学習がおすすめ

これからWebアプリの開発に携わりたいと考えている人は、PHPやRubyの習得を目指しましょう。
どちらの言語もWebアプリを開発することができるサーバーサイド言語です。

Rubyは、必要最低限のコードで多くの機能が実装できることが魅力で、自由度が高いため、初心者にはもちろん上級者にも人気の言語です。
PHPも初心者が習得しやすい言語として非常に人気があります。Rubyで使用される主要なフレームワークにはRuby on Railsというものがありますが、PHPにはCakePHPやアプリケーションの応答スピードが早いと言われているPhalcon、最近普及しているLaravelなど個性豊かなフレームワークが豊富にあります。

ITエンジニアを目指す新卒学生向け就活エージェントならレバテックルーキー

レバテックルーキーは、レバテックが運営するITエンジニア専門の就活エージェントです。多数のITエンジニアのキャリア支援経験のあるアドバイザーが、あなたのスキルと希望に合わせた企業の紹介から、人事目線での面接対策など、就職までを一貫してサポートします。ES添削、面接対策、ポートフォリオ作成サポートなども実施していますので、まずは一度カウンセリングにお越しください。

就活アドバイザーに相談してみる