HTMLとCSSの概要

プログラミング html

私達は日頃、様々なWebページを閲覧しています。それらのページの情報は、HTMLとCSSという2つの言語によって構成されています。

 

HTML（HyperText Markup Language）エイチティーエムエル（ハイパー テキスト マークアップ ランゲージ）
ウェブサイトに表示される情報を記載する言語です。
〇〇.htmlという名前のファイルに記述します（例：test.html）。

CSS（Cascading Style Sheets）シーエスエス（カスケーディング スタイル シート）
HTMLに装飾を加えるための言語です。
〇〇.cssという名前のファイルに記述します（例：style.css）。

拡張子
拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列です。
例えばhtmlのファイルを作成する場合は〇〇.htmlとなり、CSSの場合は〇〇.cssとなります。このように、言語ごとに拡張子が異なります。

 

HTMLはブラウザ上に情報を表示するための言語です。したがってHTMLだけでも情報を表示することができます。
しかしHTMLだけでは、下の図のように質素なウェブサイトに仕上がってしまいます。

 

これを解決するためにCSSを用います。
CSSを用いることで、ユーザーが見やすい形にウェブサイトを装飾することができます。

 

したがって、HTMLとCSSはセットで使用するものと認識しておきましょう。

HTMLをブラウザに表示させよう
ここではHTMLを実際にブラウザ（PC画面）に表示させます。これまで本章で学んだことを実践しましょう。

以下の指示に従い、ファイルを作成しましょう
以下の手順で、HTMLを記述するためのファイルを作成します。

1. テキストエディタを起動します
テキストエディタとは、直前のレッスンでインストールしたVSCodeのことです。
command（⌘） を押しながら スペースを押して、Spotlight検索を行います。vsと入力するだけでVSCodeが予測変換されます。Enterキーを押下して、VSCodeを起動しましょう。

2.ファイルを新規作成します
command（⌘） を押しながら N を押すと、ファイルを新規作成できます。

3.test.htmlという名前でファイルを保存します
command（⌘）キー を押しながら+ S を押すと、ファイル保存のためのポップアップが出ます。下図に従って、ファイルをデスクトップフォルダに保存してください。
ファイル名はtest.htmlです。HTMLのファイルなので拡張子は.htmlとなります。

 

HTMLを記述してみましょう

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
1つ目の段落です
</p>
<p>
2つ目の段落です
</p>
<p>
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

HTMLファイルをブラウザに表示させましょう
いま記述したHTMLをブラウザに表示させてみましょう。いくつか方法がありますが、一番簡単な方法は以下の手順のように、HTMLファイルをFinderからブラウザ上にドラッグ＆ドロップすることです。

ブラウザで新規タブを開いておく
1の状態でcommand（⌘） + スペースでSpotlightを開く
finderと入力してFinderを開く
Finderでデスクトップに移動
test.htmlをブラウザにドラッグ&ドロップする
デスクトップにtest.htmlがない場合は保存場所を間違えている可能性があるため、もう一度ファイルを作り直しましょう

今後も同じ方法でHTMLの確認をするので、こちらの操作は覚えておきましょう。

HTMLがブラウザに正しく表示されているか確認しましょう
ブラウザが以下のように表示されていれば成功です。

 

このHTMLの一つひとつの構造については次の章で詳細に学びます。
普段見ているウェブサイトに比べると質素な見た目です。これはHTMLだけでCSSによる装飾が無いためです。

 

要点

Webサイトの見た目はHTMLとCSSの2つの言語からできている。

HTMLはWebサイトに表示する情報を記載する言語 CSSはHTMLを装飾するための言語 HTMLだけでもWebサイトは表示できるが、見た目が質素になるため、CSSも合わせて必要になる。

HTMLはWebサイトに表示する情報を記載する言語。 CSSはHTMLを装飾するための言語。

HTMLファイルは〇〇.html、CSSファイルは〇〇.cssという拡張子をつけてファイルを作る。

HTMLファイルをブラウザに表示させるためには、ファイルをブラウザにドラッグ&ドロップする。