カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

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

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

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【初心者向け】HTMLとCSSの具体的な違いから学習方法・使い方まとめ

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

太田 ヨウタ
太田 ヨウタ
公開日:2019.12.09
更新日:2020.02.19
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はスクリプト言語(プログラミング言語)となります。

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

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

それぞれを家で表すと、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から学習してみてはいかがでしょうか。

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
太田 ヨウタ
太田 ヨウタ

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

関連記事

  • Web・プログラミング

    初心者必見!Pythonの詳しい導入手順を徹底解説【Windows・Mac別】

    2020.10.19
  • Web・プログラミング

    Rubyで開発?Ruby開発に向いているもの&開発に必要なことまで解説

    2020.09.26
  • 【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!
    Web・プログラミング

    【2020年版】Ruby on Railsの習得度別おすすめ学習本10選!

    2020.09.25
  • 【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!
    Web・プログラミング

    【初心者向け】Ruby on Railsの開発環境の基礎からおすすめ統合開発環境6選!

    2020.09.11
kredo it 英語 留学

よく読まれている記事

  • 2020.12.03

    【1/6&1/7 無料オンラインセミナー】なぜ今、プログラミング × 英語を身につけるべきなのか?

  • Kredo CEO横田猛夫さん
    2019.06.26

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

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

  • ショッピングを楽しんでいる男女のイメージ画像
    2019.02.12

    海外就職を成功させたい人へ!経験者が教えるメリットとデメリット

  • 熱心にプログラミングを教えるフィリピン人講師と日本人留学生

    【日本語で学んでいる場合じゃない】“英語”でIT・プログラミングを学ぶメリットとは?

IT留学オンライン
kredo 留学

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.