Help us understand the problem. What is going on with this article?

HTML5 & CSS3入門第1回〜Webサイトの仕組み〜

More than 1 year has passed since last update.

HTML、CSSについて簡潔にまとめたものを何回かに分けて投稿していきます。サクッと読めるようにしたいので一記事の長さはできるだけ短くしています。

今まで、Rubyの記事を書いていましたが、しばらく投稿してなかったので久しぶりの投稿です。また、頑張っていきます。

環境

HTML : HTML 5.1
CSS : CSS3
OS : macOS High Sierra バージョン 10.13.6

Webサイトが表示される仕組み

私たちが普段見ているQiitaのような、Webサイトが表示されるまでには、以下のようなことが行われています。また、実際はもう少し手順を踏むのですが、この記事はHTML、CSSがメインなので簡潔にまとめています。詳しくは、「カゴヤのサーバー研究所」さんの記事に分かりやすく記載されています。

  1. Webブラウザがページを表示するために、Webサーバーにデータを要求する。(リクエスト)
  2. Webサーバーがブラウザのリクエストを元に要求されたデータを返す。(レスポンス)
  3. Webサーバーから返ってきたデータを元にブラウザがページを表示したり、音声を読み上げる。

html5-css3_introduction-image_01.png

また、上記のようにWebサーバーにデータを要求しても、そのデータがWebサーバーにない場合もあります。そのような場合のために、Webサーバーは、レスポンスの際にリクエストのあったデータだけではなく、そのリクエストがうまくいったかどうかも返します。

このリクエストに対するレスポンスには、番号が付けられています。代表的なレスポンスコードは以下の通りです。

レスポンス結果のメッセージ 説明
200 OK リクエストが成功して、URLが指し示す正しいデータが返された
301 Moved Permanently サイトが引越しなどの理由でURLが永久的に変わった。新しいURLにリダイレクトされた。
302 Found URLが一時的に変わっていて、代わりのURLにリダイレクトされた。
403 Fobidden パスワードなどがかかっていて、アクセスする権限がない。URLが指し示すファイルにアクセスできなかった。
404 Not Found URLが指し示すファイルがなかった。
500 Internal Server Error プログラムのエラーなどで、サーバーでエラーが発生した。URLが指し示すファイルにアクセスできなかった。
503 Service Unavailable サイトのメンテナンスなどで、URLが指し示すファイルが一時的に利用できない。

URL

URLとは

URLとは、「Uniform Resource Locator」の略でありデータがある場所を指し示します。ある特定のファイルの「住所と名前」を示すようなものです。インターネット上に公開されているデータは、固有のURLが割り振られています。あるURLは、世界に1つしか存在せず、同じURLが存在することはありません。

html5-css3_introduction-image_02.png

スキーム

そのデータがWebページ用なのか、メール用なのかそれとも他の何かに使われるかなどのデータの種類を指し示すものです。URLの先頭は必ずスキームから始まります。スキームは、何種類かあり、Webページで使われるのは、「http」、「https」の2種類です。

ドメイン名

ドメイン名とは、URLの一部であり、「hoge.jp」や「fuga.com」のような、「/」の前までの部分を言います。ドメイン名は、個人や組織がドメイン登録管理団体に登録料を支払って取得するものです。また、ドメインはIPアドレスを人間がより識別しやすくするために開発されたものです。こちらでも、簡潔にまとめてますが、詳細を調べるとよりインターネットの仕組みを知ることができます。

サブドメイン

ドメイン名の直前につく、「www」などをサブドメインといいます。同じドメイン名でもサブドメインが異なれば、別々のWebサイトとして識別されます。

URL
https://hoge.jp
https://hoge.com
https://www.hoge.jp
# 上記3つのURLはそれぞれ別々のWebサイトとして認識される。

クエリパラメータ

URLの最後に「?」や「&」、「=」がついているものがあります。このURLは、通常のURL部分に追加情報を加えて、Webサーバーにリクエストしていることを示しています。この「?」以降をクエリパラメータといいます。ECサイトで商品検索をした場合などに追加されています。

URL
https://hoge.jp/keyword=バッグ

Webサイトに使われるファイルの種類

Webサイトは、複数のファイルを元に表示されていることが多いです。ここでは、Webサイトにどのようなファイルが使われているかをまとめます。

HTMLファイル

Webページを表示するために、最低限必要なファイルです。人間が読めて、コンピューターが処理できる形にするのがこのHTMLファイルです。そのテキストや画像が何を意味しているかを定義していくのがHTMLファイルで、Webサイトの骨格のようなものです。また、HTMLファイルの拡張子は「.html」です。

CSSファイル

