development_creative

この記事は1年以上経過しています。

【これからWeb制作を目指す方へ!】「HTML」と「CSS」の違いって何?

今回はこれからWeb制作を初める方に、今回はざっくりと「HTML」と「CSS」の違いについて説明したいと思います。

HTMLとは?

Web制作をしたことのない方でもちらっと聞いたことがあるかもしれない「HTML」。
もともとは「HyperText Markup Language」と言い、Webページを作るために開発された言語のことを言います。

そもそもなんでHTMLを使うの?という方もいると思いますが、それは「コンピューターにも私達の使っている言語を理解し構造を把握して表示してもらうため」になります。
(例えるなら外国の方に話す時に日本語で話しかけても意味が通じないのでその方の言葉で話す必要がある感じです。)

私達が画面上で見る「文字」はコンピューターにとっては意味が理解できないため、どんな情報がそのWebサイトに掲載されているのかをコンピューターに通じる言語で説明する必要があります。その時に使用するのがHTMLというマークアップ言語です。

そのため、HTMLの主な役割としては「コンピューターが理解できるように文章の構造を教える」ことになります。

Webサイト制作では主に骨組みとなる情報(文章など)をHTMLで記述していきます。
また、各文章の役割を目印(マークアップ)するため、「タグ」と呼ばれる役割のようなものをつけていきます。

CSSとは?

CSSはWebページの文字の色やサイズ、配置などの「見た目」を変えるために使用する言語になります。基本的にWebサイトを作る時はCSSでレイアウトに関する情報を記載していきます。

以前はまだCSSが発達していなかったため、HTMLでデザインを調整することがありましたが、
現在はCSSでデザインを調整することが推奨されています。


HTMLとCSSのつなげ方

さて、HTMLは文章の構造を理解してもらうために使用する骨組みとお話しましたが、
HTMLだけでは昨今のキレイなレイアウトのWebサイトは作れません。
そこでHTMLで作った骨組みに人間がキレイに見えるよう、レイアウト調整を記述したCSSをつなげる方法を説明します。

まず、骨組みとなるHTMLの<head>タグ内に下記の記述を入れます。

<link rel="stylesheet" href="cssファイルの名前.css">

これでHTMLとCSSをつなげて関連づける事ができました。
HTMLには複数のCSSをつなげることもでき、複数をつなげる場合は同じ感じで記述をつなげれば大丈夫です。

例)

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="footer.css">

以上、ざっくりとしたHTMLとCSSについての説明でした。

実際の制作の流れなどについてはまた後日記述します!

Related ariticle

関連記事

TOP