お問い合わせ
ホームページ 販促ツール制作　岡山・全国対応
お問い合わせ

【初心者向け】HTMLとCSSとは？Web制作で学ぶ基本＃1

グレープフルーツ編集部
【初心者向け】HTMLとCSSとは？Web制作で学ぶ基本＃1

「Webサイトを自分で作ってみたいけど、何から始めればいいんだろう？」「HTMLやCSSという言葉は聞くけど、意味がよく分からない…」

Web制作学習の第一歩で、多くの方がこのように感じています。何を隠そう、たくさんのWebサイトに携わってきた私も最初はタグやコードの意味が全く分からず、ただの暗号にしか見えませんでした。（なにそれおいしいの？状態）

ですが、ご安心ください。
HTMLとCSSは、一度役割を理解してしまえば決して難しいものではありません。この記事では、Webサイト制作の最も基本的な要素であるHTMLとCSSについて、専門用語を極力使わず「家づくり」に例えながら、その役割と書き方を解説します。読み終える頃には、Webページがどのような仕組みでできているのかがスッキリ理解できているはずです。

目次

HTMLとCSSの役割とは？

Webサイトは、基本的にこのHTMLとCSSという2つの言語が組み合わさってできています。どちらか片方だけでは、私たちが普段見ているようなWebサイトは作れません。まずはそれぞれの役割を、家づくりに例えて見ていきましょう。

HTMLとCSSを家づくりに例えたイメージ

HTML：Webページの「骨格や構造」を作る言語

HTML（エイチティーエムエル）は、HyperText Markup Languageの略です。その役割は、Webページに表示されるテキストや画像などの要素に「これは見出し」「これは段落」「これは画像」といった意味付けを行い、ページの骨格（構造）を作ることです。

家づくりに例えるなら、HTMLは家の設計図であり、柱や壁、屋根といった骨組みそのものです。どこにドアを配置し、どこに窓を作るか、といった構造を定義します。
HTMLがなければ、Webページはただの文字の羅列になってしまい、どこが重要なのか、どのような構成のページなのか全く分かりません。

HTMLの記述例

WebページはHTMLファイルをブラウザが読み込んで表示します

ブラウザとはお使いのスマートフォンやパソコンの中にある「Google Chrome」「Safari」といったインターネットを閲覧するアプリケーションのことです。

ここからは実際のHTMLを見ていきましょう。

<h1>これは大見出しです</h1>
<p>これは段落の文章です。</p>

このコードをブラウザで読み込むと次のように表示されます。

このように、<h1>や<p>といった「タグ」でテキストを囲むことで、その部分が「大見出し」や「段落」であることをコンピュータに伝えています。
タグは<p>ここに内容</p>といったように、最初のタグ<>と最後の閉じタグ</>で囲む必要があります。（一部タグを除く）

CSS：Webページの「見た目やデザイン」を装飾する言語

CSS（シーエスエス）は、Cascading Style Sheetsの略です。その役割は、HTMLで作られた骨格に対して、色やサイズ、レイアウトといった見た目（デザイン）を整えることです。

家づくりに例えるなら、CSSは壁紙の色を決めたり、家具を配置したり、照明でおしゃれに演出したりといった、内装や外装のデザインに相当します。HTMLだけでは骨組みしかありませんが、CSSを加えることで、初めて人が「住みたい」と思えるような見た目が整った家（Webサイト）が完成するのです。

CSSの記述例

先ほど記述した<h1>にCSSを指定してみましょう。
CSSの記述は　h1 { ここにスタイルを書く } のように、タグ名を書いてから {} の中に適用したいスタイルを記述します。

h1 {
  color: blue; /* 文字色を青にする */
  font-size: 24px; /* 文字サイズを24pxにする */
}

h1が次のように装飾されます。

青くなりましたね。

このように、「どの部分（ここではh1タグ）を」「どのようにデザインするか」を指定します。HTMLとCSSは、それぞれが構造と見た目という異なる役割を担うことで、初めて機能的で美しいWebサイトを実現しています。

実践！HTMLとCSSを書いてみよう

理論が分かったところで、実際に簡単なコードを書いて、Webページがどのように表示されるのかを体験してみましょう。
まずはお試しなので、エディタなど特別なソフトは必要ありません。パソコンに最初から入っているメモ帳アプリで大丈夫です。

簡単なHTMLのコード

まずは、HTMLファイルを作成します。以下のコードをコピーして、メモ帳に貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>初めてのHTML、CSS</title>
</head>
<body>
  <!-- bodyタグの中に書く。ここから -->

  <h1>HTMLとCSSへようこそ！</h1>
  <p>これはHTMLで書かれた段落です。CSSでデザインを適用します。</p>

  <!-- ここまで -->
</body>
</html>

見たことがないタグが記述されていますよね。解説していきます。

htmlタグ

最初と最後の<!DOCTYPE html>と<html>タグは「このファイルはHTMLファイルである」と定義するタグです。必須なので必ず記述します。

lang属性

2行目の<html lang="ja">は、「このファイルで使用されている言語は日本語である」と定義するための属性表記です。
「lang」はlanguageの略、「ja」はjapaneseの略です。英語ページの場合は<html lang="en">と書きます。必須なので必ず記述します。

head

