目次

• はじめに
• HTML/CSSとは
• HTMLの基本構造
• コードを書く

はじめに

HTMLとCSSを学び始めた当初は、「WebサイトはHTML・CSS・JavaScriptで構成されている」ということしか分かっておらず、それぞれがどのような役割を持ち、どのような構造になっているのか理解できていませんでした。

今回はHTMLの基本構造とCSSの役割について学びながら、実際にコードを書いて簡単なWebページを作成していきたいと思います。

HTML/CSSとは

HTML（Hyper Text Markup Language）とは、Webページの構造を記述するためのマークアップ言語です。具体的には、見出し・文章・画像など、それぞれの要素の役割を定義し、Webページの骨組みを作るイメージです。

また、CSS（Cascading Style Sheets）は、Webページの見た目やレイアウトを整えるための言語です。文字の色や大きさの変更、背景色の設定などを行うことができ、HTMLで作成した骨組みに対してデザインを加える役割があります。

HTMLの基本構造

それでは実際に、HTMLの基本構造を見てみましょう。

一番外側の赤い枠は、HTML全体を表しています。その中に「body」があり、さらにその中に「header」「main」「footer」などの要素で構成されています。

このようにHTMLでは、要素ごとに役割を分けながらWebページの構造を作っていきます。

コードを書く

上段で表した図をHTMLで書き起こすと以下のようになります。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

HTMLという箱の中にheadとbodyがあり、さらにbodyの中にはheader、main、footerなどの要素が存在しています。

このようにHTMLには基本的な構造があり、主にbodyの中にコードを書いてページを作っていくイメージです。ここで疑問に思う方もいるかもしれませんが、コードの中にある <!DOCTYPE html> と <head> は何を表しているのでしょうか。

これらもHTMLを書く上で重要な要素なので覚えておきましょう。

まず <!DOCTYPE html> は、「このファイルはHTMLで記述されています」とブラウザに伝えるための宣言です。

これを記述することで、ブラウザは標準的な表示モードでページを表示できるようになります。

一方、headにはページのタイトルや文字コードなど、Webページの設定情報を記述します。

headの内容はブラウザ画面には直接表示されませんが、ページを正しく表示するための重要な役割を担っています。

次回は実際にコードを書きながら、簡単なWebページを作ってみましょう。