カテゴリー

  • プログラミング
  • 英語学習
  • 海外
  • キャリア
  • Kredo
Kredoオンラインキャンプ
スタッフ募集中
Kredoオンラインキャンプ体験談
無料カウンセリングはこちら

セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」

  • プログラミング
    • Web・プログラミング(学習)

    • Web・プログラミング(知識)

    • AI・テクノロジー

    • デザイン

  • 英語学習
    • 英語学習法

    • 英語フレーズ

  • 海外
    • 海外移住

    • 海外留学

    • 海外就職

  • キャリア
    • 転職情報

    • キャリアデザイン

  • Kredo
    • ニュース・キャンペーン情報

    • セブ島情報

    • インタビュー

  • 無料ウェビナーに予約する >
5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • プログラミング
  • Web・プログラミング(学習)
  • HTMLとCSSの具体的な違いから学習方法・使い方まとめ【初心者向け】

HTMLとCSSの具体的な違いから学習方法・使い方まとめ【初心者向け】

Avatar photo
太田 ヨウタ
公開日:2023.01.01
更新日:2023.01.20
Web・プログラミング(学習) |
  • ツイート
  • シェア
  • はてな
  • ポケット
【初心者向け】HTMLとCSSの具体的な違いから学習方法・使い方まとめ
少女

HTMLとCSSは何が違うの?

少年

HTMLやCSSの学習方法が知りたい

このような疑問、要望を持つあなたに向けた記事です。

HTMLとCSSはそれぞれ別物であり、明確な役割の違いがあります。この記事では、それぞれの役割や構文の違い、学習方法を解説します。

これからWeb制作をしてみたい、HTMLやCSSについて学習したい、と考えるあなた向けの記事ですので、ぜひご覧ください。

記事のもくじ

  • HTMLとCSSは役割に違いがある
    • HTMLはWebページの根幹、骨組み
    • CSSはWebページの見た目を調整
  • HTMLとCSSは構文に違いがある
    • HTMLはタグで囲むように記載する
    • CSSはプロパティと値を指定する
    • HTMLと違いCSSは分離できる
  • HTMLやCSSとも違うPHP、JavaScriptとの関係性は?
  • HTMLやCSSを書くための方法
  • HTMLやCSSを勉強する方法
  • まとめ:HTMLとCSSは役割は違うが一緒に利用される

HTMLとCSSは役割に違いがある

HTMLとCSSの違いは、大きく「役割」と「構文」にあります。ここでは、それぞれの役割の違いについて見ていきましょう。

HTMLはWebページの根幹、骨組み

HTMLはHyperText Markup Languageの略称であり、Webページを表示するためのマークアップ言語です。

HTMLはWebページをどのように見せるのかの骨組み部分に該当します。

具体的には、次の要素を指定します。

HTMLで記述する要素の例
  1. タイトル名
  2. Webページのレイアウト
  3. 見出し
  4. 画像の指定
  5. リンクの指定

など

Webページとして必要な基本要素をHTMLで記述することにより、私たちが普段見ているWebページのような形になるのです。

厳密には、CSSで見た目を調整するのですが、CSSについては次で解説します。

CSSはWebページの見た目を調整

CSSは、Cascading Style Sheetsの略称であり、Webページの見た目を調整するためのマークアップ言語です。

HTMLで作成した骨組みに肉付けするようなイメージでよいでしょう。

具体的には、次の要素を指定します。

CSSで記述する要素の例
  1. Webページのレイアウト
  2. 本文の文字色
  3. 見出しの文字色
  4. 背景色
  5. さまざまなメニューの作成

など

HTMLだけでもWebページのレイアウトや文字色・背景色を変更することは可能です。

しかし、HTMLで装飾部分を記述すると汎用性がなくなり、デザインの管理が煩雑となります。

その結果、メンテナンス性が損なわれてしまうのです。

CSSはHTMLで記述した要素に対して装飾を施すため、装飾部分をCSSにまとめることで非常に管理しやすくなります。

そのため、HTMLでWebページの骨組みを作り、CSSで装飾を施すという流れがWebページ制作の一般的な流れです。

HTMLとCSSは構文に違いがある

HTMLとCSSには役割に違いがありましたが、同じマークアップ言語でも構文は全く違います。
それぞれの構文の違いについて見ていきましょう。

HTMLはタグで囲むように記載する

HTMLはタグと呼ばれる要素で囲むことによって記述します。HTMLの使用例を見てみましょう。

HTMLの例
<HTML>
<HEAD>
<TITLE>web page title name</TITLE>
</HEAD>
<BODY>
本文
<h2>見出し</h2>
見出し本文
<h3>小見出し</h3>
小見出し本文
</BODY>
</HTML>

