Webアプリケーション開発の第一歩!HTMLを攻略しよう!
  • facebookページ
  • twitterページ
  • 2017.10.03

    Webアプリケーション開発の第一歩!HTMLを攻略しよう!

    現在開発されているシステムのうち、Webアプリケーションは適用事例が一番多い形態と言っていいでしょう。そのため、これからプログラミングを習得するのであれば、Webアプリケーション関連技術を習得する必要があります。

    Webアプリケーションは複数の技術を使って構築するためどこから手を付けていいか難しいと感じているエンジニアもいるかもしれませんが、新しくチャレンジするのであれば、まずは必須技術であるHTMLは外せないでしょう。

    今回はHTMLを攻略出来るように概要及び学習方法などについて取り上げていきます。

    HTMLとは

    概要

    HTMLとはHyper Text Markup Languageの略でWebサイトを作成する時に使用する言語の1つです。Webサイトは複数のWebページからなりますが、各Webページに掲載するコンテンツに構造と役割(ページタイトルや表、リスト、各ページへのリンクなど)を持たせるために使用する言語です。

    ホームページが一般に広まった1990年代ではHTMLは構造と役割を持たせる言語と言うよりはホームページをかっこよく見せるため(デザイン)の言語として広まりましたが、近年では基本的な考えに立ち返り、デザイン面についてはCSSという別の言語使い、HTMLはコンテンツに構造と役割と持たせるための言語とするように考え直されています。

    HTMLタグ

    HTMLはコンテンツに役割を持たせるためにHTMLタグと呼ばれるキーワードを使います。HTMLタグは「<」、「>」で囲まれたキーワードになっており、基本的には「<keyword>」で始まり「</keyword>」で終わるようになっています。(「</keyword>」がないタグもあります)

    代表的なタグとしては、ブラウザ表示時のタイトルになる<title>タグや本文を記載する<body>タグ、Webページなどのへのリンクである<a>タグ、画像を表示するため<img>タグなどがあります。

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

    HTMLを学習していこうとした場合、書籍を購入し独学で学習する方法よりもHTMLを学習できるサービスを活用した方が効率的でしょう。動画を使ったサービスも多くありますので、まずは、これらのサービスを活用して基礎スキルの獲得を目指してみてはいかがでしょうか。

    ドットインストール

    ドットインストールは3分間の動画を視聴し、プログラミングを学習するサービスです。すべての動画が無料という訳ではありませんが、入門編の多くは無料で公開されています。HTMLだけでなくCSS、JavaScriptなどWebアプリケーションを作成する際によく使う技術はすべて網羅されています。

    HTML入門は全24回、CSS入門は全23回、レスポンシブウェブデザイン入門は全14回が用意されており、いずれも無料で利用する事ができます。

    Progate

    Progateはテキストでの学習、オンラインエディタでプログラミング、プログラムの実行というサイクルで学習を進めることができるサービスです。学習を始めるにあたり環境構築が不要ですので手軽に始めることができるのはうれしいところです。HTMLの学習であっても同様に進める事が可能で、エディタを使って作成したHTMLをプレビューという形で実行して確認します。

    1つのレッスンは4時間前後のボリュームがありますが途中で中断しても前回の位置から再開する事ができるように考えられています。

    Progateもすべてが無料という訳ではありませんが、HTMLやCSS、JavaScriptなど主要なコースの入門編は無料で学習する事ができます。

    Schoo

    Schooは動画で学習するタイプのサービスです。最近は動画をメインにする学習サービスが増えてきていますが、Schooの特徴は学習内容を生放送でストリーミングし、それを視聴するタイプです。しかも、生放送の視聴は無料となっていますので、好きな講座を好きなだけ学習する事ができます。

    生放送でストリーミングされる学習内容は動画として保存されており後から参照する事も可能ですが、こちらは有料となります。ただし、すべてが有料と言う訳ではなく、初心者向けの動画は無料として公開されていますので、会員登録するだけで動画を視聴する事が出来ます。

    Web関連の学習動画には50近いテーマがあり、HTML関連だけでも500以上のコースが用意されています。

    ShareWIS

    ShareWisも動画を視聴する事で学習を行えるサービスです。ShareWisにも無料コースと有料コースがありますが、無料コースはスナックコースと呼ばれており、90秒で完結した動画を視聴するタイプです。スナックコースは90秒という短い動画ですから本格的な学習というよりは通勤通学時間などのスキマ時間を学習時間に変えていく事を目的にしたコースになっています。

    有料のプロコースはその名の通り実務経験豊富なプロが講師となり2時間前後のコースを動画で受けることができます。プロコースにはコース内容を詳細に説明しているページが用意されていますので、内容をじっくり吟味して購入する事ができます。また、30日間返金保証や購入後は期間制限なしの見放題、タブレット・スマホでの視聴も可能ですから気軽に取り組めるのではないでしょうか。

    HTML学習に必要な開発環境

    HTMLを学習するのには最低限の環境としてはブラウザが動くパソコンと簡単なテキストエディタがあれば可能ですが、効率よく学習するのにはテキストエディタは専用のものをそろえたい所です。だからと言って高価なソフトを購入する必要はなく、フリーでも高機能なエディタがあります。また、簡単な画像の編集をする機会もありますので合わせて紹介します。

    Brackets(テキストエディタ)

    BracketsはAdobeが作成したHTML専用のテキストエディタです。WindowsやMac、Linuxで動作します。
    Bracketsの一番便利な機能はライブプレビュー機能です。HTMLは実際にブラウザで表示してみないとどのように表示されるか分かりませんので、修正、保存後、ブラウザを再表示する。という操作を繰り返す事になりますが、ライブプレビュー機能が修正の都度結果が反映されますのでそのような操作は不要になります。最近流行りのプラグインによる機能拡張が可能ですのでさらに便利な機能を無料で手に入れることができます。

    Visual Studio Code(テキストエディタ)

    Visual Studio Codeはマイクロソフトが作成したプログラミング向けのテキストエディタです。複数の言語に対応しており、HTMLだけでなく、CSSやJavaScriptなどもサポートしています。

    マイクロソフトの統合開発環境と同じく高機能な入力補完機能が用意されていますので効率よくHTMLを作成する事が可能です。なお、Visual Studio CodeもBrackets同様にプラグインによる機能拡張が可能です。

    どちらのエディタもおすすめですが、純粋にHTMLを学習したい。という事であればBrackets。HTMLからサーバ側のプログラミング言語も学習したいという事であればVisual Studio Codeを選ばれるのがいいでしょう。

    GIMP(画像エディタ)

    画像編集のスタンダードと言えばAdobe Photoshopですが、GIMPはPhotoshopのように画像をイメージ編集する事が出来るフリーの画像エディタです。

    イメージ編集としては基本的な機能はそろっていますのでプロの現場でもない限りGIMPで十分ではないでしょうか。プラグインも用意されており機能拡張も可能ですが、プラグインが多くなると起動が遅くなる傾向があります。

    Inkscape(画像エディタ)

    Inkscape は画像をベクター形式で編集するAdobe Illustratorと同じ操作感覚で編集できるエディタです。ベクター形式の基本的な編集機能は揃っています。

    なお、パソコンの性能については画像編集に凝らなければ日頃のホームページ閲覧に支障がなければまずは問題ないと考えて大丈夫です。

    まとめ

    今回はWebアプリケーション技術の基礎となるHTMLに関する内容を取り上げました。まずは、HTMLの基礎を無料コースで学習し基礎的なスキルを身に付けた後、Webアプリケーションの世界に飛び込むことをおすすめします。


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

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

    ポテパンフリーランス

    ポテパンフリーランス

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

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。

    ポテパンキャンプ

    ポテパンキャンプ

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



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

    ポテキャンバナー ポテキャリバナー

    この記事をシェア

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









    ABOUT US

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

    READ MORE