初心者必見！HTML/CSSの基礎知識と学習方法を解説

Web制作をするにあたり、不可欠な知識はHTMLとCSSです。HTMLはWebページの構造や文字を作り、CSSはレイアウトを作ります。ブラウザ上でWebページを表示させるためにHTMLが必要ですし、見やすいページにするために CSSが必要です。

HTML/CSSはWeb制作の学習をやるのであれば最初にやることがおすすすめの言語です。HTML/CSSは初心者でも簡単に習得でき、ブラウザとテキストエディタがあれば誰でもすぐに実践できます。

本記事ではHTML/CSSの基礎知識と学習方法について解説します。まだ、これからHTML/CSSの学習を始めようと思う人は参考にして下さい。

HTML/CSSの基礎知識

HTMLとは

HTMLはHyperText Markup Languadgeの略で、Webページ上のテキストや構造、リンクを作るための言語です。HTMLはプログラミング言語ではなく、マークアップ言語と呼ばれます。

ハイパーテキストとは複数の文書を関連付け、結び付ける仕組みをいいます。簡単に言えば、リンクを持ったテキストです。そして、ハイパーテキストに目印をつける（マークアップする）言語がHTMLということです。

マークアップはタグを使って、「ここが見出しです」「ここが画像です」とテキストの中身に目印をつけることです。

CSSとは

CSSはCascading Style Sheetの略で、Webページのスタイルを指定する言語です。文書ソフトやHTMLで作成される文書にスタイルを指定する技術がstyle sheetです。簡単に言えば、HTMLで書かれた文書の見た目を整えるのがCSSです。

元々、Webページの見た目もHTMLで作られており、HTMLだけでレイアウトを整えることは現在でも可能です。しかし、HTMLの文書構造が複雑になるため、コンピュータに理解されない可能性もあります。また、コードも長くなります。

そのため、文書の構造とレイアウトを作るための言語を分けます。シンプルで、コンピュータが理解しやすいWebページになるため、コンピュータへの負担も少なくなったり、検索エンジンにかかりやすくなります。

HTMLの書き方

HTMLを記述する場所

HTMLはテキストエディタ上でに書きます。そして、拡張子を「.html」にすればHTMLファイルができます。HTMLファイルをあなたの使っているブラウザ上で開けば、ブラウザ上でページが表示されます。

また、インターネット上に公開しようと思えば、サーバ上にアップロードすれば、Webページとして公開されます。

HTMLの基礎的な書き方

HTMLはタグという目印で文章を挟むことで、役割を持った文章としてブラウザ上で表示されます。例えば、見出しをHTMLで書くと以下のようになります。

<h1>HELLO WORLD</h1>

<h1>がタグです。上の例では見出しを作ったため、見出しを表す<h1>を使用しました。文章の後ろについている</h1>は見出しの終了を表しています。/がないタグを開始タグ、/があるタグを終了タグと言います。

文章は開始タグと終了タグで一対となります。また、中には終了タグのないものもあるので注意してください。

タグの一部を下の表にまとめています。他にもたくさんあるので都度調べてみましょう

CSSの書き方

CSSを記述する場所

CSSを記述する場所は大きく分けて二つあります。1つはHTMLファイルのHEADタグの中に記述する方法です。HEADタグの中にSTYLEタグを作成し、STYLEタグの中にCSSのコードを書いていきます。

もう一つは外部ファイルとしてCSSファイルを作る方法です。テキストエディタでCSSのコードを書き、拡張子を「.css」とします。作成したCSSファイルはHEADタグの中に下記のコードを書くことで読み込むことができます。

<link rel="stylesheet" href="ファイル名.css">

どちらの方が良いかはコードの長さが1つの指標となります。コードが短い場合はHTMLファイルに記述したほうが、ファイルが1つだけになるので、管理しやすくなります。コードが長い場合は HTMLファイルが長くなり、コードが見にくくなり、ファイルサイズも重くなります。

明確にどれくらいの長さはありませんが、自分がHTMLファイルを見たときにCSSファイルが邪魔になっていないかを基準にするといいと思います。

HTMLの基礎的な書き方

CSSの基本的は以下の通りです。

セレクタ {
  プロパティ: 値;
}

セレクタとはCSSを反映させたいタグやid名、class名のことです。プロパティはスタイルの種類です。例えば、文字色であればcolor、文字サイズであればfont-size、余白を設定するならmarginまたはpaddingというプロパティを使います。プロパティの一部を以下の表にまとめています。

値はプロパティをどうしたいかを示します。例えば、font-sizeに32pxと設定すれば、指定したセレクタのフォントサイズが32pxになります。

HTML/CSSの基礎を学習する方法

Progate

初心者がHTML/CSSを勉強するのにおすすめなのがProgateです。Progateはオンラインでプログラミングを学べるサービスです。ブラウザ上でコードを書きながら、学習できるため、PCに疎い人でも簡単にプログラミングを学べます。

わかりやすいスライドとすぐに練習できる環境で確実に理解を深めてくれます。また、レッスンを通じて一つのWebサイトを作るため制作の流れも分かります。

無料プランと有料プランがあり、有料プランは1080円/月で利用できます。HTML/CSSをしっかり身に着けたいのであれば、有料プランをおすすめします。HTML/CSSだけであれば1ヶ月で十分学習できるので、本一冊買ったつもりで有料プランにするのがいいと思います。

ドットインストール

ドットインストールもProgateと同じくオンラインでプログラミングを学べるサービスです。3分ほどの短い動画でプログラミングを学べるため、本などの文章では理解できない人にはおすすめです。

ドットインストールはProgateとは違い、ローカル環境でコードを書いて、動かしていきます。そのため、PCの基本的な知識に自信がない方だと環境構築で挫折する可能性もあります。しかし、環境構築も解説しているため、ネット検索と合わせれば難しくはありません。

ドットインストールにも有料プランがあり、1080円/月で利用できます。Progateでは不十分な部分もあるので、終わった後にドットインストールを利用することをおすすめします。

入門書

HTML/CSSの入門書はたくさん出版されており、実際のサイトを構築しながら学習していくものもあります。Progateやドットインストールの有料プランに比べれば高額になります。Progate、ドットインストールよりも深い知識が学べます。

おすすめの方法としてはProgateで基礎を学び、本を読むことに慣れていない人はドットインストールで学習し、本を読むことが苦でない人は入門書で学習することです。あとは、自分でサイトを作りながら、学習していくのが上達への近道だと思います。

おすすめの入門書は以下の記事にまとめていますので、参考にしてください。

まとめ

HTML/CSSはWebページを表示させる上でほぼ必ず必要となります。そのため、Web制作を学習する上では必ず通る道となります。また、アプリ開発でもHTML/CSSが必要にならないことはありません。

インターネットが世の中に普及している昨今、HTML/CSSは需要の高いスキルだと思います。また、Web制作やWebアプリ開発で必要となる、JavaScript、PHP、RubyでもHTML/CSSの知識は必要になるので、HTML/CSSの基礎はしっかり理解することをおすすめします。