Webサイトの構成

Webサイトを構成する要素を紹介。これらの理解によってWebサイトの構造がわかりやすくなっていきます。TABLE OF CONTENTS

サーバーから送信されるデータ

Webサイトに必要なデータはサーバーに保存されています。

Webサイトを表示するためにはサーバーへリクエストを出すことで可能になります。
リクエストされた結果、表示するために必要なデータの代表として以下の通りとなります。

  • HTML
  • CSS
  • JavaScript
  • Images

etc…

HTML

HTMLとは簡単に説明するとコンピューターがテキストの意味を理解できるようにする言語。

HTMLの仕様はW3CやWHATWGという団体をはじめ策定されてきました。現在はWHATWGにより一本化されています。HTMLが正しく書けるようになるというのはWebサイトの情報を正しくインターネットに流し、世界中の人々に情報を伝えるということにもなります。

<p><strong>段落という意味になります</strong></p>

CSS

CSS = Cascading Style Sheets。

CSSはHTMLでマークアップされた要素に対して装飾することができる言語です。HTMLの各種要素に対して色を付けたりサイズを調整したり、場合によってはアニメーションを付与することも可能です。

p {
  font-size: 16px;
  color: #ff0000;
  font-weight: bold;
}

JavaScript

JavaScript = JS。略す場合は別言語のJavaと混同するため注意。Web制作で一番身近なプログラミング言語です。

プログラミングを学ぶ際に、Webサイトの制作を通して学ぶ場合は一番身近なものとなるJavaScript。HTMLやCSSは厳密にはプログラミング言語ではないですが、JavaScriptとセットで制作されるため、一括りにプログラミングとされることが多いです。
Webサイトに様々な機能を付与したり、HTMLやCSSではできない表現を付与することが可能であったり、かなり幅広いことが実行可能です。例

  • お問い合わせフォームで正しく入力されたかチェックをする
  • カルーセルスライダーやアコーディオンメニューなど、アクションや時間経過によって要素が入れ替わる、移動するなどの動作

Images

テキストだけではなく、画像も表示することが可能です。

画像データを読み込むことでWebサイトに表示することが可能です。テキストだけではわかりにくい、アート作品や商品写真を表示させたいなど、Webサイトとして欠かせない要素となります。
一概に一括りにはできませんが、動画データなどテキストデータ以外のデータを表示、読み込む方法もあります。

<img srcset="/notes/images/main_ruri_gr_640.jpg 640w,/notes/images/main_ruri_gr.jpg 1280w" src="/