例にある「<TITLE>~</TITLE>」のようなものがタグです。

タグにはそれぞれ意味があり、「<TITLE>~</TITLE>」で囲まれた部分はページのタイトルを表す、などのように意味づけられています。

私たちが普段見ているWebページは、HTMLのタグで指定された意味をブラウザによって読み取り、表示した結果なのです。

CSSはプロパティと値を指定する

CSSはHTMLと違いタグを使用しません。 「プロパティと値」の指定により、HTMLタグに対して装飾を行います。

CSSの使用例を見てみましょう。

CSSの例
h2 {
    color: #ff4081;
    background-color: #a9a9a9;
}

a:hover {
    color: #ff7043;
    font-size: 12px;
}

HTMLタグのように「<>」で囲むことはせず、HTMLタグの要素に対して、色や文字サイズといった「プロパティ」を指定し、プロパティに対する「値」を入力します。

上記の例は、具体的には次の意味を持ちます。

  • H2タグの文字色を#ff4081とし、背景色を#a9a9a9とする
  • リンクにマウスオーバーした際の文字色を#ff7043とし、文字サイズを12pxとする

HTMLとCSSは、構文も全く異なることを覚えておきましょう。 補足ですが、「#xxxxxx」という表記は、16進数で表されたカラーコードであり、Webページでは一般的な色の指定方法です。

HTMLと違いCSSは分離できる

HTMLは1つのHTMLファイル内にすべてを記述しますが、CSSをHTMLに適用する方法は2つあります。

  • HTMLファイル内に記述する
  • CSSファイルとして分離する

CSSはHTMLに直接記述することもできますが、CSSファイルとして分離しておき、HTMLでCSSファイルを呼び出すことが一般的です。

HTMLとCSSを分離することで、メンテナンス性が向上し、デザイン変更時も修正箇所が少なくて済むからです。
HTMLのファイルは「.html」であり、CSSのファイルは「.css」となります。

HTMLでCSSファイルを呼び出す際には、「<link rel=”stylesheet” href=”CSSファイル名”>」で呼び出して使用します。

HTMLとCSSは役割も構文も異なるものであるため、それぞれ別ファイルとして利用するようにしましょう。

HTMLやCSSとも違うPHP、JavaScriptとの関係性は?

HTMLやCSSについて調べていると、PHPやJavaScriptなども登場することが多く、それぞれの違いがわからない、という方も多いのではないでしょうか。

HTMLやCSSについては先ほどお話したとおりですが、PHPとJavaScriptとの違いについても解説します。

PHPとJavaScriptは、HTMLやCSSと同じくWebページ制作においては頻繁に利用される言語です。

HTMLやCSSはマークアップ言語ですが、PHPとJavaScriptはスクリプト言語(プログラミング言語)となります。

それぞれの違いについて、簡単にまとめました。

言語 役割 できること
HTML Webページの骨組み Webページの見た目を作る
CSS Webページの装飾 Webページの見た目を調整する
JavaScript Webページに動きをつける 検索機能や画像のスライドショーなど
PHP Webページからのデータを処理する ログイン機能やオンラインショッピング機能など

それぞれを家で表すと、HTMLは家の骨組み・壁・屋根であり、CSSは家の外観や内装・家具といえるでしょう。

JavaScriptは家の中にエレベーターや自動ドアを、PHPは鍵付きの玄関や来客用のシステムを搭載するようなものと考えられます。

WebページはHTMLやCSSだけでも作ることができますが、JavaScriptやPHPを組み合わせることで、さらに高度なWebページが作成できるのです。

特にPHPはサーバーサイド言語と呼ばれ、サーバー側で動作するデータベースなどとの連携ができます。 PHPを利用することで、より幅広い機能をWebページに搭載すること可能です。

HTMLやCSSを書くための方法

HTMLやCSSは、OSに付属のテキストエディタでも書くことができます。 Windowsの「メモ帳」を使ってHTMLやCSSを書いてみましょう。

次の内容をコピー&ペーストして、指定のファイル名として保存してください。

index.html
<html>
<head>
<title>Webページのタイトル</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h2>見出し</h2>
見出しの本文
<h3>小見出し</h3>
<a href="https://www.yahoo.co.jp/">Yahoo!Japanを表示する</a>
</body>
</html>
main.css
h2 {
    color: #ff4081;
    background-color: #a9a9a9;
}

h3 {
    color: #ff4500;
    background-color: #b0c4de;
}

a:hover {
    color: #ff7043;
    font-size: 20px;
}

保存した「index.html」をダブルクリックすると、ブラウザでWebページが表示されます。 非常に簡潔な内容ですが、このようにHTMLやCSSは簡単に記述することが可能なのです。

