「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
Webデザインやプログラミングの初歩として、誰もが一度は“HTMLから学習がおすすめ”と聞いたことがありますよね。
しかし、HTMLの仕組みや役に立つ場面を理解するのは、初学者にとっては難しいといえるでしょう。結論から言えば、HTMLを熟知することで、自分だけのWebサイトを作れるようになるのはもちろん、より多くのITスキルを身に着けるうえでの基礎を築くことができます。
今回は、私自身がエンジニアとして何年もHTMLを使ってきた経験から、HTMLでできることとその学習方法について解説します。
Webサイトを作成するときに欠かせない言語がHTMLです。
それでは、具体的にHTMLとは何なのか、どのような仕組みで動いているのか、そしてほかのWeb技術とどう関連しているのかについて解説します。
HTMLとは「Hyper Text Markup Language」の略で、Webページを作成するためのマークアップ言語の一つです。“マークアップ言語”とは、テキストに“マーク”(タグ)を追加して、そのテキストの構造や見た目を定義する言語のことを指します。HTMLでは、このマークアップの力を使ってWebページの構造を作り出します。
このタグを用いることで、文字や画像の配置、リンクの設定などがおこなえます。
HTMLはタグと呼ばれる特殊な記号を用いて、Webページの各部分を示します。例えば、「<p>」と「</p>」というタグを用いてパラグラフ(段落)を作ったり、「<a href=“…”>」というタグを用いてリンクを作ったりします。
このように、HTMLはさまざまなタグを使ってWebページの構造を作成し、どの部分が見出しで、どの部分が本文で、どの部分がリンクなのかなどをブラウザに伝える役割を担っています。
HTMLはWebページの構造を作るための言語であり、それ自体にはWebページの見た目や動作を制御する機能はありません。一方、CSS(Cascading Style Sheets)はWebページのデザインやスタイルを制御するための言語であり、JavaScriptはWebページに動的な機能を追加するための言語です。
これらの言語は互いに補完関係にあり、一緒に使うことでより複雑で効果的なWebページを作ることができます。たとえば、HTMLでWebページの基本構造を作り、CSSでその見た目を整え、JavaScriptでデータの送受信や動的な機能を追加する、というように役割分担をしています。
CSSでできることとは? 洗練されたWebデザインに必須の言語!
Workship MAGAZINE
JavaScriptでできることとは?おすすめの学習方法を徹底解説
Workship MAGAZINE
HTMLがどのような言語であるか理解したところで、具体的にHTMLで何ができるのかを見てみましょう。
HTMLは初学者が最初に触れる言語として有名ですが、できることはかなり多く、いろいろなサービスに用いられます。
HTMLのもっとも一般的な用途は、Webページの制作です。
上述したように、文字列、リスト、画像、リンクなどを用いてWebページの基本的な構造をHTMLでコーディング(=ソースコードを記述)します。
HTMLタグを用いて、コンテンツのどの部分が見出しなのか、段落なのか、引用なのかなどを定義し、Webブラウザはそれを読み取ってページを表示します。
多くの画像が貼り付けられたメールマガジンなどを目にしたことがある方も多いのではないでしょうか。
こういったHTMLメールでは、テキストの色やサイズをカスタマイズしたり、画像やリンクを挿入したりと、文字だけのテキストメールでは実現できない豊かな表現ができます。これにより、受信者に対する印象やメッセージの理解度を大幅に向上させることが可能です。
HTMLはWebサイトだけでなく、ソフトウェアのユーザーインターフェース(UI)の制作にも使われます。
とくにWebベースのアプリケーションや電子書籍、クロスプラットフォーム(=違うプラットフォーム上でも動作するプログラム)のモバイルアプリなどでは、HTMLがUI作成に広く使用されています。これはHTMLが持つタグのおかげで、コードが何を意味するのかを容易に理解できるためです。
Web技術が進化するにつれて、HTMLだけでなくJavaScriptやWebGL(=ブラウザ上で3DCGを高速描写する技術)と組み合わせることで、ブラウザ上で動作するゲームを作成できるようになりました。
HTMLによってゲームは、ユーザーが特殊なソフトウェアをインストールすることなく、Webブラウザ上で直接プレイできます。その結果、ユーザーはPCのスペックなどにあまり依存せずゲームをプレイでき、ゲーム開発者にとっても大きなメリットをもたらしています。
HTMLは非常に強力なツールであり、Webページの基本的な構造を作成するのに適しています。
しかし、HTMLだけですべてのWeb関連の開発を完結することはできません。上述したように、CSSやJavaScriptを筆頭に、HTMLと一緒に使うことでより複雑で効果的なWebページが作れます。
この章では、HTMLだけでは完成できないものを紹介します。
HTMLはマークアップ言語であり、主に静的なコンテンツの表示に用いられます。
つまり、ユーザーの入力やサーバーからのデータに応じて内容が変わるような、動的なWebページを作成することはできません。このような動的な機能を実現するためには、JavaScriptなどのプログラミング言語を使用する必要があります。JavaScriptはWebブラウザ上で直接実行され、Webページに動的な要素を追加します。
また、HTMLだけでは複雑なアニメーションを含むWebページを作成することもできません。
Webページに動きを追加するためには、CSSのトランジションやアニメーション機能、またはJavaScriptを使用する必要があります。CSSはスタイリングとレイアウトに用いられ、JavaScriptはページの動作を制御します。
さらに、ユーザーからの入力を受け取り、それをもとにサーバー上で何らかの処理をおこなうWebフォームを作成するためにも、JavaScriptやサーバーサイドのプログラミング言語が必要となります。
たとえば、ユーザーがフォームに情報を入力し、送信ボタンを押すと、その情報はサーバーに送信され、データベースに保存される、といった流れを作るには、HTMLだけでは不十分です。
HTMLを学び始めると、以下3つのキーワードが頻繁に登場します。
- タグ
- 要素
- 属性
これらはHTMLの基本構成要素であり、HTMLを習得するにはこれらの概念を理解することが重要です。
HTMLは“タグ”と呼ばれる特殊な記号を使用して、Webページの構造を定義します。
HTMLタグは一般的に開始タグ(例:<p>)と終了タグ(例:</p>)の組み合わせで構成され、この2つのタグで囲まれた部分がそのタグの影響を受けます。
たとえば、<h1>と</h1>タグで囲まれた部分は、ページ上のもっとも重要な(レベル1の)見出しとして表示されます。
要素は開始タグ、終了タグ、およびそれらのタグに囲まれたコンテンツから構成されます。
たとえば「<p>これは段落です。</p>」というコードは「“これは段落です。”というコンテンツを持つp要素」といえます。要素はページ上に表示されるコンテンツの種類をブラウザに伝える役割を担っています。
属性はタグに追加情報を与えるために使用されます。
属性は開始タグ内に記述され、属性名と属性値の組み合わせで構成されます。属性名はその属性が何を示すかを、属性値はその具体的な情報を示します。
たとえばURLを作成する「<a href=”https://goworkship.com/magazine/”>これはリンクです。</a>」というコードは、「href」属性を持つ「a」要素といえます。
「href」はリンクの目的地を示す属性で、“https://goworkship.com/magazine/”はその属性値といえる、ということです。
こういった要素を組み合わせて、HTMLはWebページの構造を定義していきます。
ここまでで、HTMLが何であり、どのように構成されるのかについて説明しました。
では、実際にHTMLを使って簡単なWebページを作成し、さらにCSSを使用して装飾を加える具体的な例を紹介します。
まずは、もっとも基本的なHTMLの構造から見ていきましょう。
以下のコードは、一般的なHTMLです。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページへようこそ!</h1>
<p>これはサンプルページです。</p>
</body>
</html>
このコードを実行すると、以下のようなWebページが完成します。
このHTMLを構成しているのは、「サンプルページ」というタイトル、「サンプルページへようこそ!」という見出し、「これはサンプルページです。」という文章(パラグラフ)となります。
次に、CSSを使って先ほど作成したHTMLを装飾します。
CSSでHTMLを装飾する場合は、以下2つの方法があります。
- HTML内に直接CSSコードを記載する方法
- CSS専用のファイルを用意する方法
ここでは、直接CSSコードをHTML内に記載する方法で、サンプルを提示します。
<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title>
<style>
body {
background-color: grey;
}
h1 {
color: white;
}
</style>
</head>
<body>
<h1>サンプルページへようこそ!</h1>
<p>これはサンプルページです。</p>
</body>
</html>
このコードを実行すると、これまでに提示していたWebページが装飾されます。
このコードによって、Webページの背景色が ‘grey’ になり、見出しの文字色が ‘white’ に変更されました。
これは簡単な例で単純なコードになっていますが、すべてのWebページはこういったパーツの配置と、装飾の指定がベースになっています。
Web開発やWebデザインに興味がある方は、HTMLの学習は絶対に避けては通れません。
しかし冒頭でも触れたように、私はWeb開発やWebデザインに限らず、ITの初学者すべての方にHTMLの学習を推奨します。「プログラミング言語の基礎が身につくから」ではありません。エンジニアが普段会話をするときの、さまざまな前提条件が学べる点に魅力があると考えています。
サーバーと自分のPCの違い、Webページを修正する方法、キャッシュ、ブラウザの開発者ツールなど、エンジニアが普段意識することすらない、“当然”と言われる知識をHTMLの学習によって習得できるでしょう。
HTMLの学習方法はさまざまですが、とくに効果的な方法をいくつか紹介します。
▲出典:Progate
Progateとは、Webブラウザ上でプログラミングを学習できるサイトです。2014年にサービスが開始され、「初めてのプログラミングなら、まずはProgateから」と言われるほど、エンジニア界隈でも評判のサイトです。
Progateはブラウザ上でHTMLやCSSを実行できるため、開発環境を用意しなくても良い点が魅力。HTML&CSSという合わせてのレッスンとなりますが、基本を学ぶのには十分過ぎるほどおすすめです。
▲出典:Udemy
Udemyとは、プログラミングなどを学習できるオンライン動画学習サービスです。
Udemyのコンセプトは「教えたいと学びたいをつなぐ」。さまざまなエンジニアが初学者に向けた教材を提供しています。
動画であることから、実際にプログラミングしている様子を見ながら学習できるため、エンジニアの癖などが見れる点も強みといえます。
なお、Udemy以外にもおすすめの学習サイトはあるため、詳細は以下の記事をご参照ください。
オンラインのプログラミング学習サービス27選
Workship MAGAZINE
学習を進めるにあたって、調べてもいまいち理解できない点が出てくるかもしれません。
そんなときに役立つのがプログラミングスクールです。わからないことがあれば、必要に応じて講師に質問しながら学習を進められます。
また、有償のサービスがほとんどであるため、「お金を払っている」状況を作り出すのも学習のモチベーション維持につながるといえます。
2024年 東京都内の優良プログラミングスクール20選
Workship MAGAZINE
Webページの作成は、初学者にとってのゴールです。しかし、学習方法としてもおすすめするのには理由があります。
まず「こんな配置で、こんな装飾のWebページを作りたい」といった構想は、どんな方でもできるはずです。
インターネット上には、さまざまな有志による解説サイトが多くあるため、たとえば「HTML 見出し 作り方」と検索すれば、大量のサイトがヒットします。構想通りにWebページが作れるように、随時調べながらHTMLを記載していく実践型の手法です。
個人的にはこれがもっともおすすめです。
この記事では、HTMLとは何か、HTMLで何ができるか、またHTMLをどのように学習するかについて解説しました。
HTMLはWebサイト作成の基礎となるマークアップ言語であり、プログラマだけでなくすべてのエンジニアに、この仕組みを理解することをおすすめします。
そしてHTMLを極めれば、おのずとWeb制作などの際にもスキルを活かせるでしょう。
高報酬のエンジニア案件を探すなら、フリーランス向けのマッチングサービス『Workship』がおすすめです。
バックエンド、フロントエンド、インフラなど、多岐にわたる分野がカバーされており、HTMLはもちろんJava、PHP、Pythonといった人気の高いプログラミング言語を活用した案件も豊富にあります。大規模企業からスタートアップ案件まで幅広く、時給1,500円から10,000円という高単価の案件だけを掲載しています。
また、リモートワーク可能な案件が80%以上と、柔軟な働き方に対応可能な仕事が多数掲載されています。さらに、トラブル相談窓口や成約者向け福利厚生サービスの無償提供など、安心して働くための環境も整っています。質の高い案件に取り組みたい方には特におすすめです。
(執筆:セイタモ 編集:北村有)
【連載】プログラミングでできること
現役エンジニアによる各言語の特徴紹介!
プログラミングでできることとは?初心者のための超基礎知識
JavaScriptでできることとは?おすすめの学習方法を徹底解説
【AI開発に必須】Pythonでできること7選。機械学習はもちろん、データ分析やWebアプリ開発も!
Javaでできることとは?汎用性の高い初心者おすすめ言語
PHPでできることとは?Webアプリケーションを作るならコレ!
Rubyでできることとは?スピード感ある開発をしたい方におすすめ!
Go言語でできることとは?パフォーマンスの高い汎用的な言語
Swiftでできることとは?iPhoneアプリの開発ならこのプログラミング言語!
C++でできることとは?IoTや機械工学が得意な歴史ある言語!
Kotlinでできることとは?Googleが推奨する次世代Android用言語
C言語でできることとは?IoTやロボット開発にも使われる汎用言語
C#でできることとは? 幅広いアプリ開発に用いられる将来性の高い言語
Unityでできることとは?世界中のゲーム開発に使われるゲームエンジン
CSSでできることとは? 洗練されたWebデザインに必須の言語!
Perlでできることとは? 存在感は薄れるもニッチな需要がある言語
HTMLでできることとは? プログラミングの基本となる初心者向け言語!