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="/