プログラミング言語HTMLを学ぼう!学習ツールから開発環境まで徹底解説!
  • facebookページ
  • twitterページ
  • 2018.10.03

    プログラミング言語HTMLを学ぼう!学習ツールから開発環境まで徹底解説!

    本記事では、HTMLを攻略するために、お勧めの学習サービスと学習のための開発環境を解説しています。HTMLはPCとインターネットがあれば学習を進めることが出来ます。また、学習した内容を自分の手でコーディングして動作確認する環境は、フリーのソフトだけで用意することが出来ます。それではHTMLの概要から解説していきます。

    HTMLとは

    HTMLは「HyperText Markup Language」の略です。HTML文書は、Webサイトの構造を「要素」と呼ばれるものの組み合わせによって定義していきます。要素というのは、例えば「ヘッダ」「見出し」「画像」「段落」等で、「<>」で囲まれた「タグ」と呼ばれるものでそれぞれの要素を意味づけします。これにより、ブラウザに対してHTML文書内のそれぞれのパーツの意味を伝えることが出来ます。
    HTMLと一緒に使われる言語には、HTMLの要素を装飾する「CSS」や、HTMLだけでは表せない動的な表現を記述する「JavaScript」という言語があります。HTMLだけでの記述ではどうしても表現が乏しくなりますので、HTMLの基本を理解した後で、必要に応じてこれらの言語も習得していくようにしましょう。

    HTMLを学習できるサービス3選

    HTMLを学習できるサイトには、動画での講座や実際にコードを記述しながら実践的なレッスンを受けることの出来るサービスなどがあります。コードを動かすための環境がクラウド上に用意されているサービスもあり、気軽に学習を始めることが出来ます。どのサイトも無料で受講できる講座があり、有料会員になる事で全講座を受講することが出来るようになります。本記事では、おすすめの3選のサービスを紹介します。

    ドットインストール

    ドットインストール
    プログラミングのレッスン動画を配信している学習サイトです。動画は1つ3分前後で構成されているため、空いた時間に少しずつ or まとめて見るのどちらでも、自分のスタイルに合わせて学習を進めることが出来ます。
    HTMLの動画については、全て無料で閲覧できる講座が豊富に用意されています。「HTML/CSSの学習環境を整えよう」にはWindowsとMacOS編があり、Atom+Google Chromeでの環境構築について触れています。「HTML入門」講座では、先ほどの学習環境を前提にWebサイトを作るチュートリアルで、一つの講座を通してプロフィールサイトを作ります。「HTML基礎文法入門」HTMLの最新バージョンのHTML5が前提で、タグやタグごとの属性、使い方をひとつひとつ解説する内容になっています。これらの講座は全て無料で視聴することが出来ますが、有料版でも月額980円で他の言語(CSSやJavaScript等)も含む全ての講座を視聴することができます。まずは無料分を受けてみた後で、継続を検討すると良いでしょう。

    Progate

    Progate
    スライドで解説を見た後にクイズ形式の演習といった繰り返しで学習を進めていくサイトです。言語ごとに初級・中級・上級編のように分かれています。演習では、解説の記述と実際にコーディングを行うエディタ、動作確認のブラウザ相当の環境が1つの画面で見られるような画面構成となっており、使いやすい学習環境が用意されています。学習を進めていくと、言語ごとに経験値がもらえてレベルが上がっていくため、ゲーム感覚で楽しく学習を進めることが出来ます。
    無料会員では、HTML初級編を含む17つの講座を学習できます。月額980円の有料会員になることで全67レッスンをすべてを学習できるようになります。

    CODEPREP

    CODEPREP
    プログラムを実際に記述して動作確認しながら学習を進めていくサイトです。1冊は10分という少な目のボリュームなので、隙間時間に学習を進めていくことが出来ます。Progateと同様、ブラウザがあればコーディングと動作確認が出来る環境が用意されていますので、端末に環境を用意せずに学習を始めることが出来ます。ブック内にはディスカッションボードが用意されており、他のユーザー同士での「教えあい」の機能があるのも特徴です。
    無料会員では、「はじめてのHTML」のブックでのレッスンが出来ますが、月額980円で他の言語を含む100冊以上のブックを利用することが可能です。

    HTML学習に必要な開発環境


    HTMLの学習には下記が必要です。
    ・テキストエディタもしくは統合開発環境(IDE):コーディングをおこなう
    ・ブラウザ:動作を確認する

    最低限の開発環境の構成として、コーディングをテキストエディタ、動作確認をブラウザで行うことが可能です。ただしエディタに関しては、プログラミングに特化した機能を一つのソフトウェアにまとめた「統合開発環境(IDE)」を使う事で、開発の効率がアップし、よりスピーディーに開発を進めることが出来るようになります。例えばコメントや属性等、キーワードの種類ごとに文字の色が変わる「コードハイライト」や、コードの数文字を入力するだけで単語の候補の一覧が表示される「コードの入力補完」、文法エラーがあった場合にエラー内容を表示する「エラー表示」等の機能です。
    コーディングの経験が無い方の場合は、まずはコーディングに慣れることが大切です。そのため、感覚的に操作できて少ない設定で使い始められるIDEや、htmlに特化したコーディング用の機能が備わっている多機能なテキストエディタにより、初期設定や操作の習得に時間をかけることなく学習を始められるツール選びが出来ると良いでしょう。
    以降では、初心者の段階でお勧めの無料で使える統合開発環境や多機能テキストエディタのご紹介をします。

    Brackets

    Brackets
    Adobe Systemsが開発している、Web開発に特化したオープンソースのエディタです。初期設定をせず最初から使える機能が豊富なことが特徴です。コーディング中のHTMLをブラウザでリアルタイムに動作確認する「ライブプレビュー機能」やコードの補完機能等、開発を楽にする機能がはじめから使えるようになっています。拡張機能も豊富で、便利な機能を追加して使うことも可能です。最初に入れておきたい拡張機能としては、「Beautify(コードの自動整形)」「Emmet(HTML入力支援)」等がありますので、コーディングに慣れてきたらカスタマイズして使いましょう。こちらも軽量で最初から高機能といったところが人気のエディタです。Adobe社製のため、Adobe Creative Cloudとの連携等、Adobeの他のソフトとの親和性が高い点も評価されています。

    Atom

    Atom
    GitHub社が開発している、HTMLエディタです。パッケージと呼ばれる拡張機能をインストールする事で自分の好みの機能をエディタに追加することが出来ます。初めから基本的な機能はあるので、最初は「Emmet(HTML入力支援)」「japanese-menu(メニューの日本語化)」「tag(終了タグの補完)」あたりの必要最低限のパッケージをインストールしておき、慣れてきたら好みのパッケージを追加していきましょう。軽量で人気のエディタです。

    Visual Studio Code

    Visual Studio Code
    Microsoftが開発している、あらゆる言語で使える有名なフリーのIDEです。基本的な機能でHTMLのコード補完や終了タグの自動追加、コードの整形、カラーピッカー等の開発支援機能を使うことが出来ます。拡張機能も豊富で、「HTMLHint(構文チェック)」「Live HTML Previewer(リアルタイムプレビュー)」等は最初の段階で入れておきたい拡張機能です。

    まとめ

    HTMLの学習は、Webアプリケーション開発の第一歩です。HTMLの学習は、難易度も高くはなく、ほとんどの場合独学で十分な場合が多いでしょう。今回紹介したようにWeb上にも気軽に学習を進めることのできるサービスは豊富にあるので、それらをうまく利用しながらステップアップしていってください。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800万円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料10万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE