初心者でもわかるWebページの仕組み

一体どうやってできているんだ？

中小企業でもマーケティング担当がいたり、WEB担当の課があったりと、WEBに関して外注に出すのではなく、内部に担当を持つようになってきています。
僕が働いたところそうでしたが、ひたすらHTMLの作成を行う事もあれば、クライアント様とお会いして、サイトの構成やそのサイトの目的などについて明確にしておく必要があるなど、人付き合いも必要だし、一人でこつこつとじっくり仕上げていく事も大切、ものすごく多面的な顔を持っていないといけないんだななんて思いながら仕事していました。

正直、最初の頃はある程度パソコンの知識がある僕でも、WEBページってどんなふうに構築していくんだろう？仕組みってどうなっているんだろうなんて思っていたので、これからWEBの世界に入っていくという人や、IT企業に勤めるため、少しWEBページ、WEBサイトの事を知っておきたいと思う方に、Webページの仕組みをご紹介します。

HTMLを理解しないと始まらない

Webページを作る時、どうしても必要になるのがHTMLの知識です。
これはHyper Text Markup Languageという言葉の略ですが、head・body要素を含んだ言語で、この言語によってWebページの文書が構成されています。

Webページではまず、文書宣言と呼ばれる規定の文字を入れます。
この文書宣言の文字を入れることでHTMLの文書をこれから書き始めますよと知らせることになります。
文書宣言はです。

次にどんな言葉でサイトを作るのかという事を規定します。
日本語でサイトを書くのなら、japaneseを表す「ja」が入ったHTMLを作る事が必要で、言葉を表すのはlanguageで「la」、通常日本語は左から右に書いていきますので、方向の属性を表すdirでタグはltrです。
Ltrは左から右、つまり「left to right」を短縮した形です。

文書に対する情報をいれる時にはheadというタグを利用します。
最終的に文章に関する情報の記入のはじまりが終わりがです。
こうした規則に沿って属性をしっかり記載し、HTMLを書いていきます。

CSSって何だろう

こういう横文字で決まりをいろいろ設定していくというのがWebサイトの面倒なところですが、決まり切っていることを丁寧につなげていけば、間違いなくWebサイトができるという事で、理解してしまえば構成はしっかりわかるようになります。
問題は一言一句間違えないことです。
たった一文字間違えてしまったことでおかしなページになるんです。

思わず「ぷっ」と笑ってしまうページになったこともあり、また原因がわからないのに表示されないという事もあったりで、ミスを見つけるまでが大変だったりしました。
HTMLのタグをぱっと作れるソフトとかも、今はあるんですけど、構成などをしっかり考えておかないとこれもまた選択が出来ないので、知識は必要です。

さて次にCSSですが、これもWebページに欠かせない言語で、Cascarding Stile Sheetsを略し、「CSS」といいます。
HTMLはWebページの中の「文書」について規則を決めていくというものですが、CSSはHTMLと違い、文書に利用する色、大きさ、構成などデザインに利用する言語です。
このCSSとHTMLについての知識を持ち、お互いそれぞれが独立した表記になっているため、関連付けをしていく事も必要なのです。
全く違う別々の表記があるだけ、という状態を関連付けを行っていくことで、HTMLで定義したページ内の文書構造について、CSSによって色、大きさ、構成などが作られていくというイメージです。

絶対に必要となるスクリプト言語

スクリプト言語の代表者は「Java Script」です。
Webページの動きを指示し、円滑に動かすために必要不可欠な言語で、このプログラミング言語についてスクリプト言語といい、文書のタグ付で利用するHTMLなどはマークアップ言語という言葉で表されています。
なんだか複雑な言葉ばっかりで意味不明・・・と思う方も多いかもしれないけれど、ここはとても重要なところなので、しっかり本とか読んで、詳しくなっておく方が将来、仕事していく上でとても役立つ知識となるはずです。

Javaは静止しているサイト、つまり全く動きがなく面白味のないサイトを動きのあるいきいきしたサイトに作り上げるために作られた言語で、これを利用するとサイト内に動きが出て、ただ情報を収集する要素というよりも、目で見ても楽しめるわくわくするサイトを作り出すことができるのです。
この他にも覚えておくべきことは多数ありますが、少しずつ専門書などを読み解き、実際に自分でHTMLなどを書いて、ページを作りながら勉強していくとわかりやすいです。