Webサイト構築に必要な知識をご紹介

最近プログラミングの需要が高まってきており、WEBデザインに挑戦する人も多いと思います。
そこで、プログラミング初心者向けにWEBサイト構築に必要な知識、手順をまとめていきます。

それでは、早速学んでいきましょう〜。

これから説明する内容はこちらの本を参考にしていますので、より細かいところまで理解したい人は参考にしてみてください。個人的にはすごいわかりやすかったですw。

スラスラわかるHTML&CSSのきほん 第2版

WEBサイトとは

そもそもWEBサイトってどういう仕組みで、どういうプログラミング言語でできているのかご存知でしょうか。
Webサイトを構築する上でこれだけは知っておいてほしいという知識を説明していきます。

Webサイトの仕組み

「Webサイト」とは、皆さんが日頃からスマホで検索しているインターネット上のサイトのことです。さすがにこれはご存知ですよね。

また、「Webページ」というのも聞いたことがあると思いますが、実は「Webページ」の集合体が「Webサイト」と呼ばれています。
「Webページ」は、ページごとに一意のURLというアドレスが割り振られていて、そこにアクセスしてときに表示されるページのことを指すんですね。

Webページを開くには

実際にページを開くには、ブラウザと呼ばれるアプリケーションを利用します。
種類としては、ChromeやIE、Safari、Firefox、Edgeがあり、圧倒的に利用されているのはChromeですね。

IEも有名でしたが、Windows10からEdgeが利用されるようになり、利用率が下がっています。
利用率が低いブラウザほど、新しいアプリケーションに対応していないことがあるので、なるべく利用率の高いブラウザを利用することを勧めます。

また、個人的にも利用率が高いだけあって、Chromeが使いやすいと感じています。
拡張機能も充実しているので、必要に応じて追加してみるもの良いと思います。個人的には、画面全体のキャプチャを取るツールくらいしか使っていませんが笑。

Webページの構成要素

先ほど、WebサイトはWebパージの集合体と説明しましたが、具体的にWebページが何からできているのでしょうか。

正解は、WebページはHTMLファイルからリンクされた複数のファイルで構成されています。
具体的には、このようなファイルから構成されています。

①HTMLファイル
Webページを作る上で必ず必要なファイルです。HTMLファイルは、HTML（Hyper Text Markup Language）と呼ばれるプログラミング言語で記述され、ページに表示するテキストや画像を表すことができます。

②画像ファイル
いわゆる、スマホやデジタルカメラで撮影したデジタルの写真のことを指します。主に、jpgやpng、gifなどがあり、Webページ上で利用することができます。

③CSSファイル
HTMLで記述したテキストや画像をスタイリングするファイルです。例えば、テキストに色をつけたり、大きくしたり、表示する位置を変えるなど画面のスタイルを変えることができるのがこのCSSファイルです。
また、CSS（Cascading Style Sheets）は、HTMLと異なる言語で、Webサイトを構築するには、セットで理解しておく必要がありますので、一緒に学んでいきましょう。

準備

Webサイトとは何かを理解いただけたということで、早速HTMLを記述していきましょう。と言いたいところですが、最低限準備が必要なので、この章では、準備編として、ツールの紹介をしておきます。

エディタの紹介

SubrimeText
https://techacademy.jp/magazine/3060

ATOM
https://www.sejuku.net/blog/450

基本的に無料で利用でき、日本語表示で利用することも可能で、何より、入力補完や自動でインデントを調整してくれる機能があるのが嬉しい点です。
メモ帳などのエディタを利用して開発するのもいいのですが、HTMLやCSSを記述したいときに、途中まで入力すると予測結果が出てくれるので、打ち間違えも減り、効率よく開発できるので、ぜひ使ってみてください。

ちなみに私はSubrimeTextを利用しています。（^^）

まとめ

今回はWebサイト構築のための基礎知識とプログラミングを行う上での準備編をお話しました。

次は実際に、HTMLとCSSを記述していきたいと思います。

それでは、また。