電話受付中 平日10:00~19:00 03-5919-0055

日本最大級のホームページ制作会社検索サイト

お急ぎの方はお電話で !( 平日10:00〜19:00 )

03-5919-0055

無料でWeb発注相談 ! 24時間受付中 !

メールで相談する

HTMLとCSSについて徹底解説!それぞれの違いや書き方についてくわしく紹介

川島 佑太

Written by

川島 佑太

HTMLとCSSについて徹底解説!それぞれの違いや書き方についてくわしく紹介

「HTMLとCSSってどんな違いがあるの?」
「HTMLやCSSでどんなことができるの?」

HTMLとCSSを理解すればWebサイトを作成できます。しかし、それぞれの違いや書き方は知らない人も多いのではないでしょうか。そこで本記事では以下について解説していきます。

  • HTMLとCSSの違い
  • HTMLとCSSの書き方
  • HTMLとCSSを使ってWebページを作成する流れ

    本記事を参考にそれぞれの言語の特徴を理解し、Webサイト制作にお役立てください。

    HTMLとCSSの違い

    HTMLとCSSはどちらもWebページを作成するための言語です。しかし、それぞれ役割が異なります。

    言語 役割
    HTML Webサイトの構成
    CSS Webサイトの装飾

    HTMLはWebサイトの骨組みを構成する言語です。タイトルや見出しなど、文章の構成を示す役割があります。一方CSSの役割はHTMLに装飾を施すことです。文字のサイズや位置を整えることで、ユーザーにとって見やすいWebサイトになります。

    それぞれの言語について以下でくわしく解説していきます。

    HTMLとは

    HTMLとは「Hyper Text Markup Language」の略です。主に見出しや段落など、Webページ上の文章の構成を示す役割があります。また他のWebページに移動するためのリンクも記載可能です。

    時代とともにバージョンが更新されており、現時点で最新のバージョンは「HTML Living Standard」です。WHATWGという組織によって策定されたバージョンで、2021年に発表されました。

    HTMLの書き方

    HTMLはテキストエディタというツールで作成します。テキストエディタはWindowsの「メモ帳」やMacの「テキストエディット」など、コードを書くためのツールです。他にもコードの入力補完やテキストの同時編集など、便利な機能を搭載したさまざまなツールがあります。

    HTMLは意味の違うタグを使い分けて、Webページ上の文章に意味を持たせられます。たとえばタイトルを作りたい場合は、titleタグで文章を挟むことでコンピューターにその文章がタイトルであることを伝えられます。

    <title>HTMLとは</title>

    HTMLを記述する際は、htmlタグで全体を囲みその中にheadタグとbodyタグを記述します。headタグはコンピューターに向けた情報を伝えるもので、記述した内容はWebページ内に表示されません。そのため、Webサイトの内容として表示したい見出しや本文、画像などはbodyタグに記述しましょう。その後、以下のように「入れ子構造」でHTMLファイルを作成していきます。

    <html>
    <head>
    <title>HTMLとは</title>
    </head>
    <body>
    <h2>HTMLについて解説していきます</h2>
    <div class=”main”>
    <img src=”image/sample.com” alt=”サンプル画像”>
    <p>HTMLはWebサイトを作るためのマークアップ言語です。</p>
    </div>
    </body>
    </html>

    HTMLタグの種類

    HTMLタグの主な種類は以下のとおりです。

    タグ 意味
    !DOCTYPE html HTML文書を示す宣言
    html HTMLコード
    head Webページの情報
    body Webに表示させる情報
    header Webのヘッダー部分
    footer Webのフッター部分
    p 段落
    h1~h6 見出し
    img 画像
    a ハイパーリンク

    CSSとは

    CSSは「Cascading Style Sheets」の略です。文章の位置や色、サイズの変更などWebページの装飾を行う役割があります。また、クリックされた文字の色を変えるなど、軽微な動きを取り入れることも可能です。

    現時点で最新のバージョンは「CSS3」です。過去のバージョンと比べて「文字に影をつける」「アニメーション効果をつける」など、機能が増えています。

    CSSの仕組み

    CSSは「セレクタ」「プロパティ」「値」の3つで構成されています。

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

    それぞれの役割は以下のとおりです。

    CSS 役割
    セレクタ どこにCSSを適用させるかを示す 見出しや段落
    プロパティ 何にCSSを適用させるかを示す サイズや色、位置
    どのようにCSSを適用させるかを示す 大きくする、赤くする、右に移動させる

    HTMLの各要素にスタイルを適用させていくことで、Webページの装飾が可能です。たとえば以下のコードは、「pの部分の」「colorを」「redにする」ことを示します。

    p {
    color: red;
    }

    CSSの書き方

    CSSの書き方は下記の3種類です。Webページでの表示のされ方は同じでも、CSSを書く場所や記入内容が異なります。

    • インスタイルシート
    • 内部スタイルシート
    • 外部スタイルシート

      それぞれくわしく解説していきます。

      外部スタイルシート

      外部スタイルシートとは、HTMLとは別にCSSのファイルを用意して、HTMLのheaderに読み込ませる方法です。

      HTMLとCSSを別々のファイルに分けることで、一方だけの修正や編集がしやすいというメリットがあります。

      またCSSのファイルを複数作れば、1つのHTMLでさまざまなレイアウトのWebページを作成可能です。そのためPC用とスマホ用など、同じWebページで複数のレイアウトを作りたい場合も外部スタイルシートの使用が適しています。基本的には外部スタイルシートを使用するようにしましょう。

      内部スタイルシート

      内部スタイルシートは、headタグにCSSを直接書き込む方法です。HTMLファイル内でCSSを含めたすべての情報が確認できるため、規模の小さいWebページの制作に適しています。

      しかしHTMLファイルごとにCSSを記述する必要があるため、基本的には外部スタイルシートを使用するようにしましょう。

      インラインスタイルシート

      インラインスタイルシートは、HTMLタグに直接CSSを書き込む方法です。HTMLのそれぞれのタグに「style=””」を追加して、セレクタ・プロパティ・値を書き込んでいきます。対象の要素に直接書き込めるため、シンプルでわかりやすい方法です。

      しかし、HTMLタグ一つ一つにCSSを記述する必要がある上に、他のHTMLファイルに読み込めないため、管理の手間が増えます。基本的には外部スタイルシートを使用しましょう。

      CSSセレクタ、プロパティの種類

      CSSのセレクタ、プロパティにはさまざまな種類があり、それぞれスタイルの適用範囲が異なります。下記はそれぞれの種類の一部です。

      CSSセレクタ

      よく使用される3つのCSSセレクタを表にまとめました。

      CSSセレクタ 書式 スタイルの適用範囲
      要素セレクタ 要素名 指定した要素
      idセレクタ 要素名#id名 idが付いている要素
      classセレクタ 要素名.class名 任意のclassが付いている要素

      idやclassとは、CSSで装飾を行うためにHTML内に記述する、目印のようなものです。

      他にもさまざまなセレクタが存在するため、気になる方は調べてみましょう。

      CSSプロパティ

      CSSには、以下のようなプロパティが存在します。値と組み合わせることで、文字色や指定領域の幅など、さまざまな対象にレイアウトを施せます。

      CSSプロパティ スタイルの適用範囲 値でできること
      font フォント関連をまとめて指定 フォントを変える
      font-size フォントのサイズ サイズを変える
      color 文字の色 色を変える
      background-image 背景画像 画像の大きさや位置を変える
      height 内容領域の高さ 高さを変える
      width 内容領域の幅 幅を変える

      プロパティは上記以外にもたくさんあるため、必要に応じて探してみましょう。

      HTMLとCSSを使ってWebページを作成する流れ

      HTMLとCSSを使ってWebページを作成する流れは以下のとおりです。

      1. 全体の構成やデザインを考える
      2. ファイルを作成する
      3. HTMLを書いて全体の構成を作る
      4. CSSを書いて全体のレイアウトを整える
      5. 正しく適応されているか確認する

        はじめに具体的に全体の構成やデザインを考えることで、完成図をイメージして作業がしやすくなるでしょう。レイアウトを図にしたワイヤーフレームや、完成イメージを画像にしたデザインカンプを作成すると、計画的に進行できるでしょう。

        デザインが定まったら、HTMLとCSSのファイルを用意し、作成を開始します。修正や編集がしやすいように、HTMLファイルとCSSファイルをそれぞれ作成する外部スタイルシートを用いましょう。

        書く順番としては、HTMLで全体の構成を作ってから、CSSでレイアウトを整えます。作業の途中でも、それまでに書いた内容がどのようにWebページに反映されるかをブラウザで確認可能です。逐一確認しながら作業を進めていきましょう。

        最後に、HTMLとCSSが正しく反映されているか確認をします。最近はPCやスマホなど、Webページが閲覧されるデバイスはさまざまです。PC以外のデバイスでも正しく表示されているか注意しながら、最終確認をしましょう。

        Webサイトを構成するその他の言語

        HTMLとCSS以外にもWebサイトを構成する言語は存在します。Web制作によく利用される、以下3つの言語についてそれぞれくわしく解説していきます。

        • JavaScript
        • PHP
        • Ruby

        JavaScript

        JavaScriptはWebページに動きを加えるための言語です。スクロールに合わせて画像を表示させる、選択肢ごとに表示内容を変えるなど、ユーザーの動きに応じて変化するデザインが作成できます。

        JavaScriptを用いれば、より多彩な表現でWebサイトを制作できるようになります。

        PHP

        PHPは「PHP: Hypertext Preprocessor」の略で、動的なコンテンツを作成するための言語です。

        JavaScriptはクライアント側で動作しますが、PHPは主にサーバー側で動作します。PHPを使えば、HTMLを効率的に書けるようになるため、Web制作によく利用されるプログラミング言語です。人気が高いCMSであるWordPressも、PHPで作成されています。

        Ruby

        RubyはPHPと同じくサーバー側で使用される言語です。動的なコンテンツの作成に適しており、Web開発、スマホアプリ開発、スクレイピングなどさまざまな開発に利用されています。

        日本で開発されたため、日本語の関連情報が豊富です。またRuby on Railsというフレームワークによって、短期間で開発できるという特徴があります。

        HTMLとCSSの違いを理解してWebサイトを制作してみよう

        HTMLはWebサイトの構成、CSSはWebサイトの装飾ができる言語です。HTMLで作った骨組みをCSSで装飾することで、Webサイトにデザインを施せます。

        またJavaScriptやPHPなど他の言語と組み合わせれば、動的な表現を取り入れられるため、より自由なWebサイト制作が可能です。

        Webサイトは集客や採用など、さまざまな目的で作られます。HTMLやCSSを使いこなして、目的に沿ったWebサイトを制作できるようになりましょう。

        この記事を書いたライター

        川島 佑太

        川島 佑太

        運営元のJetB株式会社メンバー。Webへの探究心と、学生時代に文学賞を受賞した実績や文才を買われて優良WEBに参画。「読者に寄り添う」をテーマに、誰が読んでもわかりやすい記事になるよう執筆している。実家が神社で休日はお祓いをしている。好きなお祓いは七五三。

        このライターの記事一覧

        この記事を監修した人

        藤澤 尚也

        藤澤 尚也

        JetB株式会社メディア事業部SV。前職の大手IT企業の同僚から誘いを受け2018年に入社。営業部に2年半、制作部に2年在籍し、マーケティングやサイト制作の実績と経験を積んだ後、幅広い知識を活かすために優良WEBに参画。ベースとラーメン二郎をこよなく愛する。

        この監修者の記事一覧

        Share

        関連記事

        おすすめ記事

        Share