![Tech University](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="333"><rect fill-opacity="0"/></svg>)
概要
私達は日頃、様々なWebページを閲覧しています。それらのページの情報は、HTMLとCSSという2つの言語によって構成されています。
本章ではHTMLとCSSの役割について学びます。
- HTMLとCSSの役割を理解すること
- HTMLの表示方法を理解すること
Webページの見た目を作るための前提知識
HTML（HyperText Markup Language）
ウェブサイトに表示される情報を記載する言語です。
〇〇.htmlという名前のファイルに記述します（例：test.html）。
CSS（Cascading Style Sheets）
HTMLに装飾を加えるための言語です。
〇〇.cssという名前のファイルに記述します（例：style.css）。
拡張子
拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列です。
例えばhtmlのファイルを作成する場合は〇〇.htmlとなり、CSSの場合は〇〇.cssとなります。このように、言語ごとに拡張子が異なります。
HTMLとCSSの関係性について学ぼう
HTMLとCSSは以下のような関係です。
HTMLはブラウザ上に情報を表示するための言語です。したがってHTMLだけでも情報を表示することができます。
しかしHTMLだけでは、下の図のように質素なウェブサイトに仕上がってしまいます。
これを解決するためにCSSを用います。
CSSを用いることで、ユーザーが見やすい形にウェブサイトを装飾することができます。
したがって、HTMLとCSSはセットで使用するものと認識しておきましょう。
HTMLをブラウザに表示させよう
ここではHTMLを実際にブラウザ（PC画面）に表示させます。これまで本章で学んだことを実践しましょう。
以下の指示に従い、ファイルを作成しましょう
お使いのテキストエディタでOKです。
本ブログでの推奨エディタはVScodeです。VScodeの導入方法はこちら。
command（⌘） を押しながら N を押すと、ファイルを新規作成できます。
command（⌘）キー を押しながら+ S を押すと、ファイル保存のためのポップアップが出ます。下図に従って、ファイルをデスクトップフォルダに保存してください。
ファイル名はtest.htmlです。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からブラウザ上にドラッグ＆ドロップすることです。
デスクトップにtest.htmlがない場合は保存場所を間違えている可能性があるため、もう一度ファイルを作り直しましょう
今後も同じ方法でHTMLの確認をするので、こちらの操作は覚えておきましょう。
HTMLがブラウザに正しく表示されているか確認しましょう
ブラウザが以下のように表示されていれば成功です。
このHTMLの一つひとつの構造については次の章で詳細に学びます。
普段見ているウェブサイトに比べると質素な見た目です。これはHTMLだけでCSSによる装飾が無いためです。
この章の振り返り
本章では、ウェブサイトを構成するHTMLとCSSの役割について学びました。
また、HTMLファイルをブラウザで表示する方法も学びました。
次の章からは、HTMLの書き方について詳しく学んでいきます。
- Webサイトの見た目はHTMLとCSSの2つの言語からできている。
- HTMLはWebサイトに表示する情報を記載する言語
- CSSはHTMLを装飾するための言語
- HTMLだけでもWebサイトは表示できるが、見た目が質素になるため、CSSも合わせて必要になる。
- HTMLはWebサイトに表示する情報を記載する言語。
- CSSはHTMLを装飾するための言語。 HTMLファイルは〇〇.html、CSSファイルは〇〇.cssという拡張子をつけてファイルを作る。
- HTMLファイルをブラウザに表示させるためには、ファイルをブラウザにドラッグ&ドロップする。
次の章
