HTMLでできることはWebページを作成することです。

HTMLは非常にシンプルで学習しやすい言語であるため、これからWebデザインを学習しようと思っている方や、簡単なプログラミング学習を経験してみたい方、副業でお金を稼ぎたい方からの人気が高い言語となっています。

一方でHTMLは、知れば知るほど奥が深い言語でもあります。
光の玉を集めるミミズのようなキャラクターを操作する対戦型ゲームの Slither.io はHTML5とJavaScriptで制作されたゲームです。非常に中毒性の高いゲームとして知られていますが、このアプリケーションがHTMLで動いていると聞いて驚いた方も少なくないでしょう。

そこでこの記事では、HTMLでできることを実際の制作案件例と併せてご紹介します。

HTMLでできること

まずはさっそく、HTMLでできることを見ていきましょう。
HTMLは主に、CSSと併せてWebページを制作するために使用されます。

HTMLの役割を次の例に従って理解してみてください。

1. HTMLは絵を描く
2. CSSは絵に色をつける
3. Javascriptは絵を動かす

以上にある通り、Webページ制作におけるHTMLはページの土台部分となるコードを記述する役割を担っています。そこにCSSでUIを整えたり、JavaScriptで動的なページを制作したりします。

HTMLでできることをさらに詳しく深堀していきましょう。

1, Webページ、ランディングページの制作/コーディング

HTMLを学ぶことで、WebページやLP(ランディングページ)の製作ができるようになります。

LPとは集客に特化したWEBページです。
例えばスターバックスの公式ページは1枚の縦長ページがデザインされていて、ブランドイメージを想起させるような適切なコーディングが施されていますね。

画像：スターバックスコーヒー ジャパン

LPの制作の大きな流れは次の通りです。

1. ワイヤーフレームを決める
2. HTMLで骨組みを作る
3. CSSで装飾する
4. 必要があればJavascriptで動きをつける

LP制作は数多くあるプログラミング制作案件の中でも比較的難易度が低いです。
プログラミング初心者で携わりやすい業務であることから、副業としての人気も高くなっています。

2, ソフトウェアのUI設計

HTMLでできることとして、ソフトウェアのUI(ユーザーインターフェース)設計があります。

ソフトウェアのUIとは、システムの見た目を担当する部分です。

例えばGoogle検索エンジンは、(1)検索者が知りたいことを検索・表示するUI部分と、(2)ユーザーが検索したことを取得して結果を返すシステム部分 で構成されています。

1. 検索者が打ち込んだキーワードをHTMLが取得し、
2. それをPHPやC言語などバックエンド(ミドルエンド)言語に橋渡しします。
3. SQLなどのデータベース言語がキーワードを受け取り、データベースを参照し、該当する情報をHTML返答して
4. ふたたびUI部分に表示させる仕組みです。

HTMLが担当するのは上記①と④の工程で、いずれもUI(ユーザーインターフェース)を指します。

実際にはHTMLコードをCSSで装飾しているので、HTMLはCSSと抱き合わせで表現されることが多いです。プログラミングスクールでHTMLを学習する際も、HTMLとCSSをセットで学習することになります。

3, Webブラウザゲームの制作

HTMLではWebブラウザゲームも開発することができます。

冒頭で紹介したスリザリオや、有志によってシューティングゲームのグラディウスが再現されているなど、HTMLは幅広いことができる言語です。

全ての言語に共通していることですが、「その気になればなんでも作れる」ことがプログラミングのいいところです。もちろん言語によって得意なことや不得意なことはありますが、何か一つの言語を極めておけば、それは立派なスキルとして成り立ちます。

実際のHTMLコーディング例を紹介

次に、HTMLを使ったかんたんなコーディング事例をご紹介します。

HTMLコーディングがどのように行われて、どうCSSと併用するのかを見ていきましょう。

1, まずは単純なテキストを用意

まずは簡単なテキストだけを記入したHTMLコードを書いてみます。

