HTML/CSSとは？基礎知識とオススメ学習サイト3選【完全初心者向け】

「Web制作始めてみたいけどHTMLとCSSってそもそも何？」、「どうやって学んだら良いか分からない」という初心者の方に、HTMLとCSSの基礎とオススメ学習サイト3選についてわかりやすく解説します！

本記事のテーマ

【完全初心者向け】HTMLとCSSの基礎知識とオススメ学習サイト3選

HTML&CSS

HTMLとは

HTML(エイチティーエムエル)とはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の頭文字をとったもので、「Webページを表示するときの土台となるコンピューター言語」です。
Webページに表示したい文章や画像を「<」と「>」で挟んだ「タグ」と呼ばれる文字列で囲み、目印を付けて書いていきます。
タグで文章を囲むことで、「ここは見出しですよ」、「ここは画像ですよ」というようにどういう意味があるのか、コンピュータに伝えることが出来ます。
このタグで囲んで目印をつけることをマークアップと呼ぶことから、HTMLはマークアップ言語と呼ばれます。

HTMLとは「Webページを表示するときの土台となるコンピューター言語」

CSSとは

CSSとはCascading Style Sheets(カスケーディングスタイルシート)の頭文字をとったもので、「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」です。
先程のHTMLが文章の構造を担当するのに対して、CSSは「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」のため、HTMLとセットで使われます。
CSSがあることにより、「見出しは青色にしよう」、「この画像同士を横に3つ並べて表示しよう」というように、Webサイトを自分の思うようなデザインにすることが出来ます。
このWebサイトを自分の思うようなデザインにすることが、CSSの面白いところであり、また、CSSの難しいところでもあります。

CSSとは「Webページにデザインを施し、どのようにブラウザに表示するか指定する言語」

HTML&CSSまとめ

HTML：文章や構造を作る
CSS　：HTMLで作成したものをデザインする

HTML&CSSはそれぞれ、文章や構造を作るHTML、それをデザインするCSSと覚えましょう。

オススメ学習サイト3選

progate

まずは初心者学習サイトの王道、progate。
ここから入っていった人も多いのでは無いでしょうか。
自分も多分に漏れず、このprogateからスタートしました。
図解スライドが非常に分かりやすく、そのあと実際にブラウザ上でコードを書いて試せるところがGood！
環境構築も要らないので、その点も初心者の方にはオススメです！
スマートフォン用のアプリもあるので、どこでも学習が出来るのは嬉しいですね。

Progate(プロゲート) | Learn to code, learn to be creative.

ドットインストール

動画での初心者学習サイトの王道、ドットインストール。
こちらは主に動画で観ながら学べるサイトです。
1回の動画が3分程で観終わるので、隙間時間の学習にももってこい！
progateのように、ブラウザ上での環境でコードを書ける訳では無いのですが、自分のPCで環境構築をするところから始められるので、その練習にもピッタリですね。
あわせて読みたい

ドットインストール

paizaラーニング

最後はpaizaラーニング。
こちらは動画で学べつつ、実際にコードもブラウザ上で書けるサービスです。
HTMLとCSSでは無いですが、ゲームをしながらプログラミングを学べるコンテンツがあったりと、楽しくプログラミングを学べるサービスだと思います！

環境構築不要！初心者でも楽しく学習できるプログラミング入門サービス【paizaラーニング】

最後に

ここまで、HTMLとCSSの基礎についてとオススメ学習サイトを説明してきました。
HTMLとCSSは書いているものが画面上に反映されるので、自分がコードを書いたことへの実感が得やすいと思います。
ここの書いてすぐに反映されることが結構モチベーションにも繋がり、楽しい部分でもあるので、これを機に実際にコードを書いてWeb制作の1歩目を踏み出しましょう！