それぞれの内容を実際に修正して、あなたなりにいろいろと試してみましょう。これらの内容をさらに高度化することによって、普段私たちが見ているWebページは作られています。

HTMLやCSSを勉強する方法

HTMLやCSSはテキストエディタさえあれば作成可能です。

しかし、それぞれには決められたタグやプロパティの使い方があり、高度なWebデザインを実現させるためには、勉強する必要があります。

HTMLやCSSを勉強するためには、書籍やオンライン講座を利用するとよいでしょう。初心者向けの書籍は多く出版されており、自分のペースで学習をすすめることができます。

オンライン講座の中には、無料で受講できるものも多く、時間や場所を選ばずに学習できる点がメリットです。オンライン講座としては、Progateやドットインストールをおすすめします。

しかし、これからのWeb制作においてはHTMLやCSSのスキルだけでは足りません。

JavaScriptやPHPもあわせて身につけるべきですが、JavaScriptやPHPは習得が難しく、独学では挫折してしまう人も少なくありません。

独学の場合は不明点の解決に時間がかかったり、モチベーションが維持できなかったりして挫折につながることが多いものです。

Web制作を仕事にしたいと考えているのであれば、スクールに通うことも一つの手です。

スクールでは、専門の講師によって体系的に学習をすすめることができ、同じ志を持つ仲間がいるため、挫折することなく目標とするスキルの習得が達成しやすいという特徴があります。

また、Web制作と一言でいっても、フロントエンド側とバックエンド側のどちらに携わりたいかによって、JavaScriptとPHPのどちらに重きをおくかも変わってきます。

Kredoでは、あなたのスキルや目的に合わせて選択できるように、複数のコースを用意しています。

Webベーシック・Webデザイン・Webデベロップなどのコースがあり、あなたの習得したいスキルとあわせて英語の習得まで可能です。

これからWebエンジニア、Webデザイナーとして活躍したいと考えている方は、一度ご確認いただいてはいかがでしょうか。

まとめ:HTMLとCSSは役割は違うが一緒に利用される

HTMLとCSSは、役割や構文に明確な違いがあります。 どちらもWebページを構成するためのマークアップ言語ですが、別物であることを覚えておいてください。

しかし、HTMLとCSSは一緒に利用することが一般的であり、どちらか片方だけの知識だけでは、あなたが理想とするWebページを作ることは難しいでしょう。

あわせて、JavaScriptやPHPについての知識やスキルを身につけることで、さまざまなWebページが作成できるようになります。

Webの世界は日進月歩であり、常に変化し続けていますが、Webページ作成の基礎として、まずはHTMLとCSSから学習してみてはいかがでしょうか。

英語でプログラミングが学べるKredoオンラインキャンプ

プログラミング×英語を身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoでは、プログラミング×英語が学べるオンラインスクール「Kredoオンラインキャンプ」を運営中です。プログラミング×英語を身につけた当校の卒業生はグローバルIT企業、外資系企業、海外就職、フリーランスへのキャリアチェンジを実現しています。これからの時代に必要な「英語×IT」のスキルを身につけてグローバルに活躍しませんか?

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Avatar photo
太田 ヨウタ

IT関連企業にてインフラエンジニア(SE)として官公庁や銀行などのシステム更改をメインに約10年従事。基本情報技術者・ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。

関連記事

  •  decoding
    Web・プログラミング(学習)

    プログラミングを無料で学習できるアプリ7選【初心者必見】

  •  decoding
    Web・プログラミング(学習)

    Pythonを学べるプログラミングスクール7選

  •  decoding
    Web・プログラミング(学習)

    htmlの独学勉強は難しい?おすすめ勉強方法と使えるサイト・本10選

  •  decoding
    Web・プログラミング(学習)

    Pythonをオンラインで学習できるサービス5選

よく読まれている記事

  •  decoding

    おすすめ記事

  •  decoding
    2022.12.04

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  •  decoding

    【メディア掲載】Kredoオンラインキャンプを紹介していただいた生徒様、企業様の紹介

  •  decoding

    卒業生インタビュー

IT留学オンライン
新規CTA
無料カウンセリング予約
@KREDO JAPAN Inc. 2023 All rights reserved.
Kredo オンラインキャンプ なぜ、プログラミング×英語なのか 英語が苦手な方へ 体験談 Webデザインコース Webデベロップコース インターン型実践プログラム IT英語コース カウンセリング予約 資料請求
Kredo ラーニング サービスサイト (準備中) KredoIT 留学 (現在Kredoオンラインキャンプに変更) 運営メディア Kredo Blog
運営会社 会社概要 採用情報 利用規約 プライバシーポリシー 特定商取引に基づく表示 お問い合わせ