• 【初心者向け】WEBサイトって何で出来てる?8つのポイントを解説。

    プログラミングに励むエンジニア

    WEBサイトって何で出来てるの?

    「WEBサイトってなんかいろいろゴチャゴチャしてそうだけど….何で出来ているの?」

    以上をお題にして、なるべくシンプルに「8つのポイント」に分けてお話できればと思います。

    専門用語もところどころに出てきますが、暗記する必要はありません。プログラミングを学び始めれば、どれも自然に口から出るようになる言葉と考え方ばかりです。

    今日のところは「なんかそういう感じなのね」「あまりわからなかったけどプログラミング始めればわかるでしょ」くらいで全く問題ないお話なので、リラックスしてお読みください。

    ではWEBサイトって何で出来ているの?にお答えする「8つのポイント」いってみましょう。

    ①ブラウザとHTML・CSSの関係を知ろう

    机の上に置かれたノートパソコン

    まずは「ブラウザ」のお話から。

    WEBサイトには文字のみならず、写真や動画、音声なんかがあるのは今や当たり前ですよね。

    いまみなさんは本記事を「ブラウザ」を通してご覧になっています。

    スマホでiPhoneなら「サファリ(safari)」だったり、パソコンなら「クローム(Chrome)」なんかが代表的なところ。こんなアイコンに見覚えはないでしょうか。これが「ブラウザ」です。

    ブラウザのsafariやchrome、firefoxのアイコン

    WEBサイトというのはこれら「ブラウザ」を通してでないと見れないモノ。

    そしてブラウザにWEBサイトを映すためには『HTML』や『CSS』といった「素材」を用意する必要があるんですね。

    このHTMLやCSSを「書く」行為がいわゆる「コーディング」と言われるもの。プログラミングの土台ですね。厳密には「マークアップ」と呼ばれる作業です。

    しかし、マークアップ(HTML/CSS)だけでは表現の幅は非常に狭く、文字とその位置くらいしか指定できません…。そこで、写真や動画など他の「素材」も用意することになります。

    さらにさらに、もっとリッチな表現や機能を実装するために、難易度の高い他の「プログラミング言語(開発言語)」を採用したりするわけです。

    世界中の企業や個人が持つ「商用サイトを作りたい」「顧客管理システムを導入したい」「アプリ完結で決済をしたい」などの要望。

    それらを実現するのに最適なプログラミング言語や仕様を選定するのも、エンジニアの大事なお仕事になります。

    ②WEBサイトを表示するためには整理整頓が必要

    整理された箱のイメージ

    WEBサイトをブラウザに映すために用意する「素材」は、それぞれ別々のファイルを用意する必要があります。ちゃんと整理してサーバー(後述)ってところに置いておくんですね。

    整理整頓しないと、コンピューターも人間も、何がなんだかわからなくなっちゃいますので。

    HTMLやCSSといった骨組みはもちろん、画像や動画についても「それぞれWEBサイトに適したファイル形式」を用意しますよ。

    イメージしやすいよう、ちょっとオリジナル図を作ってみました。

    WEBサイトの構成素材とWEBサイトの関係性のオリジナル図

    上の図のように、HTMLファイルやCSSファイル、文書や写真などそれぞれのファイルを用意すると、ブラウザはやっとWEBサイトを表示してくれるわけですね。

    相手はコンピューターですから、融通が利かないので「ファイルの整理整頓」「コードの記述」はキチッとやんなきゃいけないところ。逆に言うと、ここを抑えておけば理論上は永久に黙って24時間365日動いてくれるのがコンピューターでもあります。

    このあたりのお話も、別にプログラミングを始める前に暗記する必要はないので、まずはこのまま読み進めてみてください。

    ③HTMLやCSSのファイル形式・拡張子とは?

    コーディング中の画面

    WEBサイトをブラウザに映すためには「素材」の各種をファイルで分けることが必要とご説明しました。

    そして下記は、WEBサイトを構成する主な「素材=各ファイル」の「拡張子」の一覧です。拡張子とはコンピューターやブラウザに「これは画像だよ」「これは動画だよ」と知らせるためのファイルの形式のこと。

    なんだか「拡張子」とか言われると嫌ですね、難しそうで。

    でも、拡張子があることでコンピューターやブラウザは、何が文字で何が画像か、何が動画で何が音声かを判別できるようになるんです。なのでここは、人間側が機械に優しく整えてあげるのが大事なところ。

    素材の種類と代表的なファイル形式(拡張子)

    素材 ファイル形式【拡張子】
    HTML HTML(.html)
    CSS CSS(.css)
    画像 JPEG(.jpegまたは.jpg)PNG(.png)GIF(.gif)SVG(.svg画像
    音声 MP3(.mp3)WAV(.wav)MIDI(.midi)他
    動画 MP4(.mp4)MOV(.mov)WebM(.webm)AVI(.avi)WMV(.wmv)YouTube動画の埋め込み等
    動的な効果 JavaScript(.js)

    もしかしたら、音楽好きな方は「MP3」なんて見たことがあったり、GIFなんかは「おもしろgif」などWEBで見たことがあるかもしれませね。

    そう、拡張子なんて聞くとすごい難しそうですが、私たちの生活には自然に溶け込んでいるものも多いんですよ。だから大丈夫です。

    もし「HTMLファイル」を5分ほどで自分でいま作ってみたい方は『【5分で演習】HTMLファイルを作ってWEBブラウザで見てみよう。』を見ながらぜひ試してみてくださいね。

    ④「文字コード」の基礎知識

    プログラミングの参考書

    ここでちょっと「文字」のお話をします。

    コンピューターで入力されるテキストは「文字コード」と呼ばれるルールに基づいて表示されているんですね。

    その「文字コード」で、日本語を扱うものとしては

    「UTF-8」
    「Shift-JIS」
    「EUC-JP」

    などがあります。

    結論、日本語のWEBサイトを制作する場合は文字コードは「UTF-8」を指定しておけば良いでしょう。ここはもう理屈じゃなく、そう思っておくのが良し。

    GoogleもYAHOOも「UTF-8」を採用しており、世界最もポピュラーな文字コードであることでも有名。一説では世界の90%のWEBサイトで使われているそうです。昨今のWEBサイトは動的な動きをJavaScript関連で付けるのが一般的なのもあり文字コードは「UTF-8」と覚えておけば問題ありません。

    なんだかよくわからんなあ、と思うところと思いますが「文字コード」についてはまず「WEBサイトの文字コードはUTF-8」と知っておきましょう。

    ⑤「画像」について

    散らばった写真

    次は「画像」のお話です。

    画像とは写真だったりイラストだったりのことですね。

    WEBサイトに使う「画像」のサイズは「pixel(ピクセル」)」という単位になります。

    わざわざ聞き慣れない「ピクセル」などという単位を使うので、こういうところでもプログラミングに少し恐怖を感じるかもしれませんが…。

    宇宙語にも聞こえるピクセルなんても単なる単位。慣れの問題なので深く考えずがいいですね。そのまま受け入れるのが良いです。インチやセンチと同じ単なる単位なんだと。

    「1インチ(2.54cm)あたりにいくつのピクセルを並べるか?」を示すものを「解像度」と呼び「ppi(ピーピーアイ)」という単位で管理します。解像度はピーピーアイ。

    ピクセル、ピーピーアイ共にWEB制作現場では頻繁に使われる言葉ですね。

    WEBサイトで使用される「画像」の主なファイル形式は以下になります。

    JPEGは一般的、PNGは透けてる、GIFは動く、SVGは結構最高、なんて感覚を持ってるといいかもしれません。

    ファイル形式 主な用途
    JPEG 写真・色数豊富なもの
    PNG-8 ロゴなど色数少ないもの・透過させたいもの
    PNG-24 色数が豊富でなおかつ透過させたいもの
    GIF 色数の少ないもの・GIFアニメーション
    SVG レスポンシブなど拡大縮小を伴うもの

    上記表内のJPEG、PNG、GIFは「ラスタ形式」というもので画像の拡大縮小が伴うと劣化しちゃいます。大きくするとギザギザして汚くなる感じ。画像がボヤケて割れる、みたいな。

    しかしSVGは「ベクトル形式」というもので画質が荒くならないのが特長。近年のWEB制作において大変重宝されているファイル形式です。

    ⑥「色」の基本概念

    カラフルな色彩・RGBのイメージ

    そして、WEBサイトの「色」のお話を。

    パソコンやスマートフォンのディスプレイは光で色を表現するため、光の三原色である「RGB」モード使います。

    RGBとは、

    「 Red(赤)Green(緑)Blue(青)」の頭文字。

    WEBサイトに限らずテレビや電飾系の看板など「光るモノは三色=RGBで構成されている」と覚えておけばOKですよ。

    反対に「光らないモノ=チラシや雑誌」は「CMYK」で作成します。CMYKは「色の三原色」と言われ「シアンCyan・マゼンタMagenta・イエローYellow」+「Key plate=キープレート(黒・墨)」の頭文字。

    WEBサイトでは使うロゴやイラストなどなどは「ディスプレイを通して光るモノ」なので全て「RGB」で作成しましょう。CSSで色の指定をする際はRGBの値を採用します。

    ⑦「ドメイン」とは?

    パソコンの画面

    ドメインとは「◯◯◯.com」や「◯◯◯.net」などのURLのhttps:// 以降の部分のこと。

    ドメインはサイトの「住所」であり、WEBサイトをブラウザで表示するにあたって、サーバーサイドとのやりとりには欠かせないモノです。

    ドメインは過去に取得されたものでなければ自由に文字列を決めて取得可能で、世の中で公開されている全てのサイトに付されているものです。

    もっと詳しくは『「ドメインとは?」をわかりやすく説明。取得効果や注意点も。』をどうぞ。

    ⑧「サーバー」とは?

    サーバーのメンテナンスをする人

    これまでご説明してきた「文書や写真のファイル」らをまとめて格納できるのが「サーバー」です。

    HTMLファイルだったり、JPEGファイルだったり、動画ファイルだったりを置いておける場所。

    ブラウザでユーザーがボタンを押したり、テキストのリンクをクリックするという「リクエスト」をすると、その「指示」を受けたサーバーが可動します。

    サーバーの中に補完されたデータから、リクエスト通りのデータをブラウザに転送するんです。この動きが1秒以下で行われてくのは、みなさんもネットサーフィンをしていて体験済みと思います。

    たまに、読み込みが遅いサイトもありますが、それは「素材」が多すぎたり、回線が混んでいてリクエストがなかなかサーバーに届かなかったりサーバーからの返答が詰まってしまったりするからなんですね。

    WEBサイトで言うと「DNSサーバー」と「WEBサーバーが必要です。このあたりのお話は『【図解つき】「サーバーとは?」をわかりやすく説明するよ。』をどうぞ。

    WEBサイトの構成要素の解釈はさまざま

    折りたたみスマホで見るWEBサイト

    今回は「WEBサイトって何で出来ているの?」をお題に「8つの基本要素」に分けてご説明しました。

    もちろんそれぞれの項目で何記事も書けてしまうほどのものだったりしますが、やりすぎると混乱するだけなので、今回は割愛し「全体像感」を優先しました。

    また、WEBサイトの構成要素というお話でいくと、例えば「WEBフォント」なども挙げられますし、HTMLもCSSもJavaScriptなども細かく見ていくとキリはありません。

    さらに実際の制作や開発が始まるとテキストエディタはもちろん、GitやGitHubなどの業務効率化ツールなどの知識も必要になってきます。

    WEBを取り巻く要素に際限はありませんが、今回はどちらかというと「制作視点」に重きを置いた内容とさせていただいております。

    まずは今回のようなおおまかなルールや要素をつかんでおくと、もう一段細かい話になったときに、だんだん点と線がつながってくるので、少しづつ慣れていきましょう。

    プログラミングは「コンピューターへの指示出し」

    プログラミングするエンジニア

    プログラミングとはコンピューターに指示を出すこと。

    正しく指示を出しておく(=適性な開発言語で適性な記述をする)ことで、24時間365日コンピューターは動き続けます。

    その「指示」を書く行為がコーディングでありプログラミングなんですね。

    ビジネスや娯楽や趣味など、千差万別の目的を持つ企業や個人のクライアント。そんな顧客たちが希望するWEBサイトの「見え方」「操作性」を”デザイン”していくのがエンジニアの仕事になります。

    エンジニアの仕事は大きく分けて2つ。WEBサイトでユーザーが見る表面を担う「フロントエンド」そしてシステムやサーバー等の裏方を担当する「バックエンド」。

    フロントエンドでもバックエンドでも、まずは基礎プログラミングの理解が必要になります。

    本日ご紹介した内容は無理やり暗記などする必要はありません。実際にはマークアップ作業をしながら、少しづつ目で見て体験しながら覚えていけるものばかりです。

    きっと少しでもプログラミングの世界に触れたら、当たり前のこととして身につく考え方なのでご安心ください。

    メンターを「レンタル」して学ぶ

    ブラウザを開いてインターネットをする人

    本日ご説明したそれぞれのお話は、実際には自分で触れて体験すると「なんだそんなことか」となることなので、現時点で忘れてしまっても大丈夫です。繰り返しで自然と身につきます。

    当サイト「メンタレ」は「メンターをレンタルできる」サービス。

    独学の途中からや、挫折したところから、メンターがあなたのための「講座」を考え、実践的に教えます。

    オンラインのマンツーマンだから、動画教材やチャット質問のような自学自習を強いられずに「学ぶ、吸収する」ことに集中できる。

    入学金諸々でトータルの学費を高くしたり、脱落者を出すようなことはしていません。講座は1講座からでもOK。

    「自分の弱みだけを克服できる」から、学費も最低限。

    オンラインでマンツーマン、あなた専任の担当講師からプログラミングの基礎を学べます。

    まずはとっかかりとして。まずは体験として。だけど、どうせやるならしっかりと学びたい方に。

    「メンタレ」がプログラミングの一歩目をお手伝いいたします。お気軽にお問合せください。

まずはLINEで
お問合せ