HTML・CSSとは
HTML/CSSはWeb制作において欠かせないものです。Webデザインに携わったことがなかったり、業務で目にするものの実際に記述はしたことがなかったりする場合、定義が曖昧になっている方も多いでしょう。
そこで、まずはHTML・CSSの基礎知識について解説します。HTMLとCSSの違いやそれぞれの役割・関係、使い方についてまとめていきます。
HTMLとは？
HTMLとは、Webページを作成するための言語のことで、タグを使ってWebページの構造を定義します。たとえば、見出しや本文などテキストのレベル分け、表・画像・リンクなどの配置など、Webページに必要な要素を任意に組み立てることが可能です。
HTMLはWebページの骨組みとなる言語で、HTMLで書かれたソースコードをブラウザに読み込ませることで、ブラウザがHTMLをWebページに変換して表示します。
CSSとは？
CSSとは、主にWebページのデザインを変更するための言語です。CSSを使うことで、Webページの文章の色を変更する・フォントサイズを変更するなどの調整ができます。
なお、HTMLのみでデザインを調整することもできます。CSSがなかった頃は、文章の構造設定・デザイン設定をHTMLだけで行っており、現在も技術的には可能です。
しかし、HTMLでデザイン設定を行うと、ソースコードが長くなり読みにくくなります。ソースコードが読みにくくなると、Webページを修正する際に該当箇所を探すのが困難になってしまいます。
そこで、デザイン調整はHTMLではなくCSSで行うようになりました。デザイン関連の記述をCSSですることで、HTMLのソースコードが見やすくなります。現在ではWeb制作で必ずと言って良いほどCSSが使われています。
HTML・CSSは難しい？
「HTML・CSSは難しいのでは？」と気になる方もいるでしょう。ITエンジニアの方からすれば、HTMLやCSSはそこまで難しくはないと思われます。基本的な構造がシンプルなので、少なくともPHPやJavaScriptと比べると習得は簡単です。
しかし、タグの種類やプロパティの書き方など覚えることが多いので、HTML・CSSを理解するためにはある程度の学習時間を確保する必要があります。
Web関連の仕事に就きたいと考えている方は、就職・転職活動を行う前に習得して、使いこなせるようになっておくと有利です。未経験からITエンジニアを目指すなら、自分のスキルに合った企業を探してくれる転職エージェントの活用をおすすめします。
エンジニア転職のご相談はぜひ
『マイナビIT エージェント』へ！
HTML・CSSの基本文法
では、HTMLとCSSの基本文法を見ていきましょう。HTMLもCSSも基本文法は初心者でも覚えやすいです。実際によく使われる構成要素の例と合わせて解説していきます。
HTMLの代表的なタグと書き方
HTMLは、タグを用いて記述していく言語です。開きタグと閉じタグ<>を用いてタグの内容を囲み、それらを複数組み合わせることでWebページを構成していきます。以下のようなものがHTMLタグの代表例です。
▪基本構造を定義するタグ
▪テキストを定義するタグ（bodyタグ内で使う）
▪リストを作成するタグ（bodyタグ内で使う）
▪テーブル（表）を作成するタグ（bodyタグ内で使う）
▪メディアを表示するタグ（bodyタグ内で使う）
CSSのの3つの要素と書き方
CSSは、「セレクタ」「プロパティ」「値」の3要素で記述するのが基本です。基本形は、以下のようになります。
セレクタ{プロパティ:値;}
3つの要素はそれぞれ以下の内容を定義する役割を持っています。
▪セレクタ：どの箇所を調整するのか（HTMLタグの種類） ▪プロパティ：どのようなスタイル・デザインを適用させるか ▪値：どのスタイル・デザインにするか、どのくらい調整するか
一部ではありますが、プロパティや値には以下のようなものが使われます。よく使われる代表的な種類です。
プロパティの種類 ▪font-family：文字の種類 ▪font-size：文字サイズ ▪font-weight：文字の太さ ▪color：色 ▪height：高さ ▪width：横幅 ▪background-color：背景色
値の種類 ▪blue：青 ▪px：ピクセル ▪cm：センチメートル ▪pt：ポイント ▪s：秒
値には、blueなどスタイルの名前や数値が入ります。
例えば、見出し1（h1）の文字色を青にしたい場合、h1{color:blue;}、その段落の文字サイズを20ピクセルにしたい場合、p{font-size: 20px;}となります。複数のプロパティを使う場合は、p{font-size: 20px, color: blue;}のように「,」で区切ります。
HTMLにCSSを適用させる方法
HTMLとCSSを組み合わせて使うには、骨子となるHTMLのソースコードにCSSを適用させる必要があります。HTMLにCSSを適用させる方法は次の3つです。
▪HTMLタグに直接書き込む（インラインスタイルシート） ▪headタグに書き込む（内部スタイルシート） ▪CSSファイルを読み込む（外部スタイルシート）
HTMLタグに直接書き込む方法では、CSSを適用させたい箇所に「style="〇〇"」（〇〇はCSSのプロパティと値）を追加してCSSとHTMLをつなげることができます。
<h1 style="color: blue;">〇〇</h1>headタグ２を使う方法では、そのページに適用したいCSSのコードをheadタグ内にまとめて記述します。
<head>
<style>
h1{color: blue;}
</style>
</head>ただし、CSSはソースコードの可読性を上げるために別ファイルに記述することが多いです。外部のCSSファイルを読み込むやり方については後ほど解説します。
HTML・CSSの基本的な使い方
続いて、初心者向けにHTML・CSSの基本的な使い方を紹介します。HTMLとCSSを使ってWebサイトをどのようにデザインするのか、初歩的な手順をまとめました。HTMLとCSSのファイルの作り方やブラウザに表示する方法などが分からない方は、こちらを参考にしてください。
①テキストエディタとWebブラウザを用意する
まずは、HTML・CSSでWebサイトを作る際に必要なものを準備します。HTML・CSSのソースコードを記述するには、テキストエディタが必要です。テキストエディタは普段使っているもので問題ありません。
テキストエディタをインストールしていない方は、メモ帳でもソースコードを記述することができます。
続いて、HTML・CSSの表示結果を確認するために、Webブラウザが必要です。Webブラウザの種類はさまざまありますが、特に指定はありません。パソコンにあらかじめインストールされているもので問題ありません。
この2つがあれば、Webサイトを作成することができます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバが必要です。Webサーバは自分で構築したり、レンタルしたりして準備します。今回は作成したWebサイトをパソコンで確認する手順のみ説明しますので、Webサイトの公開方法は割愛します。
②HTMLの雛形を作り、ファイル保存する
次に、HTMLの雛形を作ります。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザがHTMLのソースコードを正しく読み込むことができません。
HTMLには多くのタグがありますが、どのタグを利用する場合も基本的には以下の要素が必要になります。テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。
<html>
<head>
</head>
<body>
</body>
</html>HTMLは、html要素・head要素・body要素の3要素が軸となっています。「html」は、この文書がHTMLの文書であることを示すタグです。htmlタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。
「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述します。
雛形を記述したら、HTMLファイルを保存します。ファイル名は「test.html」などとしましょう。ファイルの拡張子を「html」にすることで、htmlファイルとして識別されます。
③Webページの内容を記述する
続いて、Webページに表示する内容を記述します。先程解説したように、Webページに表示する本文はbodyタグの中に記述します。bodyタグの中に、以下のように「Hello World」と記述してみましょう。
<html>
<head>
</head>
<body>
Hello World
</body>
</html>上記のように記述することで、Webページに「Hello World」という文字列を表示させることができます。
④記述内容が正しく表示されるか確認する
作成したHTMLファイルをブラウザで開き、先ほど記述した「Hello World」が正しく表示されるかどうかを確認します。作成した「test.html」のファイルをダブルクリックするとブラウザが起動し、「test.html」の記述内容がブラウザで表示されます。
正しく記述できている場合、ブラウザ上に「Hello World」と表示されます。以上で、ここで解説する手順でのHTMLファイルの作成・確認は完了です。
⑤HTMLでCSS読み込みの設定を行う
次にCSSファイルを作成していきますが、ここではHTMLにCSSを適用させる方法として外部のCSSファイルを読み込む方法を紹介します。
CSSファイルを作成する前に、HTMLにCSSを読み込ませる設定をします。CSSを読み込ませるには、HTMLのheadタグにCSSのファイル名を指定します。ここでは、CSSのファイル名を「test.css」として、次のように記述します。
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
Hello World
</body>
</html>linkタグは関連する文書を指定するためのものです。このように記述することで、HTMLにCSSを読み込ませることができます。
⑥CSSファイルを作成する
最後に、CSSファイルを作成します。テキストエディタを開き、以下のように記述してみましょう。
body {
font-weight: bold;
}CSSは「セレクタ{プロパティ:値;}」というように記述するのが基本です。セレクタに「どこを変更するのか」を記述します。上記の場合、bodyタグの中に書かれた文章全てが対象となっています。プロパティと値には、「何をどのように変更するのか」を記述します。上記の場合、文字の太さを太字に変更しています。これがCSSの書き方の基本です。
記述したらファイルを保存します。ファイル名は先ほどHTMLで設定した通り「test.css」とします。④の手順と同様に、「test.html」を開いて確認しましょう。「Hello World」という文字が太字になっています。これはCSSファイルによって、Webページ上の文字を太字に変更したからです。
ぜひ『マイナビIT エージェント』をご活用ください！
HTML・CSSを活かせる職業と年収は？
HTMLやCSSは、Web関連の職種に必須の知識です。では、具体的にどのような職業に就けば、これらのスキルを最大限に活かせるのでしょうか。また、実際の年収情報とともに、さらなるキャリアアップを図る方法をお伝えします。
Webデザイナー
クライアントから依頼を受けてWebサイトを作り上げるのがWebデザイナーの仕事です。要望の聞き取り、ワイヤーフレームや情報設計の構築、全体的なデザインの作成、HTML/CSSを使用したコーディングなど、業務は多岐に渡ります。
大きな製作会社であれば、コーディング部分を専門のコーダーに任せる場合もあります。とはいえ、HTMLやCSSの知識は必須です。
Webコーダー
Webデザイナーが作成したサイトのデザインに従って、HTML/CSSを使用しコーディングを行うのがWebコーダーです。
Webデザイナーのように、クライアントと接したりワイヤーフレームを構築したりすることはないものの、上位職ではJavaScriptやPHPといったプログラミング言語の知識を求められる場合もあります。
Web関連職種の年収
Webエンジニアの年収は「マイナビエージェント 職種図鑑」で見ると、スキルやキャリア、勤務先によって大きく変動するとあります。参考までに、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」からコンテンツクリエイタ/デザイナーの年収を見てみると、平均年収411万円と分かりました。
国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、Webエンジニアの年収はバラつきがあるものの、一般平均年収よりもやや低いことが分かります。
Webデザイナーを含むITエンジニアの報酬は、実績やスキルが重要視される傾向があります。そのため、年収アップを目指すには、HTMLやCSSの知識はもちろんその他のプログラミング言語を習得したり、資格を取得したりすることが重要です。
幅広い知識と高いスキルを証明できれば、年収アップや上位職へのキャリアアップに繋げられるでしょう。
【参考】：マイナビエージェント 職種図鑑 ※【平均年収 調査対象者】2020年1月～2020年12月末までの間にマイナビエージェントサービスにご登録頂いた方 【参考】：IT関連産業における給与水準の実態① ~ 職種別（P7） 【参考】：民間給与実態統計調査-国税庁
HTML・CSSの独学方法
ここでは、HTML・CSSの独学方法について解説します。HTML・CSSは初心者でも比較的習得しやすいと言われています。プログラミングスクールで学ぶ方法もありますが、独学でも十分習得は可能でしょう。
学習サイトを使う
学習サイトでは効率的な勉強が可能です。Progateやドットインストールなどには、HTML・CSSの教材があります。学習サイトは月額1,000円程度で活用できるため、コストパフォーマンスに優れています。実際に記述練習をする練習サイトとしても使えます。
Progateはスライドで、ドットインストールは動画でHTML・CSSを学ぶことが可能です。どちらか自分にとって分かりやすい方を選択して、勉強するのが良いでしょう。
【参考】：Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート] 【参考】：ドットインストール - 3分動画でマスターできるプログラミング学習サービス
スマホアプリで学ぶ
スマートフォン用の学習アプリにも、HTML・CSSを学べるものが多数あります。スマホアプリのメリットは、通勤・通学の移動中や仕事の休憩中などの隙間時間に取り組めることです。まとまった学習時間を確保できない方は、スマホアプリで少しずつ勉強すると良いでしょう。
しかし、スマホアプリはコーディングをしながら学ぶということができないため、知識のアウトプットには向いていません。参考書や学習サイトと平行しながら、スマホアプリで学習することをおすすめします。
書籍を活用する
HTML・CSS関連の書籍は多数販売されています。書籍を購入することで、HTML・CSSを体系的に身につけることが可能です。書籍は内容が整理されており、イラストや図解などが付いているものも多いです。文章を読むのが苦手な方でも分かりやすいように書かれているものもあるため、学びやすいでしょう。
なお、書籍はなるべく最新のものを選ぶことが重要です。出版日が数年前の書籍だと、HTMLやCSSのバージョンが古い場合があります。2024年6月現在、HTMLは HTML Living Standard、CSSはCSS3が最新バージョンです。
HTML・CSSはバージョンによって書き方が異なる場合があるため、最新バージョンに対応している書籍を選ぶようにしましょう。購入する前に、書籍の出版日は必ず確認してください。
HTML・CSSのおすすめ書籍6選
ここでは、HTML・CSSの学習におすすめの書籍を、HTMLとCSSそれぞれ分けて6冊紹介します。
なお、HTMLとCSSはセットで学習することが望ましいため、販売されている書籍の多くはHTML・CSS両方について解説しているものが多いです。そのため、以下で紹介する書籍もHTML・CSS両方の内容を含むものがあります。
プロを目指す人のための HTML& CSSの教科書 ［HTML Living Standard準拠］
HTMLは2020年4月にバージョンアップされており、最新バージョンは HTML Living Standardです。本書はHTML Living Standardの仕様に沿った情報を基に、さらに最近のトレンドの内容も盛り込まれています。
手順が短く区切られているためわかりやすく、コーディングの成果をすぐに確認することができるため、達成感を得やすいです。また、「なぜこのHTML・CSSを使うのか」という丁寧な解説があるため、応用的な知識も身につけることができます。
▪著者：大藤 幹 ▪ページ数：320ページ ▪出版社：マイナビブックス ▪発売日：2022/05/26
【参考】：プロを目指す人のための HTML& CSSの教科書 ［HTML Living Standard準拠］
HTML解体新書 仕様から紐解く本格入門
本書はHTMLをより深く理解したい方向けに、細かい構文のルールや各要素について詳しく解説しています。HTMLの基礎知識は既にあり、HTMLの高度な知識や技術を身につけたい方におすすめです。
本書を読むことで、静的なWebページはもちろん、動的なWebアプリケーションをHTMLで設計・記述できるようになります。また、HTMLの仕様を理解する上で前提となる知識についても解説されています。
▪著者：太田 良典、中村 直樹 ▪ページ数：352ページ ▪出版社：株式会社ボーンデジタル ▪発売日：2022/04/19
【参考】：HTML解体新書
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
本書は、HTMLとCSSの基本を体系的に学べるWebサイト制作の入門書です。コードの知識からデザインまで1冊ですべて学ぶことができ、モバイルファースト、レスポンシブ、Flexbox、アニメーションといった最新技術やトレンドもわかりやすく解説されています。
実際のコーディングについては、練習問題を活用できるほか、後半ではよく使われるレイアウトで実際に1つのWebサイトを制作できる仕様になっています。解説動画も用意されており、QRコードから動画にアクセスして視覚的に学ぶこともできます。
▪著者：Mana ▪ページ数：320ページ ▪出版社：SBクリエイティブ ▪発売日：2024/03/02
【参考】：1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］
マネするだけでセンスいい！CSSデザイン
知識ゼロからでも、手を動かしながらCSSデザインのコツをつかめる1冊です。CSSを初めて学ぶ方にもわかりやすい解説と図解で構成されており、実際に自分でサンプルを作成しながら読み進めることができます。
「これからWebサイト制作をする初心者、Webサイトの更新を任されてしまった方、一からデザインを作るのに不安のある方」におすすめとされており、現場で役立つ知識にも触れられています。
▪著者：YUI ▪ページ数：312ページ ▪出版社：ソーテック社 ▪発売日：2023/11/21
【参考】：マネするだけでセンスいい！CSSデザイン
HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉
こちらも初心者におすすめの1冊です。「Webページを作ってみたい」「HTML/CSSの仕組みを知りたい」「プログラミングを始めてみたい」といった方に向けた、やさしい入門書となっています。
Webコンテンツ作りに必要なHTML/CSSの考え方や概念について、フルカラーイラスト・見開き単位で1つ1つ丁寧に解説されているため、「他の解説書を読んでみたものの難しかった」という方でも挫折しにくいです。
▪著者：株式会社アンク ▪ページ数：200ページ ▪出版社：翔泳社 ▪発売日：2023/03/22
【参考】：HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉
プロのコーディングが身につくHTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック
HTML/CSSの知識をひと通り身につけたけれども、実際の制作において自分のやり方が本当に最適なものなのか自信がない、と感じている方におすすめの本です。本書では、「現場の経験則」をもとにした、実務での知識の組み合わせ方・選択肢の選び取り方を学ぶことができます。
本書を読めば、実務ならではのコーディングの悩み・課題を解決し、「ただ知っているだけの知識」を「現場で活かせるスキルと自信」に変えて状況や目的に応じた設計ができるようになります。
▪著者：千貫 りこ ▪ページ数：264ページ ▪出版社：翔泳社 ▪発売日：2023/01/17
【参考】：プロのコーディングが身につくHTML/CSSスキルアップレッスン すぐに活かせてずっと役立つ現場のテクニック
HTML・CSSを習得してWeb分野で活躍しよう
本記事ではHTML・CSSについて解説しました。HTML・CSSとは何かを理解して頂けたかと思います。HTMLやCSSはWebサイトをデザインする上で必ず使うものです。Web系エンジニアやWebデザイナーを目指すなら、まずHTML・CSSを習得しましょう。
さらに、JavaScriptやPHPなどのプログラミング言語も習得できると、より仕事の幅が広がるでしょう。HTML・CSSを使いこなした上で、その他のプログラミング言語にも精通していれば、大幅なキャリアアップも夢ではありません。
しかし、「自分のスキルを活かせる職場が見つかるか不安」「新たな職場で一から働くのは怖い」という理由から、一歩踏み出せない方も多くいます。
そこで利用を推奨するのがマイナビIT エージェントです。
マイナビIT エージェントは、IT・Webエンジニア向け、無料の転職⽀援サービスです。
IT・Webエンジニアの転職事情に詳しいキャリアアドバイザーが、あなたのご経験やスキルをお伺いし、転職活動のプランをご提案します。
アドバイザーは企業側と直接連携を取れるので、求人票に載っていない情報も確認することができます。こちらで、働き方などをしっかり確認の上、応募企業を選んでいくのが良いでしょう。
未経験からのキャリアチェンジは心身ともに本当に大変だと思います。少しでもご自身の負担を減らすべく、エージェントサービスを活用して、失敗のない転職活動に臨んでいただければ幸いです。
IT業界に精通した専任アドバイザーと豊富な求人で、
あなたの転職活動を丁寧にサポートします。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
