HTML/CSS
css
html

超初心者向け！HTML・CSSとは？コーディングのサンプル付きで解説

2021/01/20

( 更新日：2022/04/20 )

「Webページってどうやって作られているの？」「Webページを作成してみたいけど何から始めれば良いの？」「HTML・CSSって具体的には何を指しているの？」

当記事ではWeb制作に関するこんな悩みを解決します。

超初心者に向けて、Webページ作成にあたってのツールから具体的に使用する言語HTML・CSSの概要について解説しますので是非読んで下さいね！

Webページとは？

皆さんが普段、インターネットで見ているAmazonやYahoo!などのWebサイトはどのように作られているのでしょうか？

Webページを訪れる際、SafariやGoogle Chromeなどのインターネットブラウザを通して閲覧しているはずです。

ブラウザの役割は「HTML」という言語で書かれたファイルを人間が理解出来る(見やすい)形に変換して表示する事です。

普段皆さんが閲覧しているAmazonなどのWebサイトは「HTML」ファイルをブラウザが変換してくれている為、Webページを見れている訳ですね。

因みにHTMLファイルとは、主にページの要素や構成を形作る言語である「HTML」で構成されたファイルです。

そして、HTMLファイルをより綺麗にデザインし見た目を華やかにするのが「CSS」の役割です。

次章以降で、Webページを構成する「HTML」と「CSS」のそれぞれの言語を詳しく見ていきます。

HTMLとは？

上述したように、普段皆さんが見ているWebページはHTMLという言語で記述されています。ここでいう「言語」は「ある法則に基づく書式」と考えて下さい。

つまりWebページはHTMLという書式(文法)で書かれたファイルで構成されているという事です。

HTMLは、ページの要素や構造をブラウザに伝える為の言語です。

HTMLファイルを作成する為には、決められた文法に基づいて記述し、末尾に拡張子「.html」を付けて保存する事でHTMLファイルが作成出来ます。

拡張子とは、ファイルを識別する為にファイルの末尾につける文字列の事です。皆さんがWordファイルを作成した時に付く.docxや画像ファイルに付く.jpgなどを拡張子と言います。

HTMLの書き方

ここからは実際のHTMLの書き方を見ていき、HTMLファイルの基本構成を理解して頂ければと思います。

下記が基本的な構成です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

HTMLファイルの基本構造はhead要素とbody要素の２つの要素によって構成されます。

この2つの要素の中に、各要素を記述する事でWebページの構造が決まっていきます。

head要素

head要素にはブラウザや検索エンジンに伝える為の情報を記述します。

head要素に書かれる情報はWebページ上には表示されません。

head要素にはページのタイトルや文字コード、ページの説明などの情報を記述します。

それでは1行ずつ見ていきましょう。

先頭の<!DOCTYPE HTML>はこのHTMLファイルがどのバージョンのHTMLで書かれているかを表しています。これについては、HTMLファイルを記述する際は必ず記述するものなので覚えておきましょう。

次の行の<html>はこれから記述する文がHTMLファイルであるという事を示す要素です。

<!DOCTYPE HTML>と<html>要素の2つは必ず記述する要素なのでセットで覚えておきましょう。

meta要素

<meta>要素はページの情報を定義する要素です。

上記の <meta charset=”UTF-8″>　では「UTF-8」というコンピュータの文字コードを扱う事を示しています。文字コードを指定しないとブラウザで文字化けを起こすので、文字コードも必ず記載して下さい。

<title>要素は文字通り、Webページのタイトルを指定する要素です。

ページ上には表示されませんが、ブラウザのツールバーや検索結果のページ名として表示されます。

body要素

ここからは、もう一つのメイン要素である<body>を見ていきます。

<body>要素には、ブラウザに表示されるコンテンツを記述していきます。

皆さんが普段閲覧されるWebページの内容は全てこの<body>要素に記述されています。

ここでは触れませんが、HTMLには100以上の種類の要素が有ります。

それらの要素の組み合わせでWebページは構成されています。

実際に手を動かしながら、頻繁に使用する要素に関しては覚えてしまいましょう。

分からないものは「ググる」だけです。

CSSとは？

ここからはCSSについて見ていきます。

CSSはWebページの見た目を華やかにし、デザインする為の言語です。

HTMLで構成したWebページのデザインの部分を担います。

CSSを用いる事により、文字の色や種類を変更出来るだけでなく、背景を自由にデザイン出来たりと見た目を自由にリッチに自分好みのサイトを作る事が出来ます。

CSSの記述方法

それではCSSの記述方法を詳しく見ていきます。

CSSではセレクタ(どこ)に対して値(何を)を指定することで、デザインが変更できます。

CSSでHTMLを修飾する為の基本的な流れは以下の通りです。

対象とするHTML要素(セレクタ)を決める
変化をつけたいデザイン(プロパティ)を決める
具体的な(値)を指定　Ex. 色を赤にする

対象のHTML要素を指定

CSSを適用する際は対象のHTML要素に対して、どのように修飾するかを記述します。

下記の例では見出しを示す「h1」タグを指定し、変化させる対象とします。

デザイン(プロパティ)を決める

プロパティによってデザインを決めます。

ここでは色を変更したいので「color」というプロパティを利用します。

具体的な(値)を指定　

最後に具体的な値を指定していきます。

ここでは、「color:」の後に具体的な色を指定します。

下記の例では指定した「h1」を赤色に変化させる為に値に「red」を指定しています。

「red」の後には「；」が必要になるので忘れないで記述しましょう。

h1 {
  color: red;
}

以上がCSSを指定する為の最も基本的な文法です。HTMLと同様に、CSSにも多くのプロパティとそれに伴う値が有ります。
まずは頻繁に使うものから、覚えていきましょう。

まとめ

いかがでしょうか？

この記事ではWebページの構成から、作成に用いる言語であるHTML・CSSの最も基本的な部分を説明させて頂きました。

HTMLは、文字や要素などの構造を指定する為の言語
head要素はブラウザにページ情報を伝える部分を記載する。
body要素は実際にWebページの目に見える部分を記載する。
CSSは、文字やページのデザインを修飾する為の言語
対象とするHTML要素を指定し、プロパティを決め具体的な値を指定する。

まずはこれらの基本要素を押さえましょう。

HTML・CSSそれぞれに膨大な要素やプロパティが用意されていますが、全てを覚える必要は全く有りません。

頻繁に出てくる物から、まずは覚えていきましょう。

この記事が、これからWeb制作の学習を始めるあなたの一助に成れば幸いです。

超初心者向け！HTML・CSSとは？コーディングのサンプル付きで解説

Webページとは？