IT図書館

プログラミング解説

NEW ARTICLE
【Swift/SwiftUI】列挙型でイニシャライザを定義
  1. HOME
  2. Java基本
  3. 【Web初心者】HTMLとCSSの関係と役割

【Web初心者】HTMLとCSSの関係と役割

本記事では、HTMLとは何なのか、CSSとは何なのかというそれぞれの役割と相互の関係について解説していきます。

目次

HTML

HTMLとは

HTMLとは「Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)」の略で、普段私たちが閲覧しているWebページを作成するための言語です。

具体的には、Webページのタイトル、見出し、本文などは基本的にHTMLによって書かれており、どの文字をタイトルとするか、どこからどこまでが本文であるかなどもHTMLを利用して決定しています。

HTMLの構造

HTMLはタグに囲まれた文章で構成されています。それぞれの文章をタグで囲むことにより、タイトル・本文など何を表すかを決定することができます。

タグは「開始タグ」「終了タグ」が存在しており、その間に文章が入る形になっており、この塊を要素と呼びます。また以下のように終了タグを書く際にはタグ名の前に「/」スラッシュを入れます。

HTMLタグと要素

HTML文書は以下に示すコードのように大きな括りとして、html文書であることを示す<html>タグが存在し、その中で<head>タグと<body>タグが存在しているという形が一般的になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ページのタイトル</title>
    <style></style>
  </head>
  <body>
    <h1>段落のタイトル</h1>
    <div>本文</div>
    <p>本文</p>
    <a>リンク</a>
    <img href="画像のURL">
  </body>
</html>

ご覧の通りタグ同士は入れ子にして、タグの中にタグを入れていくことが可能となっております。

<html>タグは、Webページ内で使用する文字コードやWebブラウザ上でページのタブの部分に表示されるタイトルを決めたり、関連するCSSやJava Scriptの読み込みを行う役割を担っています。

<body>タグは、実際のWebページの内容を示す部分で、タイトル、本文、リンクや表示したい画像のリンクを埋め込んだりする役割を担っています。

CSS

CSSとは

CSSとは、「Cascading Style Sheets(カスケーディングスタイルシート)」の略で、HTMLの表示をデザインするためのものです。

HTMLで記述した文字の文字色やサイズ、フォントや表示幅などを指定する際などに用いられ、スタイルシートとも呼ばれます。

CSSは、<style>タグを使用することでHTML文書内に直接記述することもできますが、「.css」という拡張子のファイルを作成してその中にスタイルを記述していくことが現状では主流となっています。

理由として、HTMLファイル内に直接CSSを書き込んだ場合にはそのHTMLファイル内でしかCSSを使用することはできません。しかしCSSを1つのファイルとして独立させることで、共通の構成をもつ複数のHTMLファイルから対象のCSSファイルを参照し、スタイルを適用することができるという利点があるためです。

CSSの構造

ここでは、先ほど例で示したhtmlに対してCSSでスタイルを適用する例について見ていきます。

CSSは、セレクタ・プロパティ・値で構成されており、セレ｀クタはHTMLでのタグ名などを指定する役割を持っており、指定したセレクタに対してプロパティと値を設定することでHTMLの内容をデザインすることができます。

このhtmlでは、<link>タグ内でrel属性とhref属性を指定することでCSSが記述しているファイルを読み込んでいます。rel属性とは、このHTMLファイルと読み込み先ファイルとの関係性を示す役割を持っており、CSSファイルを読み込む際には「stylesheet」と記述します。

href属性は、読み込み先ファイルのURLを示すための属性で、今回のようにCSSファイルが同じディレクトリ内に存在する場合にはファイル名を指定することで対象のファイルを読み込むことができます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="exampleStyle.css">
  </head>
  <body>
    <h1>段落のタイトル</h1>
    <div>本文</div>
    <p>本文</p>
    <a>リンク</a>
    <img href="画像のURL">
  </body>
</html>

CSSの例では、<h1>タグの文字色に赤色を指定し、<div>タグに対しては、文字の背景色を緑色に、文字のサイズを10pxに指定しています。

h1{
color : red;
}
div{
background-color : green;
font-size : 10px;
}

HTMLとCSSの関係性

ここまでHTMLとCSSのそれぞれの役割について説明してきましたが、ここで改めてHTMLとCSSの関係性についてまとめます。

二者は例えるならば、鉛筆と色鉛筆のような関係となっています。鉛筆であるHTMLを用いて白黒の絵を描き、色鉛筆のCSSで絵に対して色をつけていくというイメージです。

HTMLだけでは、幅広い興味を引くようなデザインのWebページは作ることができませんし、CSSだけでは文字などのデザインを行う対象がないため何もすることができません。

HTMLとCSSはお互いに支え合って1つWebページを構成しているということです。

最後に

今回はhtmlとcssの役割と関係性について書いていきました。他にもWebページを作成する上でこの2つと密接に関係してくるJavaScriptについても記事を書いていますので、ぜひご覧ください。