<p>プログラミングを学ぶなら、<br>オンラインスクールがおすすめ</p>
<p>圧倒的な社会的需要で高い年収での求人が多いプログラミング業界。</p>
<p>これからプログラミングを学ぶのであれば、時間や場所にとらわれずに学べるオンラインスクールがおすすめです。</p>
<p>オンラインスクールのおすすめ一覧へ</p>

HTMLコードの結果

プログラミングを学ぶなら、
オンラインスクールがおすすめ

圧倒的な社会的需要で高い年収での求人が多いプログラミング業界。

これからプログラミングを学ぶのであれば、時間や場所にとらわれずに学べるオンラインスクールがおすすめです。

オンラインスクールのおすすめ一覧へ

pタグと呼ばれる段落を構成するHTMLタグで文字を書いていき、brタグを使って改行しました。

これだけでは文章が味気ないので、適宜装飾を施していきます。

2, HTMLでテキストを装飾

次に、さきほどの文章をHTMLコードだけで装飾してみます。

<p><span style="font-size: 18pt;"><strong><span style="color: #ff6600;">プログラミング</span><span style="font-size: 14pt;">を</span>学<span style="font-size: 14pt;">ぶなら、</span></strong></span><br>
<span style="font-size: 18pt;"><strong><span style="color: #ff6600;">オンラインスクール</span><span style="font-size: 14pt;">がおすすめ</span></strong></span></p>
<p>圧倒的な社会的需要で高い年収での求人が多いプログラミング業界。
<p>これからプログラミングを学ぶのであれば、時間や場所にとらわれずに学べるオンラインスクールがおすすめです。</p>
<a href="https://homeworkers.jp/program/recommended-online/online-recomended/">オンラインスクールのおすすめ一覧へ</a>
<div><img src="https://homeworkers.jp/program/wp-content/uploads/2020/03/cta_img.png"></div>

HTMLコードの結果

プログラミングを学ぶなら、
オンラインスクールがおすすめ

圧倒的な社会的需要で高い年収での求人が多いプログラミング業界。

これからプログラミングを学ぶのであれば、時間や場所にとらわれずに学べるオンラインスクールがおすすめです。

オンラインスクールのおすすめ一覧へ

先の文章に対してHTMLで文字装飾をほどこし、画像も挿入しました。
文章に強弱が付き、ひとまとまりの文章の中で何を伝えたいのか？ハッキリ伝わるようになりましたね。

しかしながら、「オンラインスクールのおすすめ一覧へ」とテキストリンクになっている部分がわかりにくかったり、画像サイズが大きすぎてナンセンスなデザインに仕上がってしまっています。

これではHTMLコードが反映された実際のWebページ部分のコンテンツも非常に見にくいので、CSSを使って効率的かつ視野性を高く装飾していきます。

3, CSSを使って効率的に装飾

それでは、CSSを使って先のコードを装飾していきましょう。

<span style="font-size: 18pt;"><strong><span style="color: #ff6600;">プログラミング</span><span style="font-size: 14pt;">を</span>学<span style="font-size: 14pt;">ぶなら、</span></strong></span><br class="pc_none" /><span style="font-size: 18pt;"><strong><span style="color: #ff6600;">オンラインスクール</span><span style="font-size: 14pt;">がおすすめ</span></strong></span>
<div class="column column-2pc73">
<div class="column__item">圧倒的な社会的需要で高い年収での求人が多いプログラミング業界。これからプログラミングを学ぶのであれば、時間や場所にとらわれずに学べるオンラインスクールがおすすめです。スクールの特徴を比べ、あなたにあったスクールを見つけてください。
<p style="text-align: center;"><span style="color: #ffffff;"><strong><a class="ep-btn es-grada2 es-TpaddingS es-BpaddingS es-BTiconBorder es-Fsmall es-round es-RpaddingM es-LpaddingM ftc-gray icon-display href= bgc-VDgray" style="color: #ffffff;" href="https://homeworkers.jp/program/recommended-online/online-recomended/">オンラインスクールのおすすめ一覧へ</a></strong></span></p></div>

<div class="column__item"><img src="https://homeworkers.jp/program/wp-content/uploads/2020/03/cta_img.png" /></div></div>

