こんにちは。Yukkyです。
今回はHTMLを活用したWebサイトの作り方というテーマに沿って、実際にWebサイト構築・運用をしている僕が要点を踏まえて説明したいと思います。
この記事は、こんな悩みや疑問を持った人に向けて書いた記事です。
- Webサイトを作りたいけど作り方がわからない。
- Webサイトを作りたいけどHTMLのことが良くわからない。
この記事を通して少しでも参考になっていただければ嬉しいです。
そもそもHTMLとはなにか。
まずはじめに、Webサイトの作り方を解説する前にそもそもHTMLとはなにか？という所を解説しますね。
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い。SGMLを元に開発された。World Wide Web
(WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。
引用：ウィキペディア
上記の通り、Webページを構築する際にWebサイトの中身となる部分を組み立てる為の言語になります。
大きな括りで言うとプログラミング言語と呼ばれる事もありますが、厳密に言うと分けて考えられていて、マークアップ言語と呼ばれる事が多いです。
HTMLの歴史で言うと、1990年に誕生してから徐々にバージョンアップを重ねていき、今ではHTML5という仕様が主流となっています。約30年の歴史の中でどんどん進化しています。
僕がよく後輩や新人にHTMLの話をするときは、Webサイト内にあるページの骨組みとなる部分と説明しています。
建設で例えると、家を建てるときの骨組み・鉄骨・壁になる部分ですかね。
そしてWebサイト構築の場合はHTMLにタグという要素がでてきます。
そのタグに対する意味や役割を理解した上でコーディング(マークアップ)していくことでSEO対策の最適化や後々のサイトパフォーマンス(サイト読み込みスピード)に影響が出てきますのでタグの理解は非常に重要です。
ちなみに余談ですが、HTML以前の話をするとそもそもインターネットとは戦争で活用されていた軍事用通信システムなんですよ。
HTMLを使ったWebサイトを作る手順
次はHTMLを使用して実際にWebサイトを作る手順について解説したいと思います。
Webサイトを作るという観点で言うと、HTMLだけ分かっていてもサイトは公開できません。
HTMLを組み込んで一つのWebサイトを作るための土台となる環境が必要になってきます。
まずはその環境準備から説明しますね。
環境の準備から始めよう。
Webサイトを作る際の環境でまず必要な要素は下記になります。
・サーバーの準備
・HTMLコーディングをする為のエディタ
・サーバーにHTMLファイルをアップロードするためのFTPというツール
順を追って解説します。
ドメインの準備
ゼロからWebサイトを構築する場合はドメインというのを準備する必要があります。
仮に既存サイトを更新することを想定していたとしても、ドメインの事は理解していて損は無いです。
ドメインとは簡単にいうと、Webサイトの住所を示すアドレスのことを言います。
例えば日本最大級のポータルサイトであるyahooにアクセスするときは、https://www.yahoo.co.jp/ というURLにアクセスしてWebサイトのページが見れるようになります。
普段Googleとかで検索すれば検索結果にテキストベースでYahoo! JAPANというリンク表示が出てくるのでそのテキストをクリックすればサイトが見れるようになりますが、実はクリックしているのは https://www.yahoo.co.jp/ というURLなのです。
そして、yahooのドメインはyahoo.co.jpになります。
このyahoo.co.jpをの裏側では182.22.25.252というアドレスがあって、この数字をわかりやすくして識別しているのがドメインです。
ゼロからWebサイトをつくる、初めてのWebサイト制作の場合は、このドメインを取得するところから始まります。
ドメインを取る方法は別記事で詳しく紹介しますが、お名前.comというサイトで取得刷ることができます。
サーバーの準備
次に必要なのはサーバーの準備です。
サーバーとは、Webサイトを表示したり動かしたりする際に必要な情報を格納しておく場所のことを言います。
情報を格納する大きな箱だと思ってください。
本来、Webサイトにアクセスしたら、そのWebサイトの情報をサーバーから呼び出して表示させる仕組みになっています。
このサーバーが無いとWebサイトを作ってもインターネット上に公開することができなくなります。
このサーバーについても、勉強していくとものすごく奥が深いです。
サーバーによってはサイト速度の大幅な改善も見込めます。
ちなみに、個人でつくるWebサイトや中小規模のWebサイトを作る場合はConoHa WINGというレンタルサーバーが速くておすすめです。
HTMLコーディングをする為のエディタを用意する
ドメインとサーバーが準備できたら、実際にHTMLファイルを作ってコーディングを進めます。
その際に、必要なのはHTMLコーディングしやすいテキストエディタを用意することです。
HTMLコーディングは数あるタグやテキストをひたすら書いていく事になりますので、メモ帳等でコーディングを進めるよりは、コーディングに特化しているエディタを使用する方が快適に作業できるので別で用意する事を推奨します。
おすすめのエディタは下記４点です。
・SublimeText
・秀丸
・Atom
各エディタについては別で詳しく紹介したいと思いますが、初心者の場合は、Adobe Dreamweaverか秀丸をおすすめします。
Dreamweaverは簡単にかつ直感的にコーディングを行うことが可能なエディタになりますが、簡単にできるのでHTMLコーディングを身につけるスピードが早いです。
秀丸は、HTMLの予測変換などの機能がDreamweaverに比べたら全然少ないですが、実際にタグを書いて、HTMLをしっかり理解して身につけて行きたい人におすすめです。
結局はHTMLの記述をたくさん書かないと覚えないので、ゆっくりでも良いのでタグや構造を理解して噛み締めながらコーディングしましょう。
FTPのインストール
HTMLコーディングができたら、HTMLファイルとして保存します。
その保存したHTMLファイルをサーバーに転送する際に必要となるツールがFTP(File Transfer Protocol)です。
このFTPがないとせっかく作ったファイルをサーバーに転送することが容易にできないので、インストール刷ることをおすすめします。
Windowsであれば、FFFTPやWinSCPというFTPツールがあります。
Macであれば、Filezillaというツールがおすすめです。
まずはエディタを使ってHTMLコーディングをしよう。
一通り、Webサイトを構築刷る際に必要な環境構築ができたら、後はどんどんコーディングして、
各ページのHTMLファイルを作って行きましょう。
ランディングページや小規模のWebサイトであれば１ファイルから10ファイルくらいあればWebサイトとして機能します。
ランディングページは１枚のHTMLファイルでもOKです。
ブラウザでHTMLコーディングしたページ反映を確認しましょう。
HTMLコーディングが完了したら、FTPを使ってWEBサーバーにアップロードします。
アップロードが完了したら、取得したドメインにアクセスしてブラウザ上で表示の確認をしましょう。
※ブラウザとはGoogle ChromeやSafari、Edge等アプリケーションの事を指します。
実際にブラウザ上でページを確認してみると、初めのうちは想定していた表示にならないことが多いです。
僕自身は初めの内は全然うまくいなかったので、ブラウザで確認しては手元にあるHTMLファイルを修正して再度アップロードし、再確認する。この繰り返し（トライ＆エラー）を行っていました。
この作業を行っているとだんだんHTMLの仕組みや構造、タグの理解が深まりWebサイト構築の基本が身についていくと思います。
という訳で、今回はHTMLを活用したWebサイトの作り方というテーマに沿って解説しました。
たくさんのページ数を要するWebサイトを作る場合はCMSといったシステムを使ったりするのですが、今回はその基本となるベーシックなHTMLを使ったWebサイトの作り方についてでした。
この基本的な作り方を身に付ける事で、今後Webに関わる上でどんどん応用が効くようになりますので、ぜひトライしてみてください！
今回の記事が少しでも参考になれば幸いです。
それではまた！
コメント