# HTMLとCSSの役割

HTMLとCSSを学習する前に、Webアプリがどのようにできているかを理解しましょう。

## Webアプリの概要

Webアプリは下の図のように、データベース（以下、DB）から必要な情報を取得して、それをページに埋め込んでページを表示しています

その際に

* DBからデータを取得、ページに埋め込む処理をしている部分が**バックエンド**
* 表示しているページの構成やレイアウトを定義している部分は**フロントエンド**

と呼ばれる領域に分けることができます。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FcWbk6AwGJDOsICmDNjHH%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-18%2020.29.22.png?alt=media&#x26;token=ee4a0b42-1497-4796-a914-9a9f2a93520c" alt=""><figcaption></figcaption></figure>

## HTMLとCSSの役割

HTML & CSSは**フロントエンド**の領域で、

* HTMLはページの**構造**を定義

  <figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FagvSaI1Alus2O6Z2wQqj%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-18%2020.36.49.png?alt=media&#x26;token=5f33b1ee-36c2-42d0-820f-381ced1204bf" alt=""><figcaption></figcaption></figure>
* CSSはページの**レイアウト**を定義

  <figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FRdR7F0gm3ZetjKalVVSx%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-18%2020.44.45.png?alt=media&#x26;token=aa580b23-d62c-4836-9d92-9e3b0773a890" alt=""><figcaption></figcaption></figure>

つまり、Webアプリを作る上では、**絶対に必要な知識**になります。