更新日: 2019年02月15日
公開日: 2019年01月10日

「HTML・CSS」をマスターしたい初心者必見！全てがわかる総合カリキュラム

プログラミングの登竜門と言われるHTMLとCSS。WordPressなどのブログで使えたり、Webサイトを作成するときにも必要な身近なプログラミングの言語です。

今から学んでみようかな？と考えているあなたに、HTMLとCSSはどんなものなのか、どんな勉強から始めればよいのかをわかりやすく解説します！

HTML・CSSってなに？
HTMLとは
CSSとは
実際に作られているサービス
難易度や習得にかかる時間はどのくらい？
HTML・CSSの学習方法
書籍で学ぶ
Webサイトで学ぶ
HTML・CSSを実際に書くには？
開発環境として必要なもの
HTMLとCSSの基本概念
HTMLとCSSの絶対に抑えておきたい基本文法
HTMLやCSSを学んだあとに、どんな仕事ができるの？
HTML技術者の実際の求人例
転職・起業事例
サンプルコード集
HTML・CSSのカリキュラム紹介

HTML・CSSってなに？

HTMLとは

HTMLとは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、インターネット上のWebページを表現するために使われている言語です。

言語と言っても英語や日本語のような「ことば」ではなく、マークアップ言語と呼ばれる、情報をブロックのように組み立ててリンクでつなぎ、整理する書き方のことを言います。

マークアップ言語は、タグと呼ばれる＜　＞（カッコ）で情報に目印をつけて、コンピューターが理解しやすく記述されています。Webブラウザは、HTMLやCSSで書かれた文章を解読し、文字の配置、大きさやレイアウト、色、画像、リンクの設定などを行います。解読した結果、今あなたが閲覧しているようなWebサイトが表示されるのです。

Webサイト上で、右クリック→ソースを表示としてみてください。今見ているサイトのHTMLをみることができますよ。

CSSとは

よくHTMLとセットで出てくるCSSとは何でしょう。CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート）の略で、HTMLが文章や情報を分類整理するのに対し、画面の表示上のデザインを設定する役割を持つものです。例えば文字のサイズ、余白、色、画像の配置方法などのデザインに関しては、CSSを使って設定を行います。

現在、スマートフォンやタブレットの普及によるブラウザの多様化や、大胆なデザインのWebサイトの流行などにより、CSSの活用の幅がとても広がっています。HTMLを学習する際には、切っても切れない関係となっているのです。

実際に作られているサービス

HTMLとCSSを使って作られているサービスは、あなたが現在閲覧しているWebページのほぼすべてです！

難易度や習得にかかる時間はどのくらい？

HTMLやCSSはもっとも手軽に始めることのできるプログラミング言語のひとつであり、難易度は比較的低いと言えるでしょう。全くの初心者からでも10〜20時間程度、期間にして2週間〜2,3ヶ月あれば、ブログのデザイン変更やテキストや写真を配置するWebサイトの作成もできるようになるはずです。

参考：
CodeCampでは
HTML,CSSの学べるWebマスターコース上のHTML5/CSS3は9単元(合計9時間程度)
オンライン学習サイトドットインストールでは
HTML入門15回、CSS17回各学習に15分とすると合計8時間程度
生放送動画学習サイト Schooでは
HTML入門計3時間、CSS入門計3時間合計6時間程度

HTML・CSSの学習方法

全く知識がない場合は、体系だてて学べる書籍を一冊読み込むことをおすすめします！

書籍で学ぶ

デザインの学校これからはじめる HTML & CSSの本

img	text
	デザインの学校これからはじめる HTML & CSSの本著者：千貫りこ出版社：技術評論社出版年月：2017/5/26 単行本価格：2,138円 Kindle価格：2,138円

img

text

デザインの学校これからはじめる HTML & CSSの本

著者：千貫りこ
出版社：技術評論社
出版年月：2017/5/26
単行本価格：2,138円
Kindle価格：2,138円

