Skip to content

Webサイトの構成

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

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

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

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

HTML
CSS
JavaScript
Images
etc...

HTML#

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

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

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

段落という意味になります

HTML Standard

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">
Photo

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

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

るり
気軽にご相談ください。
千葉県四街道市を中心に、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。