HTMLでできることは?実際のサイト制作例と併せてわかりやすく解説

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

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

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

HTMLで作られたゲーム

 

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

HTMLでできることまとめ
✓Webサイトのデザインコーディング
✓ソフトウェアのUI設計
✓Webブラウザゲームの製作

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枚の縦長ページがデザインされていて、ブランドイメージを想起させるような適切なコーディングが施されていますね。

CSSでのLP作成例

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

 

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

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

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

案件例1. ECサイト制作企業での広告運用


業務内容
ECサイト制作企業での広告運用に携わる
広告運用に関わるクリエイティブ制作やフロント部分の開発、デザイン

応募に必要なスキル
・リスティング広告やディスプレイ広告などの運用型広告経験3年以上
・広告バナーなどのディレクション
・運用予算と実績管理
・クライアント報告資料の作成

【歓迎スキル】
・SNS、アフィリエイト等の運用

報酬(月額)
~500,000円

※開発案件例は架空のものです。

 

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

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

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

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

UIのイメージ

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

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

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

案件例2. UI改善開発


業務内容
・クライアントのWebマーケティングにおける事業課題を解決するためのUI改善
・フロントの実装

応募に必要なスキル
・フロントエンドエンジニアとしての実務経験2年以上
・HTML DOM 操作 / XHR 非同期処理 / Single Page Application の知見
・技術課題に対するテクニカルサポートを円滑に進めるためのコミュニケーションスキル

【歓迎スキル】
・サーバサイドを含めた Web システム開発の技術知識とスキル
・Google Tag Manager, Google Analyticsの使用経験
・スケジュール管理経験

報酬(月額)
~700,000円

※開発案件例は架空のものです。

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

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

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

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

プログラミング言語の比較表
言語名 人気ランキング 案件の数 案件平均単価 習得のしやすさ 環境構築のしやすさ できること
C++ 1 ★★★★★ 71万円 ★☆☆☆☆ ★☆☆☆☆  C++でできること
C 2 ★★★★★ 67万円 ★☆☆☆☆ ★☆☆☆☆  C言語でできること
Python 3 ★★★★☆ 77万円 ★☆☆☆☆ ★★☆☆☆  Pythonでできること
JavaScript 4 ★★★☆☆ 72万円 ★☆☆☆☆ ★★☆☆☆  JavaScriptでできること
SQL 5 ★★★☆☆ 65万円 ★★★☆☆ ★☆☆☆☆  SQLでできること
Java 6 ★★★☆☆ 69万円 ★☆☆☆☆ ★★☆☆☆  Javaでできること
HTML/CSS 7 ★★★☆☆ 70万円 ★★★★★ ★★★★★  HTMLでできること
CSSでできること
PHP 8 ★★☆☆☆ 72万円 ★★☆☆☆ ★★☆☆☆  PHPでできること
COBOL 9 ★★☆☆☆ 61万円 ★☆☆☆☆ ★☆☆☆☆  COBOLでできること
Ruby 10 ★★☆☆☆ 80万円 ★★☆☆☆ ★★☆☆☆  Rubyでできること
Swift 11 ★☆☆☆☆ 79万円 ★★☆☆☆ ★★★★☆  Swiftでできること

実際の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を学ぶべき人だと考えています。

✓単純なWebページやLP制作だけではなく、ソフトウェアのUI開発まで携わりたい人
✓Webデザイナーとしてのキャリアへ本格的に進みたい人
✓フロントエンジニアとしての確固たるスキルを持ちたい人
HTMLやCSSを使った開発案件では、ほとんどの場合、ほかの何かしらのスキルも併せて求められます。
たとえばWebアプリケーションの開発なら、PHPやRubyでの開発経験があって、システム面への知見を求められたり、
Webデザインの仕事ではワイヤーフレームを作成するための基礎知識や、Adobe製ツールの利用経験が求められたりします。
したがって、HTMLやCSSを学ぶだけで開発案件に携われるわけではないのです。

そこで、プログラミングスクールに入会するメリットが明確になります。
プログラミングスクールのカリキュラムは単にプログラミングスクールを開発するだけでなく、受講者が開発案件を受注し、現場に出ていけるように設計されています。
ただ単にHTMLやCSSの学習 “だけ” に終わってしまう独学とは大きな違いがあるのです。
例えばテックアカデミーのWeb制作コースでは、次のようなカリキュラムが組み込まれています。
テックアカデミーのカリキュラム例
テックアカデミーのカリキュラム1
テックアカデミーのカリキュラム2
HTMLやCSSだけでなく、Adobe製品やJavaScriptなど関連言語、jQuery・Bootstrapなどのフレームワークまで学習範囲に入っていることがわかります。
テックアカデミーでは以上の項目を学習した後に、実際のWeb制作案件を受注し、納品して初めて卒業できるカリキュラムが提供されています。
これが、HTMLやCSSをプログラミングスクールで学習するべきたったひとつの理由です。

HTMLでできることまとめ

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

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

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

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

【HTMLをプログラミングスクールで学ぶべき人】
✓単純なWebページやLP制作だけではなく、ソフトウェアのUI開発まで携わりたい人
✓Webデザイナーとしてのキャリアへ本格的に進みたい人
✓フロントエンジニアとしての確固たるスキルを持ちたい人

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

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

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

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

プログラミングスクールのおすすめはこちら!