1ページに記載されている説明も多すぎず、まったくの入門者も圧迫感なく安心して読みすすめられる本です。パソコンがちょっと苦手な方や、HTMLを初めて書いてみよう、という方にもオススメします。サンプルのCD-ROMもついているので、本の説明に沿って画像入りのホームページの作成にトライできます。

HTML5&CSS3レッスンブック

img	text
	HTML5&CSS3レッスンブック著者：エビスコム出版社：ソシム出版年月：2013/5/24 単行本価格：2,592円 Kindle価格：2,400円

img

text

HTML5&CSS3レッスンブック

著者：エビスコム
出版社：ソシム
出版年月：2013/5/24
単行本価格：2,592円
Kindle価格：2,400円

サンプルホームページを作りながら学習を進めていける、たくさんの画像と詳しい説明のある初心者にもやさしい本です。最新のHTML5,CSS3についてもきちんと解説もしてくれています。

いちばんよくわかるHTML5&CSS3デザインきちんと入門

img	text
	いちばんよくわかるHTML5&CSS3デザインきちんと入門著者：狩野祐東出版社：SBクリエイティブ出版年月：2016/10/27 単行本価格：2,678円 Kindle価格：2,480円

img

text

いちばんよくわかるHTML5&CSS3デザインきちんと入門

著者：狩野祐東
出版社：SBクリエイティブ
出版年月：2016/10/27
単行本価格：2,678円
Kindle価格：2,480円

初心者向けのやさしい構成や平易な言葉づかいがうれしい、敷居の低い本です。しかしながら、スマートフォンでの閲覧が増えている昨今の現状に合わせたレスポンシブWebデザインについて、基礎からきちんと学べる内容になっており、最新の流行について知りたい中級者にも役立ちそうです。

Webサイトで学ぶ

自分に向いているかな？と不安な方や、なかなか書籍を読む時間が取れない方は、もっと手軽にWebサイト上での学習サービスを利用してみましょう。今回紹介するものはすべて無料で気軽に始められます！

ドットインストール

画像出典：ドットインストール

手軽さとコンテンツの豊富さから、Webデザインの入門者の間で人気となっている学習サイトです。入門者向け講座の多くが無料で提供されています。3分動画講座を連続してこなしていく形式の講座となっており、隙間時間での学習にもぴったりです。

初心者向けのHTML入門やCSS入門をはじめとして、Webサイト作成に関連した様々な講座がアップされています。Webデザインの入門者に特にオススメなのは実践！ウェブサイトを作ろうやWordPress入門の講座です。とても実践的で、手順に沿って課題をこなしていくと、自分で1からサイトを作る手順が理解できますよ。

Codeprep

画像出典：Codeprep

プログラムに苦手意識のある方には、HTMLやCSSをゲーム感覚で学べる学習サイト、CODEPREPをおすすめします。目的別に別れたコンパクトなWebテキストで、課題をテンポよくこなしていくことができます。クイズ形式の入力画面で、プログラムの醍醐味である「手を動かしながら試してみる」感覚を味わえます。学習サイトのデザインもスマートで圧迫感がなく、気楽に取り組めますよ。

CSS Diner

画像出典：CSS Diner

CSSを勉強していくと詰まりがちなポイント、セレクタを中心に楽しくCSSを学習できるサイトです。HTMLのコードだけ眺めていてもわかりづらいセレクタを、かわいく動くお皿やリンゴを目印に指定することで学んでいけます。

参考：レベル別！無料でCSS が学習できるサイト9選

HTML・CSSを実際に書くには？

開発環境として必要なもの

HTML・CSSをプログラムとして作成するには、実は特別な環境は必要ありません。パソコンにインストールされているWindowsやMacなどのOSに付属しているテキストエディタとWebブラウザさえあれば、すぐに書き始められます。この手軽さが、HTMLやCSSが最もプログラミング初心者むけといわれる理由でもあります。

ただし、大規模なWebサイトや業務としてWebサイトやブログを作成する場合には、バージョンの管理やコード補完などの便利な機能が充実した開発用エディタを使うことをおすすめします。