<head>タグは、Webページの「見えない設定」を書く場所です。
ページタイトル、説明文、文字コード、CSSやJavaScriptの読み込み、検索エンジンに表示される情報やSNS用の情報などを入れます。
必須なので必ず記述します。

meta charset

<meta charset="UTF-8">は、Webページで使う文字コードを「UTF-8」に指定するためのタグです。これを書くことで、日本語や記号が文字化けせずに正しく表示されます。HTMLを作るときは、ほぼ必ず入れておく基本の設定です。
<head>〜</head>内に記述します。

title

<title>タグはWebページのタイトルを指定するタグです。ブラウザのタブに表示されたり、検索結果に出るページ名として使われます。
ページの内容をわかりやすく伝えるために、とても大事なタグです。
<head>〜</head>内に記述します。

body

<body>タグは、Webページの「実際に見える部分」をまとめるタグです。文章、画像、リンク、ボタンなど、ユーザーが実際に画面で見る内容はすべて<body>の中に書きます。

これらはHTMLを構成する上で必須の、おまじないみたいなタグです。必ず記述するようにしましょう。

先ほどのコードを書いたメモ帳を「test.html」の名前で保存します。このとき、拡張子を「.html」となっているかを確認してください。
保存したtest.htmlをダブルクリックして開いてみましょう。

h1とpタグ読み込んだイメージ

画像のようにtest.htmlがページとして表示されたと思います。
これではちょっと寂しいので、CSSを使って装飾していきます。

CSSを追加していく

HTMLファイルのベースができたので、CSSを記述していきます。
CSSの書き方には、別ファイルを作成してHTMLに読み込む方法と、HTMLファイル内に直接記述する方法があります。今回は後者の「HTMLファイル内に記述する方法」を採用します。

先ほどのtest.htmlファイルをメモ帳でもう一度開き、<head>〜</head>内に<style>タグを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>初めてのHTML、CSS</title>
  <!-- styleタグの中にcssを書く -->
  <style>

  </style>
</head>

<body>
  <!-- bodyタグの中に書く。ここから -->

  <h1>HTMLとCSSへようこそ！</h1>
  <p>これはHTMLで書かれた段落です。CSSでデザインを適用します。</p>

  <!-- ここまで -->
</body>
</html>

<style>〜</style>内にCSSを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>初めてのHTML、CSS</title>
  <!-- styleタグの中にcssを書く -->
  <style>
    h1 {
      color: white; /*文字色を白色に*/
      background-color: green; /*背景色をグリーンに*/
    }
  </style>
</head>
<body>
  <!-- bodyタグの中に書く。ここから -->

  <h1>HTMLとCSSへようこそ！</h1>
  <p>これはHTMLで書かれた段落です。CSSでデザインを適用します。</p>

  <!-- ここまで -->
</body>
</html>

test.htmlを上書き保存し、ダブルクリックして開いてみましょう。

h1に緑色の背景がついたイメージ

背景色がついて、見出しと文章が見やすくなりました！
Webページは、このようにHTMLとCSSを組み合わせ、一連の手順を積み重ねて制作していきます。

実際のWebサイトは、HTMLとCSSだけでなく、JavaScriptやPHPなどのプログラムも組み合わせて作られていることがほとんどです。こうしてWebサイトが動き、画面に表示されユーザーが閲覧できるようになります。

HTML、CSSに関するよくある質問

HTMLやCSSを書くのに、特別なソフトは必要ですか？

いいえ、始めるだけならパソコンに標準でインストールされているメモ帳（Windows）やテキストエディット（Mac）で十分です。本格的に学習を進める場合は、「Visual Studio Code」や「Sublime Text」などのエディタを使うと、コードが書きやすくなり、間違いも見つけやすくなるのでおすすめです。

HTMLとCSS、どちらから勉強すれば良いですか？

HTMLから始めるか、同時進行がおすすめです。HTMLはWebページの構造を作る骨格です。骨格がないのにデザイン（CSS）を学ぶことはできません。まずはHTMLで基本的なページの構造を作れるようになってから、CSSでデザインを整える、という順番で学習するのが最も効率的です。

HTMLやCSSはプログラミング言語ですか？

厳密には少し違います。HTMLは文章の構造を定義する「マークアップ言語」、CSSは見た目を定義する「スタイルシート言語」と呼ばれます。計算や条件分岐といった複雑な処理はできません。そのため、一般的にプログラミング言語（JavaScriptやPythonなど）と比べて習得しやすいと言われています。

まとめ

今回は、Web制作の基本であるHTMLとCSSについて、その役割と関係性を解説しました。

  • HTMLは、見出しや段落といった意味を与え、Webページの骨格（構造）を作る。
  • CSSは、HTMLで作った骨格に色やレイアウトなどを指定し、見た目（デザイン）を整える。
  • この2つは、家づくりにおける「構造」と「内外装」のような関係で、セットで使われる。

Webサイト制作は、この2つの言語を理解することから始まります。この記事で試したサンプルコードの文字を書き換えたり、CSSの色の指定を変えてみたりして、Web制作の第一歩を踏み出してみましょう！

Web制作 ナレッジ

Written by

グレープフルーツ編集部のアバター グレープフルーツ編集部

グレープフルーツ編集部です。
ウェブ制作やマーケティングに関する最新情報、事例紹介、役立つノウハウをお届けしています。

Related posts

目次