HTML と CSS の役割、そしてページ作成の第一歩

この単元では、Web ページが HTML と CSS という2つの技術で構成されていることを学びます。それぞれの役割の違いを理解したうえで、実際に HTML ファイルを作成し、ブラウザで開いて表示を確認できるようになることを目標とします。

Web ページは、HTML と CSS という2種類のファイルを組み合わせて作られています。ブラウザはこれらのファイルを読み込み、その内容を解釈して画面に表示します。それぞれの技術には別々の役割があり、次のスライドから順に見ていきます。

HTML は、Web ページに表示する文章や見出しなど、「内容」と「構造」を記述するための言語です。たとえば「ここが見出しである」「ここが1つの段落である」といった、ページの骨組みを表現します。具体的な書き方は次の単元以降で学びますが、まずは「内容と構造を担当する」という役割を覚えておきましょう。

CSS は、Web ページの見た目を指定するための言語です。文字の色や大きさ、要素の配置といった装飾を担当します。同じ内容の HTML ファイルであっても、適用する CSS を変えるだけで、見た目を大きく変えることができます。

HTML と CSS の役割は、家づくりに例えるとわかりやすくなります。HTML は柱や壁を組み立てる「骨組み」の部分にあたり、CSS は壁紙を貼ったり外壁を塗ったりする「装飾」の部分にあたります。骨組みがあるからこそ装飾ができ、装飾によって同じ骨組みでも見た目の印象を変えられるのです。

内容を担当する HTML と、見た目を担当する CSS を分けて管理すると、修正がしやすくなります。たとえば、ページの色使いだけを変更したい場合でも、文章や構造が書かれた HTML には手を加える必要がありません。また、1つの CSS ファイルを複数のページで使い回すこともでき、全体のデザインを統一しやすくなります。

HTML ファイルは、特別なソフトがなくても、文字を入力できるテキストエディタで作成できます。Windows に標準で入っている「メモ帳」や、Mac の「テキストエディット」でも構いません。慣れてきたら、コードを書くのに便利な専用のエディタを使うのもよいでしょう。

HTML ファイルを作る手順は、次の通りです。まずテキストエディタで新しいファイルを開きます。次に、ページに表示したい文章を自由に入力します。最後に、ファイル名の末尾の拡張子を「.html」にして保存します。この拡張子があることで、ブラウザがこのファイルを Web ページとして認識できるようになります。

この段階では HTML のタグをまだ学んでいないため、ファイルの中身はふつうの文章だけで構いません。ここでは「自己紹介 | 佐藤玲奈」という1行と、自己紹介の文章を書いた例を示します。タグがなくても、拡張子を「.html」にして保存すれば、ブラウザで開くことができます。

保存した .html ファイルは、ブラウザで開いて確認します。ファイルをダブルクリックするか、ブラウザのウィンドウにドラッグ&ドロップすると、既定のブラウザが起動し、ファイルに書いた文章が画面に表示されます。この時点ではまだ装飾がされていない、ふつうの文章として表示されるはずです。

この単元では、Web ページが HTML と CSS という役割の異なる2つの技術で構成されていることを学びました。HTML は内容と構造を、CSS は見た目を担当します。また、テキストエディタで文章を書き、拡張子を「.html」にして保存すれば HTML ファイルになること、そのファイルをブラウザで開けば表示を確認できることを体験しました。次の単元では、タグや属性といった HTML の具体的な書き方を学んでいきます。