HTML・CSSの開発に使えるエディタはatomやSublimeTextなど色々なものがあります。こちらの記事も参考に、好みのものを探してインストールしてみてください。

参考記事
CodeCampus 全部無料！HTMLエディタのオススメ10個をご紹介
 CodeCampus 今注目のテキストエディタ「Atom」の使い方と便利機能まとめ

HTMLとCSSの基本概念

HTMLは基本的にはテキスト(文章)を構造化するための言語です。構造化するというのは、見出しをつけたり、内容で段落を分けたり、リンクを貼って詳細情報を別ページで閲覧したりといった具合です。

CSSはHTML上の文字や画像の配置、デザインを組み立てるために使います。基本的にHTMLファイルとは別ファイルで作成され、HTMLファイルから参照されることでデザインの指定が反映されます。

HTMLとCSSの絶対に抑えておきたい基本文法

HTMLの基本文法

HTMLについて、タグの基本の書き方をのサンプルをみてみましょう！

HTMLでは、＜　＞（カッコ）のついた単語で囲んだ部分を一つのグループとして扱います。もっとも代表的なタグはもちろん<html>ですね。他にも、ここからがHTMLの本文です、という意味の<body>、画像を表示するための<img>、表を作る<table>などいろいろなものがあります。

サンプルコード

<html>
<body>
<h1>こんにちは！</h1>
<p>今日はとても寒い日ですね</p>
</body>
</html>

このように使います。

CSSの基本文法

次は、CSSの基本文法を見てみましょう。 CSSでは、セレクタとプロパティを使って様々な設定を行います。セレクタとは、CSSで設定したいHTMLの部分を指定するものです。プロパティは、色や大きさなど何を変更するのかを指定するものです。

セレクタ {
プロパティ：設定値 ;
}

サンプルコード

/* CSSファイルに記載します */
.sample {
    font-size: 20px;
    color: red;
}

このように使います。このサンプルでは、「.sample」と書いてある部分がセレクタです。この「.sample」は、自分で好きな名前をつけていますが、HTMLのリンクを表す「a」タグや、段落を表す「p」タグ、見出しの「h」タグなど指定の要素に対して設定を行うことができるなど、たくさんの使い方があります。

HTMLやCSSを学んだあとに、どんな仕事ができるの？

HTMLやCSSを活用できる職業は、顧客の要望に応じたWebサイトを製作するWebデザイナーや、デザイナーの指示のもとにWebサイトをコーディングするHTMLコーダーなどがあげられます。

多くの求人サイトやIT専門求人サイトでは、求められているプログラミング言語をキーワードにして検索できます。これから学習する言語を迷っている方は、どういった求人が出ているのか調べてから決めるのも良いかもしれませんね！

HTML技術者の実際の求人例

HTMLをキーワードに、求人サイトスタンバイからいくつか求人情報を検索してみました。HTMLでの正社員求人は、なんとのべ38,611件！(＊)

img	text
	HTMLコーダー（プロダクトの実装）働き方：正社員勤務地：東京都給与：年収350万円〜700万円＊2018/12/11時点

img

text

HTMLコーダー（プロダクトの実装）

働き方：正社員
勤務地：東京都
給与：年収350万円〜700万円

＊2018/12/11時点

img	text
	ガリガリ書ける人募集！】PHP, HTML5, ネイティブアプリ開発エンジニア働き方：正社員勤務地：東京都給与：年収400万円〜800万円企画・設計からリリースまで、自社サービスか直受け案件に従事します。技術を軸に価値を追求することで、新たな価値を生み出したい意欲ある方を募集します！＊2018/12/11時点

img

text

ガリガリ書ける人募集！】PHP, HTML5, ネイティブアプリ開発エンジニア

働き方：正社員
勤務地：東京都
給与：年収400万円〜800万円
企画・設計からリリースまで、自社サービスか直受け案件に従事します。技術を軸に価値を追求することで、新たな価値を生み出したい意欲ある方を募集します！
＊2018/12/11時点

