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



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

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

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

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

HTML・CSSってなに?

HTMLとは

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

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

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

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

CSSとは

image よく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円

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

HTML5&CSS3レッスンブック
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円

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

Webサイトで学ぶ

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

ドットインストール

image

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

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

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

Codeprep

image

画像出典:Codeprep

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

CSS Diner

image

画像出典:CSS Diner

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

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

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

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

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

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

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

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

HTMLとCSSの基本概念

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

image

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

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

HTMLの基本文法

image

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

<html>
  <body>〜</body>
</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

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

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

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

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

*2018/12/11時点


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

転職・起業事例

img text

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

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

サンプルコード集

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

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

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

image 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

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp