サイト作り方無料
それでは、さっそく「サイトの作り方無料講座」の第一回目をスタートしたいと思います。


今回の講座は以下の内容になっています。
  1. まず、webサイトがどのような仕組みで存在しているのかを理解しておこう
  2. サイト作成に必要なHTMLとCSSとは?
  3. サイトを作るための環境を準備しよう
これらの内容をしっかり理解しておくと、今後の理解度が深まると思います。


知っておこう!Webページはどうやって表示されているのか?

2000年代に入ってから猛烈なスピードでインターネットが普及したために、気がついたらネット環境がすでに充実していたという感じではないでしょうか?

サイト作り方無料

ですから、多くの人はインターネットを日常的に利用しているが、その仕組みについてはまったく無知です。


そもそもWebページはどのような仕組みでディスプレイに表示されているのでしょうか?

サイトの作り方を学び、今後、製作者側の立場に立つことを目標にしているのであれば、このようなことについて最低限知っておくべきでしょう。


Webページは世界中のどこかのサーバーに保管されていて、インターネットの利用者がサーバー内に保管されているWebページの情報を引き出すことによってPCやスマホに表示されるのです。


私たちがWebページのURLをクリックすることは、サーバーに向けて「●●の情報を送って!」という要求を送る形になります。

サイト作り方無料

この要求を受け取ったサーバーは、指定された画像やテキストなどのデータを私たちに向けて送り返します。


これをブラウザが表示するわけです。


  • HTTPSとは?


インターネットはコンピューター同士のやり取りですが、これらのやり取りには「決まり事」があります。


このインターネット上の決まり事を「プロトコル」と言います。
とりわけ、先ほどのサーバーがユーザーに向けてWebページの情報を送り返す処理はHTTPS(hypertext transfer protocol over transport layer security)というプロトコル(決まり事)でやり取りをしています。
サイト作り方無料

私たちが見るWebページのアドレスの頭がhttpsで始まっているのはこのためです。


ちなみに、以前は「http」で「s」が付いていなかったのですが、今ではセキュリティーが強化されてSSLの暗号機能が実装されている形が推奨されているため「https」となっています。


サイト作成に必要なHTMLとCSSの仕組みを理解しよう

Webページは基本的にhtmlとcssのファイルで構成されています。
ここで言う「ファイル」とは、作文用紙のようなものであり、このファイルにhtmlやcssなどのインターネット言語を記述することになります。
では、ここで簡単にhtmlとcssのそれぞれの役割をまとめましょう。



htmlとは?
htmlとは、文字や画像を表示したり、サイトを構成するための見出しや段落をタグと呼ばれる要素を使って記述する言語です。



cssとは?
cssとは、htmlで作ったページを装飾する役割がある言語です。


例えばページをレイアウトしたり、文字の色を変えたり、大きくしたり、見出しを帯びで囲ったりしてオシャレにすることができます。


簡単に説明すると、htmlとcssの役割は以上のような感じです。


サイトを作るための環境づくり
① テキストエディタを準備しよう

それでは、サイトを作るためのPC環境を準備しましょう。

サイト作り方無料

以下、windowsの場合です。


webサイトをインターネット上にアップするためには、レンタルサーバー会社などと契約して自分が使えるサーバーを持つ必要がありますが、この工程は最終段階で準備しますので、今は必要ありません。
今あなたがお使いのPC環境に限りますが、自分が作ったWebページを見ることはできますので、大丈夫なのです。
まず、htmlやcssを記述する際にツールを活用すると、タイプミスを防げたり、記述が分かりやすくるので、テキストエディタというツールをダウンロードしてください。


ひと口にテキストエディタと言っても有料のもの無料のもの、さまざまなのですが、無料でおすすめなのが「Terapad(テラパッド)」というツールです。


ネット検索で「窓の杜(まどのもり)」を検索し、Terapadをサイト内検索すると、出てくると思います。

サイト作り方無料

これをPCのデスクトップにダウンロードしてください。

サイト作り方無料

このツールはサイトを作るとき常に起動させるツールなので、デスクトップにショートカットキーを置いておくとよいです。


サイトを作るための環境づくり
② 拡張子を表示させよう

Webページの作成に必要なツールのインストールは以上になりますが、ここで拡張子を設定しておきましょう。
拡張子とは、htmlやcss、あるいは画像ファイル、しいてはWord、ExcelなどPC内におけるすべてのファイルの末尾に本来表示されるものなのですが、便宜上、デフォルトの状態ではこれが省略されてしまっています。
サイトの作成には、この拡張子の表示がないと非常に不便なので、拡張子を表示する設定をしておきましょう。


それには、エクスプローラーを開き「表示」タブを開く→「ファイル拡張子」のチェックボックスにレ点を入れると、PC内のすべてのファイルに拡張子が表示されます。

サイト作り方無料

サイト作り方無料

まず、ここまでをしっかり準備しておきましょう。