HTMLとCSSは、Webサイトを作成するために開発されたプログラミング言語です。それぞれの書き方や関係性を知ることが、Webサイト作成の学習における第一歩といえるでしょう。作り方の基礎や大まかな流れ、おすすめの学習方法を紹介します。

HTMLとCSSを基礎から学ぼう

HTMLとCSSとはどのような言語なのかを解説します。両者の違いも確認しておきましょう。

HTMLはWebページを作成するマークアップ言語

HTMLは、インターネット上のWebページを作成するために開発されたプログラミング言語です。ほとんどのWebページにおける基本的な骨組みは、HTML言語で構築されています。

HTMLのことを、Webページを作成するためのマークアップ言語という場合もあります。マークアップ言語とは、一般的に特定の記法により情報を埋め込むことで構造や見栄えを記述する言語を指します。

マークアップすることにより、見出し・リンク・リストなどの要素が構造化され、実際のブラウザ上でも見やすい形で表示されます。

HTMLが『HyperText Markup Language』の略であることからも、マークアップ言語として認識されていることが分かるでしょう。

CSSはWebページのスタイルを指定する言語

CSSは『Cascading Style Sheets』の略であり、Webページのスタイルを指定するプログラミング言語です。

スタイルの種類には、色・サイズ・レイアウトなどの表示スタイル、印刷などの出力スタイル、音声読み上げなどの再生スタイルなどがあります。

HTMLにも、Webページにさまざまな装飾を施せる技法が存在しますが、Webページの装飾はできる限りCSSで施すことが推奨されています。

CSSのことをスタイルシートという場合もありますが、厳密にはスタイルシートの1種がCSSです。スタイルシートとは、スタイルを指定する技術全般のことを指します。

HTMLとCSSは何が違う？

HTMLは、Webページに表示させたい文章をタグで囲むことにより意味を持たせる、構造面での役割を担っています。一方、CSSはデザインを担当する言語です。

CSSが無かった時代には、Webページの構造とデザインを、全てHTMLでまかなっていました。しかし、ソースコードが長くなりすぎるため、編集などの管理に手間がかかっていました。

そこで開発されたのがCSSです。構造とデザインの担当言語を分けたことで、修正などがしやすくなったほか、デザインのパターンも大幅に増えています。

フロントエンド(HTML・CSS・JavaScript)入門5日－株式会社ジョブサポート

HTMLとCSSを作成する手順

WebページをHTMLとCSSで作成する手順を理解しましょう。プロジェクトにより若干の違いはあるものの、大まかな流れは以下のようになります。

ステップ1 ：ファイル・開発環境の用意

まずは、Webサイトを構築する開発環境を整えます。基本的には、トップページとなるindex.html、その他のページ、画像を格納するimagesフォルダ、スタイルシートを格納するCSSフォルダなどが必要です。これらを全て、一つのフォルダにまとめます。

index.htmlやその他のページは、最初にHTMLで書いていくのが基本です。トップページを含む全てのページは、拡張子を.htmlに設定します。

各ページを作る際は、ページごとのレイアウトやそれぞれの紐付け、階層などを考えておけば、後の作業がスムーズに進められるでしょう。メモに書き出して視覚化するのがおすすめです。

ステップ2 ：HTMLファイル作成

Webサイト全体の構成が決まったら、個別ページをHTMLで書いていきます。HTMLファイルは、全体をhtmlタグで囲み、上部にheadタグ、下部にbodyタグを配置するのが基本形です。

headタグの中には、Webページのタイトルや紹介文など、どのようなページなのかを示す要素をコードとして盛り込みます。

一方、Webページで伝えたいコンテンツを書き込む場所がbodyタグです。基本的には、pタグやtableタグなどで大枠を作り、その中に細かいタグを入れ込んでいきます。

ステップ3 ：HTMLファイルにCSSを適用

HTMLファイルにおける骨組みが仕上がったら、CSSで装飾を施します。CSSはHTMLファイルで直接指定することも可能ですが、別にCSSファイルを作成し、その中で細かくスタイルを書くのが一般的です。