img	text
	HTML5ゲームエンジニア（サーバーサイド）※業界未経験可能働き方：正社員勤務地：東京都給与：年収450万円〜900万円 JavaScriptとHTML5を使用したブラウザ向け内製ゲームのサーバーサイドの開発、および運用業務を担当頂きます。開発のみではなく、エンジニア視点の企画、仕様決め等のゲームの運営全般を一貫してご担当頂きます。＊2018/12/11時点

img

text

HTML5ゲームエンジニア（サーバーサイド）※業界未経験可能

働き方：正社員
勤務地：東京都
給与：年収450万円〜900万円
JavaScriptとHTML5を使用したブラウザ向け内製ゲームのサーバーサイドの開発、および運用業務を担当頂きます。開発のみではなく、エンジニア視点の企画、仕様決め等のゲームの運営全般を一貫してご担当頂きます。

＊2018/12/11時点

＊注意
いずれの求人情報もスタンバイにて2018年12月11日時点での検索情報です。

転職・起業事例

img	text
	「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで CodeCampにてHTML/CSSを含んだプログラミングカリキュラムを卒業し、見事転職に成功した方のインタビューが公開されています！HTMLを学んで転職を考えている方は、ぜひ参考にしてくださいね。

img

text

「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで

CodeCampにてHTML/CSSを含んだプログラミングカリキュラムを卒業し、見事転職に成功した方のインタビューが公開されています！HTMLを学んで転職を考えている方は、ぜひ参考にしてくださいね。

サンプルコード集

この記事で概要をつかんでいただけましたか？もう少し詳しく知りたいな、勉強を始めてみようかな？というかたは、こちらのCodeCampusおすすめ記事もぜひ読んでみてください！

【HTML初心者】最初に覚えたいHTMLタグ17選
HTMLのタグについてもっと知りたくなった方はぜひ読んでみてください。
【初心者でも簡単！】HTMLで文字のカラーを変更する方法
HTMLとCSSを組み合わせた使い方について、もう少し具体例を知りたくなった方はこちらを読んでみてください！
CSS入門者向け！セレクタの概要と一覧表
CSSについて、もう少し詳しく知りたくなった方におすすめです。
【初心者向け】初めてのWordPressでカスタマイズをする手順とは？](https://blog.codecamp.jp/wordpress-beginner-customize)
HTMLとCSSを使って、WordPressのカスタマイズをやってみたい！というかたは、こちらを読んでみてください。
【初心者必見】これからWebサイト作成をしたい人がやるべき5個のこと HTMLとCSSを使ってWebサイトを作成したい！という方はこちらを読んでみてください。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら

HTML・CSSのカリキュラム紹介

弊社CodeCampでも、HTMLとCSSが学べるコースがあります。HTMLとは何？というところからの出発でも、なんとレシピサイトやECサイト(お買い物サイト)が自作できるレベルまで到達できます！

CodeCampでは、HTML・CSS単体コースではなく、Webデザイナーやプログラマーとして即戦力となることのできるレベルまでのカリキュラムが用意されています。HTMLやCSSを独学していた方も、HTMLを学んだ後の学習パスに悩んでいた方にも、十分満足できる内容になっているはずです。

CodeCampでHTMLとCSSが学べるコースはこちらです。それぞれの詳細については、こちらのコース一覧ページにてご確認ください。

CodeCamp HTML/CSSが学べるコース
言語	プレミアムプラス	プレミアム	Webマスター	デザインマスター	Rubyマスター
HTML/CSS	○	○	○	○	○
JavaScript	○	○	○	○	○
Bootstrap	○	○		○
Swift	○	○
Android	○	○
PHP	○	○	○
MySQL	○	○	○		○
Ruby	○	○			○
Ruby on Rails	○	○			○
Java基礎	○	○
Java応用	○	○
Javaサーブレット	○	○
Photoshop	○	○		○
illustrator	○	○		○