あなたはウェブサイトの仕組みを知っているだろうか。
今や、世界中がインターネットで繋がる時代。
スマホがあればどこにいても世界中の情報が手に入れられる。
物を注文すれば翌日届く。友だちに近況を報告することができる。ホテルの予約がその場で取れる。電車に乗れる。
しかし、あなたはウェブサイトがどういうメカニズムでできているか知っているだろうか。
今回はウェブサイトの仕組みをシンプルに解説していく。
今回の内容
ウェブサイトが表示される仕組み
あなたが普段見ているウェブサイトは、世界のどこかにあるサーバーというコンピューターに保存されている。
そのサーバーに対して、あなたがパソコンやスマホのブラウザ(Google ChromeやSafariなど)を介してアクセスし、表示されている。
実際のところ、あなたのパソコンやスマホが全てやってくれていることなので意識することは普段ないが、こういう仕組みでサイトを見ることができている。
ウェブサイトを構成している言語
構成している言語は2つしかない。
構成している言語
- HTML
- CSS
言語と聞くと「覚えなくてはいけないのか…」と身構えるかもしれないが、その心配はない。
ここでいうウェブサイトを構成している言語は、厳密にはプログラミング言語ではないので、よく聞くアルゴリズムや論理的思考などとは無縁である。
覚えることもやることもほぼ決まっており、やる気と少しの努力があれば誰にでもできるもの。
その他必要なもの
- ブラウザ(作成したものを表示するだけなので1つあればOK)
- Google Chrome
- Safari
- Firefox
- テキストエディタ【全て無料】
テキストエディタとは言語を書くことに特化したソフトのこと。
基本的にはテキストエディタを使って書いていくのが一般的。
他にもあるが、今回はよく使われているエディタをご紹介した。
ちなみにテキストエディタでなくても、パソコンに最初からインストールしてあるメモ帳を使って書くこともできる。
Windowsなら「メモ帳」、Macなら「テキストエディット」だ。
しかし、これらはただのメモ帳。
テキストエディタのように色分けや行番号がないのでオススメはしない。
構成言語を詳しく見ていこう。
HTML
htmlとはHyper Text Markup Languageの頭文字をとったもの。
文章の構造を作ったり、画像を表示するなどウェブサイトの構造作りにはかかせない。
今あなたが見ているこのブログもhtmlによって構成されている。
書き方はタグというものを使って書く。
実際に書いてみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブサイトの作り方</title>
</head>
<body>
<h1>ウェブサイトを作ってみよう！</h1>
</body>
</html><と>で囲まれたものがタグと呼ばれるもので、titleやbodyというのがタグ名となる。
htmlはウェブサイトに表示される部分と表示されない部分があり、基本的にウェブサイトはbodyタグの中に書かれたものが表示される。
なので今回の場合、薄く線が引いてある部分のみが表示される。
ちなみにindex.htmlというファイル名の○○.htmlは拡張子といってファイルの種類を表すもの。
今回は、htmlファイルということになる。
このhtmlを実際にブラウザで表示してみる。
bodyタグ内に書かれていたh1タグの内容が表示された。
ちなみにh1タグとは見出しを表すタグのこと。
その他たくさんのタグがあるのだが、最初から全てを覚えようとするのではなく、作成していく過程で必要な時に覚えれば問題ない。
CSS
cssとはCascading Style Sheetsの頭文字をとったもの。
htmlは文書の構造を作るが、cssはその文書の装飾をする。
htmlだけでは質素なものになるので、cssを使って見た目を整えていく。
先程のhtmlに追加してみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウェブサイトの作り方</title>
</head>
<body>
<h1 style="color: red;">ウェブサイトを作ってみよう！</h1>
</body>
</html>先程のhtmlと同じように見えるが、薄く線を引いてある部分に<h1>にstyle=…と追加した。
これはh1タグに対して、cssを適用したという意味になる。
実際にブラウザで表示してみる。
先程のhtmlだけでは黒文字だったのが、赤い文字に変わった。
これがcssの役割である。
こうしてcssを使ってhtmlだけではできない装飾を施し、見た目を変える。
今回は文字色を変えただけだが、文字の大きさを変えたりやアンダーラインを引いたり、背景を変えたりなど多くのことがcssを使うことによってできる。
ウェブサイト制作の流れ
ここまでウェブサイトを構成している要素を簡単に紹介してきたが、ここからはウェブサイト制作の流れを紹介する。
「覚えることが多くて大変だな」と思うかもしれないが、実際、流れなんて覚える必要はない。
なぜならやっていくうちにわかるものだから。
しかし、ここではあえて紹介する。
流れを知らないのと大体の流れが知っているのとでは後々大きな差が出るため。
ウェブサイト制作の流れ
- サイト設計を考える
- htmlとcssを書く(コーディング)
- サーバーを用意
- 作成したhtmlとcssをサーバーにアップロード
- ウェブサイト公開
なお、今回はドメインの設定は行わずに説明する。
ちなみにドメインとはサイトの住所のようなものだ。
では、順に見ていこう。
1.サイト設計を考える
「サイト設計を考える」なんて少し大げさな言い方だ。
しかし、やることは実際簡単。
サイトに必要な情報を分けて、各ページのどこに何を配置するかを考えるだけのこと。
会社のウェブサイトを作るとしたらこんな感じ。
- 会社の概要
- 商品
- お知らせ
- お問い合わせ
上記のような感じで情報を分けて整理する。
次にワイヤーフレームを作成する。
ワイヤーフレームとはウェブサイトの設計図みたいなもの。
上記はトップページを想定して書いてみた。
こんな感じで各ページを想定してどんどん書いていく。
どこに何を配置するかを決めておくことで後々困ることが少ない。
これを作るか作らないかでかなり作成の時間は変わるため、最初は面倒かもしれないがやっておいたほうが絶対いい。
ちなみにワイヤーフレームはグラフィックソフトで作成すると書いてある本を見たが、それは完全に本末転倒。
グラフィックソフトを操るにも時間がかかるし、覚えなくていけないことがさらに増える。
そもそも初心者にそれもやらせるのは酷。
グラフィックソフトを使ったことのない人はA4サイズの紙や落書き用紙に手書きで書いたほうがいい。
そして、後で余裕が出てきたらグラフィックソフトを使えばいいだけのこと。
「とにかく全てパソコンで済まさなければ」と思わず気楽にやるのが一番。
2.htmlとcssを書く(コーディング)
コーディングとはhtmlとcssを書くことを指す。
情報整理とワイヤーフレームまで書けたら、htmlとcssを書いていく。
最初のうちはタグの使い方や文字の配置方法などに戸惑う。
でもそれは仕方ない。
やっていくうちに何となくわかってくる。
よほど頭がいいなら別だが、誰でも最初はわからないもの。
しかし、大抵の疑問はネットで調べたり本を読んだりすれば解決できる。
3.サーバーを用意
サーバーに作成したhtmlとcssをアップロードすることによってウェブサイトが公開される。
お金が少々かかるが、ロリポップというレンタルサーバーなら月額100円から借りれる。
とりあえず作成したものを公開してみたいという人は借りてみるのもいいと思う。
4.作成したhtmlとcssをサーバーにアップロード
サーバーを借りたら、作成したhtmlとcssをサーバーにアップロードする。
方法としては、ファイル転送ソフトを使って自分のパソコンから借りたサーバーにアップロードする。
ファイル転送ソフトはFTPソフトとも言われ、File Transfer Protocolの頭文字を取ったもの。
このソフトがあればサーバーにアップロードできる。
FTPソフトのオススメ紹介(全て無料)
自分の使用しているパソコンに応じてダウンロードしてみてほしい。
ダウンロードができたら、あとはアップロードするだけ。
レンタルサーバーごとにウェブサイトを公開するための公開フォルダ(またはドキュメントルート)が用意されているので、マニュアルに書いてある通りにアップロードすれば完了。
5.ウェブサイト公開
いよいよウェブサイトを公開する。
と言いたいところだが、ファイルのアップロードができているならすでにウェブサイトは公開の状態になっている。
ドメインの設定を行っていない場合はレンタルサーバーの管理画面に初期のドメインが表示されている場所があるはずなので、それをコピーしてブラウザでアクセスしてほしい。
とにかく手を動かす
ここまでウェブサイトの仕組みや構成、作成方法を紹介してきた。
あとは試行錯誤しながら作っていくだけだ。
もっと詳しく知りたい場合は以下の記事も参考にどうぞ。
【超シンプル解説】CSSの基本
cssはウェブサイトを鮮やかにしてくれる言語。 htmlが大体できるようになったらセットでcssを覚える。 cssもhtmlと同じで全く難しくない。 htmlに対してcssを適用...
余談だが、僕は作成方法がわかって「これから頑張るぞ」という時に一つの疑問が生じた。
自分は一体何のサイトを作ればいいんだ？
という疑問だ。
本やネットで作り方を勉強して、いざ自分が作ろうとなった時、作りたいことがなかった。
何のためにやってきたのかわからなくなった。
もしかしたら、あなたもそうなるかもしれない。
ちなみに僕はどうしたかというと、
自分がかっこいいと思うサイトを10個くらいピックアップして、その中からギリギリ自分でも作れるかなくらいのサイトを真似して作った
スポーツでも仕事でも何でも最初は真似から入る。
そうしてステップアップするしか方法はないと思うので、もしあなたに僕と同じ疑問が出たらとにかく真似をすることをオススメする。
手を動かし続けることでしかステップアップする道はない。