プログラミングを学ぶなら、
オンラインスクールがおすすめ

圧倒的な社会的需要で高い年収での求人が多いプログラミング業界。これからプログラミングを学ぶのであれば、時間や場所にとらわれずに学べるオンラインスクールがおすすめです。スクールの特徴を比べ、あなたにあったスクールを見つけてください。

オンラインスクールのおすすめ一覧へ

事前に用意しておいたCSSをクラス名で指定して呼び出すことで、ソースコードを見やすくするのと同時に、実際のWebページ表示もスマートなデザインに仕上がりました。

<div class="column column-2pc73"> という宣言では、Webページを2分割して各カラムに要素をひとつづつ格納する処理を施しています。左側のカラムに文章とボタンリンクを設置し、右側のカラムには画像サイズを調整した形でpngファイルを設置しました。

以上で行ったように、実際の制作現場ではHTMLだけでコーディングを行うことはなく、そこにCSSを利用して装飾することでデザインを表現することが定石となっています。
プログラミングスクールなどでHTMLを学習する場合も、CSSとセットで一緒に学習する場合が多いです。

プログラミング初心者がHTMLを学習するメリット

HTMLでできることが理解できたら、なぜHTMLを学習するといいのかメリットを紹介します。

1, 学習コストが低いので、早い段階で製作案件を受注できる

HTMLはエンジニアになるための入り口として学ぶ人が多く、学習コストが低いです。
参考書はもちろん、インターネットにも情報がたくさんあるので、独学でも学習することができます。

なによりHTML/CSSを学習すれば、早い段階でWeb制作やLP制作の案件が受注可能です。

一方でHTMLは、インターネット上の情報が多すぎて「何から学習すべきか」「どのように学習すべきか」わからないデメリットもあります。最短で効率よくHTMLを学習したいのであれば、カリキュラムが用意されているプログラミングスクールを利用すると安心です。

最近では1人1人にメンターがついてくれるプログラミングスクールもあるので、興味がある人はぜひ見てみましょう。

2, 自分の記述したコードの結果が目に見えるので、挫折しにくい

HTMLは、PHPやJavaなどのサーバーサイド言語と違い、エラー修正がしやすいです。

サーバーサイド言語でエラーが発生した場合、自分が記述したコードのどこで発生したエラーなのか、原因究明に努める必要があります。エラーを特定できたら、その対処方法を考えて、ただしく動作するようにロジックを組み立てなおさなければなりません。

一方でHTMLは、自分のコーディング結果がすぐにWebページとして表示されます。
おかしい部分は視覚的に把握することができるので、問題発見から解決までの速度が速く、挫折しにくいです。

HTMLは独学でやればいい？プログラミングスクールに通う意味はある？

HTMLはその学習コストの低さから、インターネット上にたくさんの教育コンテンツが存在しています。
中には基礎基本を網羅的に学べるコンテンツが完全無料で提供されている場合もあり、基本的に学習コストがかかりません。

そんなHTMLを、わざわざプログラミングスクールに通って学習する意味はあるのでしょうか？

当サイト編集部の考え方では、次の条件に当てはまる方のみがプログラミングスクールでHTMLを学ぶべき人だと考えています。

HTMLでできることまとめ

HTMLでできることはWebページを作成することです。

• Webサイト、LPを制作することができる
• ソフトウェアのUI設計ができる
• Webデザイナーとしての業務に携われる

HTMLは初心者でも学習しやすく、さまざまな開発案件に必要とされる言語であるため、これから初めてプログラミング言語を学習する方にはピッタリの言語です。

趣味で自分のWebサイトやWebサービスを開発したい人ではなく、HTMLを活用した本格的な案件を受注したい方なら、プログラミングスクールを受講して幅広い実践的な知識を身に着けるようにしましょう。

当サイトではHTML以外にもさまざまな言語の「できること」をご紹介しています。

HTMLと深い関係性を持つCSSや、JavaScriptなどHTMLに関連する言語でできることを知りたい方はぜひほかの記事も一読してみてください！