【第1回】Webページを作るには?「構成を知ってどこまで作るかを決めよう」

WEBページ公開

WEBページは何でできている?

PCでもスマホでもいつでも見られるWebサイト、いろんなサービスのものが作られていますよね。このWebサイトを制作するにあたって、Webサイトが何で構成されているか、どのように作っていくかをこの特集では紹介していきたいと思います。

(Webページがどのようにして表示されるかについては別途紹介します)

Webページは大きく三つのファイルで作られています。

  • HTML
  • CSS
  • JavaScript

どのWebページもこの三つの組み合わせで作られています。Webサイトを作るにはこの三つを知っておくことが必要になります。

HTML,CSS,JavaScriptって?

さて、このHTML,CSS,JavaScript。一体どういうものかというと、それぞれ以下の役割を担っています。

HTML        Webサイトを構成する情報が記載されているファイル。
こちらは別の特集でも紹介します。
CSSWEBサイトのデザインを指定するファイルです。
デザインはWebページでは”スタイル”と呼ばれており、
Cascading Style Sheets=スタイルが連なったシート
(デザイン部分をまとめたシート)の略語になります。
こちらも別の特集で紹介します。
JavaScriptWebサイト上にて動くプログラミング。
主にサイト上で”動き”を見せる時に活用します。
他のプログラミング言語にて「Java」がありますが、
全くの別物なので、混乱しないように注意です。
(よく言われる”メロンとメロンパンくらい違う”というものです)

・・・イマイチよくわからんっていう人は、ヒトの体で例えて以下のような感じで覚えておいてもらえるとまずは良いかもしれません。

人体=HTML

服=CSS

アクセサリー、その他おしゃれ=JavaScript

要するに、最低限「情報を伝える」だけだとHTMLのみでもWebページは制作可能になります!ただ、それだけだとうまく伝わらない&見栄えが良くないので、CSSやJavaScriptも必要になってくるのです。

WEBページの制作手順

この三つを作っていくことがWebサイトを制作することになります。

(制作環境構築などはその他プログラミングと変わりはないので、その他特集をご覧になってみてください)

なので、制作の手順としては、以下になります。

  • 1.サイトの構成要素を決める
  • 2.HTMLを制作する
  • 3.CSSを実装する
  • 4.JavaScriotを実装する
  • 5.サイトを公開する

一度作ったページでも、拡張をしていく場合は1〜5を繰り返していく形になります。この特集では、一通りの流れを紹介していきたいと思います!

WEBページの設計図

さて、Webページを制作するにあたってですが、どうすれば良いかわからない人もいるかもしれません。設計図?ってどう作るんだという人もいると思います。

まずはWebページの役割を整理していき、必要な機能の列挙します。Tech Brookだと、まずこの特集コンテンツが必要であり、その他にもサイトの説明や編集部からのメッセージ、お問い合わせの窓口が必要だと思い、以下の機能を考えました。

  • 特集(プログラミングを手順に沿って説明する機能)
  • このサイトについて(サイト主旨を説明する機能)
  • 編集部便り(特集以外に編集部からのお知らせやメッセージを紹介する機能)
  • お問い合わせ(サイト発展や読者からの疑問解消の為にメッセージを受信する機能)
  • プライバシーポリシー(個人情報を取り扱うにあたっての指針を説明する機能)

これをよりWEBサイトの設計図として考えて行きたいのですが、家系図として考えてみると良いでしょう。

例えば、Tech Brookですと以下のようになります。

親のディレクトリ(フォルダ)に子のディレクトリが繋がっていくイメージです。各世代では”階層”として考えています。

Webページ制作にあたって、必要なものを整理していったら、それをどのようにファイルにまとめていくかを考えていきましょう。

決まりましたら次は具体的にHTMLを書いていきましょう。

コメント

タイトルとURLをコピーしました