Webサイトの構成は「HTML」と「CSS」
実際にWebデザインを作成する際には、実際のWebサイトのページがどのように構築されているかを理解する必要があります。
Webサイトは大きく「HTML」と「CSS」で成り立っています。
簡単にいうと「HTML」とはホームページの構成を決める骨組み、「CSS」は各要素のデザインを指定する指示書です。
ホームページの全ての要素は「箱」でできている！
Webサイトでは、「ボックスモデル」という設計原理を使用しています。
つまり、ホームページ上のすべてのものは基本的にボックス(＝箱)でできていて、箱の中に箱を入れて「まとまり」を作っているイメージです！
そして、ホームページの大小さまざまな「まとまり」を「div」と呼び、これが組み合わせられてウェブサイトが作られます。
例えば、上の画像は、コンテナ内のコンテンツとして機能するさまざまな 「div（青で囲った部分）」、セクション内ですべてのアイテムを最適な表示に保つための「コンテナ（赤で囲った部分）」、そして全てのアイテムをまとめあげる「セクション（黒で囲った部分）」で構成されています。
ここに「CSS」という、スタイル設定のためのデザインを紐づけることにより、ボックスやコンテンツの間隔、位置、配置、フォント、スタイルなどを指定することが可能になります。
ひとつひとつのボックスは、「CSS クラス名」と呼ばれるラベル(＝識別のための名称)をつけることができます。
ラベルをつけることによりどのようなスタイルやデザインにするかを自由に設定し、指定した箱にデザインを反映させることができます！
また、クラス名はサイト全体で再利用可能であり、ウェブサイトを構築する際に整理整頓することができます。
要約すると
- HTMLはページ上の構成の骨組み
- CSSは箱のデザインを指定する指示書
- ホームページは全て箱で構成されている
ということが学べました。
これで、ウェブサイトがどのように構築されるかについて、大まかな理解ができましたね！
お気に入りのWebサイトのコードを見てみよう！
今すぐできる楽しい練習は、お気に入りのウェブサイト、たとえばapple.comに行き、ウェブブラウザの要素(HTMLソース)を開いてみることです。
コードを見ると、すべてがボックス（別名div）であることがわかります。これらのdivの中には、見出し、段落、ボタンなどのコンテンツを持つ他のdivが含まれていることがあります。
デザイナーが、各コンポーネントや要素、ボックス（diｖ）にクラスを付けているかを見ることができますし、スタイルセクションでCSSを見ることも可能です！
ぜひ実際にウェブサイトを見てみてください。
次回は、いよいよ実際にWebflowを動かしていきます！