ファイルをHTMLとCSSで分けることで、構造とデザインのそれぞれを編集する際に、作業しやすくなります。

通常、CSSファイルは、main.cssやstyle.cssというファイル名を付け、CSSフォルダに格納しておきます。格納後は、HTMLファイルにCSSがしっかりと適用しているかどうか、確認する作業を実施することが重要です。

ステップ4 ：レスポンシブに対応する

近年、Webページはスマホやタブレットなどの端末で閲覧される機会が増えています。HTMLやCSSのファイルをPCで作成・確認した後は、他の端末でもきちんと閲覧できるかをチェックすることが大事です。

WebページをPCとスマホなどの端末の両方に対応させることを、レスポンシブ対応といいます。PCのブラウザでしっかりと閲覧できるWebページも、スマホなどで見るとレイアウトが崩れていることは少なくありません。

レスポンシブ対応はデザイン面でのコーディングが主になるため、基本的にはCSSを修正しながら作業することになるでしょう。

オンライン・リモート講座(入門5日・基礎10日)－株式会社ジョブサポート

HTML/CSSの効率的な学習方法

Processed with VSCO with 5 preset[/caption] HTMLとCSSは、オンライン学習サイトや書籍で学ぶのが効率的です。それぞれのおすすめと併せて解説します。

オンライン学習サイトで学ぶ

ネット上には、HTMLとCSSを勉強できる、数多くのサイトが存在します。タグを中心に解説しているものなど、コンテンツの内容もサイトによってさまざまです。

オンラインサイトで効率的に学習するには、基礎から体系立てて解説されているサイトを選びましょう。開発環境や準備することから学習できれば、スムーズに学びを進めていけます。

学んだことを実際にアウトプットできるサイトなら、学習内容が定着しやすくなるでしょう。PCだけでなく、スマホアプリでも優秀な学習ツールが多数開発されています。

おすすめの学習サイト

初心者でも動画で分かりやすく学習できるサイトが『ドットインストール』です。3分動画で学んだことを、実際に書いて試せます。

体系立てられたコースが用意されているため、プログラミング初学者でも理解を深めやすいでしょう。有料会員になれば、テキストで学習することも可能です。

• ドットインストール - 3分動画でマスターできるプログラミング学習サービス

人気を集めているおすすめ学習サイトとしては、『Progate』も挙げられます。アウトプットすることを重視して作られているため、達成感を感じながら学習を続けられるでしょう。勉強を進めながら、アカウントのレベルを上げていくことでも楽しめます。

• Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

書籍から学ぶ

HTMLとCSSを効率よく学習する方法として、書籍から学ぶのもおすすめです。さまざまな書籍が販売されている中には、体系立てて解説されたものも数多く存在します。

書籍を選ぶ際は、出版された年に注意しましょう。プログラミングには流行り廃りがあるため、あまりにも古い本では、掲載されている情報が役に立たない可能性もあります。

書籍を探す際は、サンプルコードが数多く紹介されているものを選ぶのがポイントです。実際に手を動かしてコードを書くことで、より知識が身に付きやすくなるでしょう。

おすすめの書籍

『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』は、知識がなくても体系的にHTMLとCSSの基本を学べる入門書です。レスポンシブ対応など、最新の技術にも対応しています。

• 商品名：1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
• Amazon：商品ページ

『よくわかるHTML5+CSS3の教科書【第3版】』は、HTML5とCSS3の基礎をしっかりと固められる定番書籍です。これから学習したい人だけでなく、知識をおさらいしたい人にも向いています。

• 商品名：よくわかるHTML5+CSS3の教科書【第3版】
• Amazon：商品ページ

思い通りのWebサイト設計をしよう

HTMLとCSSへの理解が深まれば、イメージ通りのWebサイトを設計できるようになるでしょう。それぞれの役割を知り、適切な使い分けができるようになることが大事です。

効率的に学習を進めていく方法としては、オンラインサイトや書籍の活用がおすすめです。学びを継続できる方法を選択し、基礎からしっかりと身に付けていきましょう。