HTMLファイルで意味づけされたテキストや画像の位置をどのように表示するかを指示するのがCSSです。HTMLファイルだけでは、見やすいWebサイトは構築できません。CSSを使ってテキストや画像を整えたり、装飾することで見やすいWebサイトが出来上がります。CSSファイルの拡張子は「.css」です。

JacaScriptファイル

HTMLファイル、CSSファイル、画像ファイルは、ブラウザに一度表示されてから、次のページに遷移したり、更新したりしない限り表示される内容は変わりません。しかし、JavaScriptを用いれば一度表示されたWebページを様々に変化させることができます。Facebookなどでページをスクロールしていくとたえずコンテンツが表示されるなどがあります。

画像ファイル

JPEG

JPEG形式は、フルカラー(約1670万色)を扱えるのが特徴で、色数の多い写真などの画像に適しています。また、色数を保ったまま圧縮率を変えることができます。(圧縮率を高めれば画質は落ちます。)拡張子は、「.jpg」、「.jpeg」です。

PNG

グラフや図、ベタ塗りの面積が多いイラスト、グラフィックなどに文字が含まれている場合など、輪郭がはっきりしていて階層が少ない場合の画像は、PNG形式が適しています。また、画像にマスクをする場合もPNG形式を用います。マスクとは、イメージの一部を切り抜いて、そのほかの部分を透過できる機能のことです。拡張子は、「.png」です。

GIF

パラパラ漫画のように、何枚かの画像を組み合わせてアニメーションをさせたいときは、GIF形式のファイルを作成します。ローディングサインなどによく使われています。拡張子は、「.gif」です。

SVG

JPEG、PNG、GIF形式の画像は、ビットマップ形式と呼ばれる1画素ごとに色の情報を持っています。それに対して、線や塗りの情報が数式で表されているベクター形式の画像があります。ベクター形式は、縮小しても画質が変わらない反面、ビットマップ形式に比べ描画に時間がかかります。SVG形式の画像は、画像ファイルでありながらデータの中身は、「SVG」というHTMLと似たような言語で書かれています。そのため、テキストエディタで編集できたり、JavaScriptを使えば画像をリアルタイムに書き換えることができます。その特徴を生かして、SVGはリアルタイムに変化するグラフを表示するときなどに使われます。

動画ファイル

MP4形式の動画ファイルを用意しておけば、主要なブラウザで全て再生することができます。MP4形式のファイルの拡張子は、「.mp4」です。

音声ファイル

MP3形式のファイルを用意しておけば、主要なブラウザで全て再生することができます。MP3ファイルの拡張子は、「.mp3」です。

Webサイトのファイル・フォルダ構造

Webサイトで使用するファイルを整理するとき、「そのフォルダ構造がそのままURLになる」ということを押さえておくと良いです。
以下のようなことに気をつけながら、ファイルやフォルダの構造を決定します。

  • URLができるだけ短くなるようにする。
  • なるべく簡単な英単語を使う。
  • 階層はできるだけ浅くする。

実践的なファイル・フォルダ構造

例1 HTMLファイルを可能な限りルート階層に置く
作成したファイルをできるだけ、ルート階層に置く方法では、階層が浅くなるため、URLが短くなります。しかし、ページ数が多くなると大量のHTMLファイルがルート階層に置かれるため、管理がしづらくなるというデメリットもあります。ページ数が数10ページ程度の小〜中規模サイトに向いています。

html5-css3-introduction-image_08.png

例2 1ページにつき1つのフォルダを作る
トップページを覗く全てのページを個別のフォルダに作る方法です。この方法は、全体的にフォルダの数が増えるため、ファイルの一貫性が悪くなります。しかし、扱うファイル数が多くなるECサイトなどの大規模サイトの場合に適している方法と言えます。

html5-css3-introduction-image_09.png

ファイル名・フォルダ名はURLの見た目を考えて名付ける

HTMLのファイル名やフォルダ名は、そのままURLとしてブラウザのアドレスバーに表示されます。そのため、以下のような点を考慮しながら、名前をつけるといいでしょう。

  • 半角の英単語、数字、または英単語と数字の組み合わせにする。
  • 英単語はできるだけ簡単なものを使う。
  • 2つ単語を使う必要がある場合は、単語の区切りを「-」でつなげる。
  • 記号には使用できない文字(半角スペース、&、:、?、=、など)があるため、原則として「-」のみを使用する。

終わりに

これで、「HTML5 & CSS3入門第1回〜Webサイトの仕組み〜」は終了です。まずは、実際にHTMLやCSSを書くために必要な知識を簡潔にまとめました。次回からは、HTMLの基礎知識とマークアップの実践例をまとめます。それでは、また。

io_fleming
インプットしたものをゆるゆるアウトプットしていこうと思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした