HTML/CSS

「初心者向け」HTMLを習得してできるようになる事、できない事を解説

インターネット上で公開されているほとんどのWebサイトにはHTMLが使われています。HTMLはWebページを作るために開発された言語です。HTMLとはHyperText Markup languadgeの略です。

日本語に直訳するとハイパーテキストをマークアップする(目印をつける)ための言語です。ハイパーテキストはハイパーリンクを埋め込むことができるテキストです。しかし、意味がわかっても、何ができるかが分かりにくいと思います。

本記事ではHTMLを習得してできることとできないことについて解説します。また、メリットや学習方法についても紹介します。初心者の方はぜひ参考にしてください。

HTMLでできること

Webサイト制作

HTMLでできることといえば真っ先に思い浮かぶのがWebサイトを作ることです。世界中のほとんどのサイトがHTMLを利用しています。企業や個人のWebサイトを作る上でHTMLは不可欠です。

特に、HTML(CSSも含む)で作られたサイトを静的なWebページといいます。静的なWebページとはサイトの管理者がコードを変えない限り表示が変わらないページのことを言います。一方で、アクセスやクリックなどの行動によってページの表示が変わるサイトのことを動的なWebページといいます。

Webデザイン

HTMLではWebデザインをすることも可能です。Webデザインとはクライアントの要求や自分の想像に合わせて、Webページのレイアウトを整えることです。HTMLを使えば、文字の色やサイズ、文字の表示位置を変更することができます。

現在はWebデザインはCSSやSCSSがメインです。HTMLは構造とテキストや画像を表示させることを担っています。とはいえ、CSSを使う上でもHTMLの知識がなくては使うことができません。

CSSやSCSSを利用するとしても、Webデザインをする上でHTMLが使えることは必須です。

HTMLメール

HTMLが使えればテキストだけではなく文字のサイズ、色などの形式を変えたり、動画や画像を組み込んだメールを作成できます。ダイレクトメールなどの目を引くようなメールを作りたいによく利用されます。

デザインが自由にできる代わりに容量が多く必要になる、レイアウトが崩れやすいなどのデメリットもあります。使用する際は相手に対する配慮あるメールを心掛けることが大切です。

アプリ作成

Webアプリを作成する際にはHTMLを利用します。Webアプリとはインターネット環境で利用するアプリのことです。HTMLを用いて作成すると、難しい技術を使うことなく開発ができるので開発コストを低くすることができます。

また、スマホやPCなどにインストールして使うネイティブアプリとWebアプリの両方の機能を持つハイブリッドアプリもHTMLを作成することができます。

HTMLでアプリを作ると開発コストは削減されますが、複雑な機能を持せることができません。複雑な機能を持たせたい場合は、他のプログラミング言語を使うことをおすすめします。

HTMLでできないこと

動的なWebサイトを作る

HTMLでは動的なWebページを作ることができません。HTMLは静的なWebページしか作ることができません。

動的なWebページとは管理者によるプログラム変更を伴わず、ページ上の表示が変わるようなページのことです。例えば、スライドショーやアコーディオンメニューがあるページは動的なWebページといいます。

HTMLで作られたサイトは管理者がコードを変えて初めて表示が変わります。

できないことはJavaScriptを使う

動的Webページを作るためにはJavaScriptというプログラム言語を使います。JavaScriptを使えば、HTMLで作られた文章や画像などのコンテンツを変更したり、HTMLやCSSのコードを書き換えることができます。

特にWebページ制作ではjQueryと言われるライブラリが用いられることがあります。jQueryはHTMLのタグを操作するなど機能を持ったDOM操作を得意としています。ページの表示を変えたり、スライドショーやアコーディオンメニュー、ハンバーガーメニューを作ることによく使われます。

HTMLを習得するメリット

オリジナルサイトを作れる

HTMLを習得するメリットはオリジナルのサイトを作れることです。今は企業だけでなく個人でもWebサイトを持っている時代です。特に、ビジネスを行う上でWebサイトを利用することが必須です。

スマホやタブレットの普及に伴っていつでもどんな所でもWebページを見ることができるようになりました。Webサイトを持っていれば、多くの人に商品やサービスを見てもらうことができます。

反対にWebページを持っていなければほとんど認知されません。つまり、ビジネスをする上でHTMLを習得してWebサイトを作成できることは大きな強みです。

副業やフリーランスで稼げる

HTMLを使えるようになれば、副業やフリーランスで稼げるようになります。Webサイトを作る企業が増えているということは、Webサイトを作ってほしいと考えている企業も増えています。企業はWebページを作成できるエンジニアを雇うより外注するケースが多いです。

そのため、HTMLを使ってWebページを作ることができれば、外注しているWebサイト作成の案件を獲得できるようになります。また、Webサイト作成の需要は年々増えており、当面は仕事がたくさんあります。

しかし、HTMLだけでは2~5万円と単価も安く、競争率も高いため、大きく安定して稼ぐのは難しいです。HTMLだけではなく、CSSやJavaScript、WordPressも一緒に勉強することで、20万円ほどの案件をこなすことができます。

HTMLを学習する方法

Progate

HTMLを全くわからないという初心者の方はProgateをおすすめします。Progateはプログラミングをオンラインで学習できるサービスです。わかりやすいスライドでのインプットとブラウザ上でコードを書いてアウトプットをします。タイムリーにインプットとアウトプットができるので定着が早いです。

無料ではHTML/CSSの初級編のみが利用可能です。中級編と上級編は月額1080円で利用可能です。HTML/CSSだけであれば2週間あれば、学習可能なので有料コースもやることをおすすめします。

また、JavaScriptやjQueryのコースもあるので、HTML/CSSが終わった後に学習することをおすすすめします。

ドットインストール

ドットインストールもProgateと同様にプログラミングをオンラインで学習できるサービスです。Progateとの違いは1セクション2~3分ほどの動画で学習をします。また、自分のPC上で環境構築が必要です。

HTMLに関してはテキストエディタとブラウザがあれば環境が整うので大きな問題にはなりませんが、他のプログラミング言語を学ぶには初心者では難しいです。

ドットインストールはProgateに比べると深く学習が可能です。Progateが終わった後に利用してもレベルアップが図れるサービスです。無料で学習できる分では不十分なので、有料プランを利用することをおすすめします。こちらも月額1080円です。

まとめ

HTMLでできることは以下の4点です。

  • Webサイトの作成
  • Webデザイン
  • HTMLメール
  • Webアプリ

HTMLはインターネットを利用したサービスを作る上で必須のスキルです。Web制作をしたいと思ったら最初に学習をすることをおすすめします。また、HTMLはたくさんの人が利用しているため、問題の解決方法がインターネット上にあります。

分からなくなったときに解決策がすぐに見つけられるので初心者でも得やすいスキルです。もし、Web制作を検討中の方は、HTMLを学習することをおすすめします。