Webサイトの構成
Webサイトを構成する要素を紹介。これらの理解によってWebサイトの構造がわかりやすくなっていきます。
サーバーから送信されるデータ#
Webサイトに必要なデータはサーバーに保存されています。
Webサイトを表示するためにはサーバーへリクエストを出すことで可能になります。
リクエストされた結果、表示するために必要なデータの代表として以下の通りとなります。
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;
}
フォントサイズ16px、赤色、太文字
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="/notes/images/main_ruri_gr.jpg" sizes="(max-width:1280px) 100vw, 1280px" width="1280" height="720" alt="Photo" loading="lazy">

お仕事・当サイトへ興味を持っていただいた方
お問い合わせを頂く際はご確認ください

テクニカルディレクター / Webデザイナー
「ma-san web
design」の管理者。東京都・千葉県(千葉市・四街道市・浦安市・佐倉市)・宮城県(仙台市)を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

Recommendation
![]()
Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。
![]()
初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。
![]()
Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。