HTML・CSSとは
HTML/CSSはWeb制作において欠かせないものです。Webデザインに携わったことがなかったり、業務で目にするだけだったりする場合、定義が曖昧になっている方も多いでしょう。
そこで、ここではHTML・CSSの基礎知識について解説します。HTMLとCSSの違いやそれぞれの役割、HTMLとCSSの関係やつなげるやり方についてまとめていますので、HTMLやCSSについてもっと深く知りたいという方は、まずはこちらから読み進めてください。
HTMLとは?
HTMLとは、Webページを作成するための言語のことです。タグを使ってWebページの書式を表します。たとえば、表・画像・リンクなどのWebページに必要な要素を、任意の位置に配置することが可能です。
HTMLで書かれたソースコードをブラウザに読み込ませることで、ブラウザがHTMLをWebページに変換して表示します。
CSSとは?
CSSとは、主にWebページのデザインを変更するための言語です。CSSを使うことで、Webページの文章の色を変更する・フォントサイズを変更するなどの調整ができます。
なお、HTMLのみでデザインを調整することもできます。CSSがなかった頃は、文章の構造設定・デザイン設定をHTMLだけで行っており、現在も技術的には可能です。
しかし、HTMLでデザイン設定を行うと、ソースコードが長くなり読みにくくなります。読みにくくなると、Webページを修正する際に該当箇所を探すのが困難になるでしょう。
そこで、デザイン調整はHTMLではなくCSSで行うようになりました。デザイン関連の記述をCSSに移すことで、HTMLのソースコードが見やすくなります。現在ではWeb制作をする際、必ずと言って良いほどCSSが使われています。
CSSはHTMLに埋め込んで使うことも可能ですが、ソースコードの可読性を上げるために別ファイルに記述することが多いです。
HTML・CSSは難しい?
「HTML・CSSは難しい?」と気になる方もいるでしょう。エンジニアの方からすると、HTMLやCSSはそこまで難しくはありません。基本的な構造がシンプルなので、少なくともPHPやJavaScriptと比べると習得は簡単です。
しかし、タグの種類やプロパティの書き方など覚えることが多いので、HTML・CSSを理解するためにはある程度の学習時間を確保する必要があります。
Web関連の仕事に就きたいと考えている方は、就職・転職活動を行う前に習得して、使いこなせるようになっておくと有利です。未経験からITエンジニアを目指すなら、自分のスキルに合った企業を探してくれる転職エージェントの活用をおすすめします。
エンジニア転職のご相談はぜひ
『マイナビIT エージェント』へ!
HTML・CSSの使い方
続いて、HTML・CSSの使い方を紹介します。HTMLとCSSを使ってWebサイトをどのようにデザインするのかといった手順をまとめました。HTMLとCSSのファイルの作り方やブラウザに表示する方法などが分からない方は、こちらを参考にしてください。
①必要なものを用意する
まずは、HTML・CSSでWebサイトを作る際に必要なものを準備します。HTML・CSSのソースコードを記述するには、テキストエディタが必要です。テキストエディタは普段使っているもので問題ありません。
テキストエディタをインストールしていない方は、メモ帳でもソースコードを記述することができます。
続いて、HTML・CSSの表示結果を確認するために、Webブラウザが必要です。Webブラウザの種類はさまざまありますが、特に指定はありません。パソコンにあらかじめインストールされているもので問題ありません。
上記で説明したテキストエディタ(メモ帳)とWebブラウザの2つがあれば、Webサイトを作成することができます。ただし、作成したWebサイトをネット上に公開するためには、Webサーバが必要です。Webサーバは自分で立てたり、レンタルしたりして準備します。
なお、今回は自分が作成したWebサイトをパソコンで確認する手順のみ説明しますので、Webサイトの公開方法は割愛します。
②HTMLの雛形を作る
次に、HTMLの雛形を作ります。HTMLは特定の書式に従って書く必要があります。書式に従わないと、ブラウザがHTMLのソースコードを正しく読み込むことができません。テキストエディタを開き、以下のようにHTMLの雛形を記述しましょう。
<html>
<head>
</head>
<body>
</body>
</html>
雛形を記述したら、HTMLファイルを保存します。ファイル名は「test.html」としましょう。ファイルの拡張子を「html」にすることで、htmlファイルとして識別されます。
HTMLは、html要素・head要素・body要素の3要素が軸となっています。はじめにhtml要素・head要素・body要素の3つのタグを記述します。「html」は、この文書がHTMLの文書であることを示すタグです。htmlタグを記述することで、ブラウザが「これはHTMLなんだ」と認識することができます。
「head」は、文書のメタデータを示すタグです。たとえば、headタグの中にWebサイトのタイトルを記述することが可能です。「body」は、文書の本文を示すタグです。bodyタグの中にWebページに表示する文章を記述します。
③表示する情報を記述する
続いて、Webページに表示する文章を記述します。先程解説したように、Webページに表示する文章はbodyタグの中に記述します。bodyタグの中に、以下のように「Hello World」と記述してください。
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
上記のように記述することで、Webページに「Hello World」と表示させることができます。
④記述した内容が正しく表示されるかをブラウザでチェックする
正しく「Hello World」と表示されるかどうかを確認します。確認するには作成したHTMLファイルをブラウザで開きます。ブラウザでHTMLファイルを開くには、作成した「test.html」をダブルクリックします。するとブラウザが起動し、「test.html」の記述内容がブラウザで表示されます。
正しく記述できている場合、「Hello World」と表示されます。以上でHTMLファイルの作成・確認は完了です。
⑤HTMLにCSSを読み込ませる
次に、CSSファイルを作成します。なお、CSSファイルを作成する前に、HTMLにCSSを読み込ませる設定をします。CSSを読み込ませるには、headタグにCSSのファイル名を指定します。次のように記述してください。
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
Hello World
</body>
</html>
linkタグは関連する文書を指定するためのものです。ここでは「test.css」を関連ファイルとして指定します。このように記述することで、HTMLにCSSを読み込ませることができます。
⑥CSSファイルを作成する
最後に、CSSファイルを作成しましょう。テキストエディタを開き、以下のように記述してください。
body {
font-weight: bold;
}
記述したらファイルを保存します。ファイル名は「test.css」にしてください。先程同様、「test.html」を開いて確認しましょう。「Hello World」という文字が太字になっています。これはCSSファイルによって、Webページ上の文字を太字に変更したからです。
CSSは「セレクタ{プロパティ:値;}」というように記述するのが基本です。セレクタに「何を変更するのか」を記述します。上記の場合、bodyタグの中に書かれた文章全てが対象となっています。プロパティと値には、「何をどのように変更するのか」を記述します。上記の場合、文章を太字に変更しています。
これがCSSの書き方の基本です。
ぜひ『マイナビ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はそこまで難しいものではありません。プログラミングスクールで学ぶ方法もありますが、HTML・CSSなら独学でも十分習得は可能でしょう。
学習サイトを使う
学習サイトでは効率的な勉強が可能です。Progateやドットインストールなどには、HTML・CSSの教材があります。学習サイトは月額1,000円程度で活用できるため、コストパフォーマンスに優れています。
Progateはスライドで、ドットインストールは動画でHTML・CSSを学ぶことが可能です。どちらか自分にとって分かりやすい方を選択して、勉強するのが良いでしょう。
【参考】:Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート] 【参考】:ドットインストール - 3分動画でマスターできるプログラミング学習サービス
スマホアプリで学ぶ
スマートフォン用の学習アプリにも、HTML・CSSを学べるものが多数あります。スマホアプリのメリットは、通勤・通学の移動中や仕事の休憩中などの隙間時間に取り組めることです。まとまった学習時間を確保できない方は、スマホアプリで少しずつ勉強すると良いでしょう。
しかし、スマホアプリはコーディングをしながら学ぶということができないため、知識のアウトプットには向いていません。参考書や学習サイトと平行しながら、スマホアプリで学習することをおすすめします。
書籍を活用する
HTML・CSS関連の書籍は多数販売されています。書籍を購入することで、HTML・CSSを体系的に身につけることが可能です。書籍は内容が整理されており、イラストや図解などが付いているものもあります。文章を読むのが苦手な方でも分かりやすいように書かれているものもあるため、学びやすいでしょう。
なお、書籍はなるべく最新のものを選ぶことが重要です。出版日が数年前の書籍だと、HTMLやCSSのバージョンが古い場合があります。2023年6月現在、HTMLは HTML Living Standard、CSSはCSS3が最新バージョンです。
HTML・CSSはバージョンによって書き方が異なる場合があるため、最新バージョンに対応している書籍を選ぶようにしましょう。購入する前に、書籍の出版日は必ず確認してください。
HTML・CSSのおすすめ書籍6選
ここでは、HTML・CSSの学習におすすめの書籍を、HTMLとCSSそれぞれ分けて6冊紹介します。
なお、HTMLとCSSはセットで学習することが望ましいため、販売されている書籍の多くはHTML・CSS両方について解説しているものが多いです。そのため、以下で紹介する書籍もHTML・CSS両方の内容を含むものがあります。
【HTML】プロを目指す人のための 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の基礎知識は既にあり、HTMLの高度な知識や技術を身につけたい方におすすめです。
本書を読むことで、静的なWebページはもちろん、動的なウェブアプリケーションをHTMLで設計・記述できるようになります。また、HTMLの仕様を理解する上で前提となる知識についても解説されています。
▪著者:太田 良典、中村 直樹 ▪ページ数:352ページ ▪出版社:株式会社ボーンデジタル ▪発売日:2022/04/19
【参考】:HTML解体新書
【HTML】HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
本書は入門者向けに「コーディングとは何か」という、HTML・CSSを扱う前段階の知識について解説しています。実際のコーディングでは、チュートリアル方式でカフェ紹介サイトとネットショップサイトの作成がわかりやすく学べます。
また、基本的な構文のほかにレイアウトやデザインのテクニックについても詳しく解説されています。
▪著者:服部 雄樹 ▪ページ数:384ページ ▪出版社:技術評論社 ▪発売日:2021/12/27
【参考】:HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
【CSS】ざっくりつかむ CSS設計
フロントエンジニアやWebデザインの仕事をしたい方が、実務で役に立つような知識・技術が学べる本です。余白の設定・ユーティリティファーストなどのCSSの設計についてわかりやすく解説されています。
また、デザイナーやほかの開発者たちと連携するためのルール作成といった、チームでWebデザインをする上で重要なことについても触れられています。
▪著者:高津戸 壮 ▪ページ数:272ページ ▪出版社:マイナビブックス ▪発売日:2021/12/23
【参考】:ざっくりつかむ CSS設計
【CSS】CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSSの多用な設計手法が紹介されており、個々のプロジェクトやWebサイトに最適な設計方法とは何かを考えるための知識が紹介されています。ボタン・ラベル・テーブルといった定番のモジュールの組み合わせ方について、実践的なコードを用いて解説しています。
効率的にCSSを使いたいWeb開発者やフロントエンジニアの方におすすめの本です。
▪著者:半田 惇志 ▪ページ数:512ページ ▪出版社:技術評論社 ▪発売日:2020/02/27
【参考】:CSS設計完全ガイド ~詳細解説+実践的モジュール集
【CSS】教科書では教えてくれないHTML&CSS
HTML・CSSの講座や書籍で学習しても、実際の仕事で求められているレベルに達していないと感じる方におすすめの本です。本書では、HTML・CSSの基礎知識を現場で使えるようにするテクニックについて学べます。
本書を読めば、デザインの構造を把握し、作成したいイメージを形にするにはHTML・CSSをどのように設計するのかといったことが理解できます。
▪著者:狩野 祐東 ▪ページ数:336ページ ▪出版社:技術評論社 ▪発売日:2021/07/14
【参考】:教科書では教えてくれないHTML&CSS
HTML・CSSはWeb系エンジニアやWebデザイナーには必須!
本記事ではHTML・CSSについて解説しました。HTML・CSSとは何かを理解して頂けたかと思います。HTMLやCSSはWebサイトをデザインする上で必ず使うものです。Web系エンジニアやWebデザイナーを目指すなら、まずHTML・CSSを習得しましょう。
さらに、JavaScriptやPHPなどのプログラミング言語も習得できると、より仕事の幅が広がるでしょう。HTML・CSSを使いこなした上で、その他のプログラミング言語にも精通していれば、大幅なキャリアアップも夢ではありません。
しかし、「自分のスキルを活かせる職場が見つかるか不安」「新たな職場で一から働くのは怖い」という理由から、一歩踏み出せない方も多くいます。
そこで利用を推奨するのがマイナビIT エージェントです。
マイナビIT エージェントは、IT・Webエンジニア向け、無料の転職⽀援サービスです。
IT・Webエンジニアの転職事情に詳しいキャリアアドバイザーが、あなたのご経験やスキルをお伺いし、転職活動のプランをご提案します。
アドバイザーは企業側と直接連携を取れるので、求人票に載っていない情報も確認することができます。こちらで、働き方などをしっかり確認の上、応募企業を選んでいくのが良いでしょう。
未経験からのキャリアチェンジは心身ともに本当に大変だと思います。少しでもご自身の負担を減らすべく、エージェントサービスを活用して、失敗のない転職活動に臨んでいただければ幸いです。
IT業界に精通した専任アドバイザーと豊富な求人で、
あなたの転職活動を丁寧にサポートします。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから