HTMLは最もポピュラーなプログラミング言語であり、ホームページを自分で作成するためには欠かせない言語です。
本人のスキルレベルに応じて作成できるモノのクオリティも異なりますが、上達のために最も有効な方法はとにかく自分でWebページを作ってみることであることも確かです。
今回はそんなスキルアップを目指しているHTML初心者に向けて、HTMLでHPを作成するのに必要な環境や最低限の言語についてご紹介していきます。
記事のもくじ
HTMLでホームページを作る
HTMLはWebページを作るために使用される言語で、日本でも義務教育課程のプログラミングの授業では多用される言語の１つです。
HTMLの運用は簡単
HTMLの運用は、その難易度が他の言語に比べると非常に容易であるとも言われます。
簡単であるとされる理由として、実はHTMLがプログラミング言語ではないということが挙げられます。
HTMLは厳密に言うとマークアップ言語と呼ばれる言語の一種で、コンピューターにプログラムを読み込ませるための構造化を行う役割を果たします。
言わばフレームワークを生成するための言語でもあるのですが、何事もディテールを極めるよりも、その入れ物を作る方が簡単なものです。
HTMLの習得が容易なのは、単に箱を作っているだけだからと言うこともできるでしょう。
HP作成に必要な工程
HPの作成にHTMLが不可欠なのはもちろんですが、これだけで完成させることはできません。
いわゆるプロレベルのホームページを作成するためには、多くの工程をまたぐ必要が出てきます。
何の、どのようなサイトを作るのかを企画し、どのような設計にするのかといった構造をまとめ、コンテンツが決まって初めてコーディングにたどり着きます。
そしてインターネット上にサイトを一般公開するためには、専用のドメインを取得し、サーバーを借り、ファイルをアップロードして初めて行うことができます。
このようにホームページの作成には実に多くのプロセスを必要とし、HTMLが登場するのは一部分にすぎません。
しかしそれでもやはり最も肝心なプロセスがHTMLとなるため、実際に手を動かせるスキルや人材は貴重です。
クオリティの高いコーディングができるかどうかで企画していた通りのものができるかにも違いが出てくるため、欠かせないスキルであることには違いありません。
テキストエディタを用意しよう
HTMLに限らず、コーディングに欠かせないのがテキストエディタの存在です。
様々なプログラミング言語に向けたエディタが主に活用されていますが、最近ではHTMLに特化したHTMLエディタも見かけることが増えてきており、Webデザイナーなどには非常に重宝されています。
通常のメモ帳などでもコーディングは可能ですが、これらのエディタを利用することで、WordやPagesなどの書類作成ソフトに比べて軽快に動くため、ストレスフリーな運用が可能です。
あるいはコードエラーを指摘してくれたり、タグを自動的に保管してくれたりなど、ケアレスミスを防止したり効率化を図ることが出来る能力を有しているため、ミスの多い初心者にはもちろんのこと、作業効率の追求が重要になる上級者にもありがたい機能を有しています。
有料・無料を問わず様々なエディタがありますが、無料であれば「StyleNote5」「Sublimetext」がオススメです。
シンプルなインターフェイスで単純操作しかしない初心者にも優しく、無料での運用が可能なため、手始めのソフトとしてはオススメです。
HTMLでのホームページの基礎を作成しよう
続いてはホームページの基礎の作り方について、少し見ていきましょう。
htmlタグを理解する
HTML言語において最も重要となるのが、タグの存在です。
タグとは<>で囲まれている英数字のことを指しており、タグによってWebサイトは構築されています。
タグは基本的に２つで1セットとなっており、後部のタグは</>といったように/(スラッシュ)が含まれています。
ソースコードを眺めるときは<>と</>の間に何が挟まっているのかに注目すると理解しやすいでしょう。 そしてHTMLの基礎となるタグがhtmlタグです。
htmlタグは、ここからhtmlのコーディングが始まるということを示すタグで、コード全体の一番初めに<html>を置き、コード全体の一番最後に</html>を設置します。
つまりが意味するのは「ここからhtmlのコーディングが始まります」ということ、そして</html>が「ここでhtmlのコーディングが終わります」ということになります。
htmlのタグの中へさらにタグを細かく入力していくことで、豊かなホームページを作成していくことができます。
headタグについて
headタグはhtmlタグの次に指定することになるタグで、ヘッダ情報を記載します。
headタグの中に記載された情報は、直接Webページ公開されることはありませんが、コンピューターが処理する際に「このコードには日本語が使われている」ことや、文字のエンコード情報、ページ作成者の名前などを読み込ませるために活用されます。
例外的に、titleタグはテキストのタイトルとしてwebページに登場するため、覚えておきましょう。
bodyタグを知る
続いてはbodyタグです。
bodyタグはWebページに表示するテキストや画像などを記述する際に必要なタグで、この中には様々な要素を詰め込むことができます。
文書の色や背景色、リンクが記載されているテキストの色などを指定することが出来るため、簡単なWebサイトであればbodyタグをうまく使うことでホームページにバリエーションを持たせることができます。
これらを指定する場合、テキストの文字の色、未読のリンク箇所の色、既読のリンク箇所の色、リンクをクリックした時の色、背景色、壁紙をまとめて指定することが推奨されているため、たとえ変更の必要がなくとも記述の際には全てを記載しなければなりません。
HTMLで少しリッチなホームページを作成する
次に紙一枚のテキスト文書だけではなく、画像や新しいページを挿入する方法も記載しておきます。
画像の挿入
htmlは使いたい機能ごとにタグが用意されているため、タグの引き出しを頭の中に増やせば増やすほど、バリエーション豊かなサイトを構築することができます。
たとえばimgタグは、画像をサイトに表示させる際に多用されるタグの１つです。
HTMLファイルに含まれる画像データを呼び出すためのタグで、imgタグを設置することでサイトに画像を設置することができます。
側から見ると何が起こっているのかがよくわからないかもしれませんが、imgタグが他の場所に保管されているデータを引っ張ってくるためのパスを形成してくれるような仕組みになっています。
画像はwebサイトには欠かせない存在であるため、覚えておきたいタグの１つです。
ページの追加
トップページだけでなく、自己紹介のためのプロフィールを掲載するページを増設することも容易です。
ページの追加は新しいhtmlページを作成し、ハイパーリンクの設置することで可能になります。
加えて、データを保存しているフォルダにも新規に小フォルダを作成し、各リンク先のページのコードをそこに保管しておく必要があります。
HTMLはコーディングだけでなく、どこのフォルダにどのコードを保管しておくといった整理する能力も問われるため、ここでつまづいたりケアレスミスで何時間も悩んでしまうというケースも珍しくありません。
コーディングが完璧なのにページが表示されないといった場合は、フォルダ管理に目を向けてみると良いでしょう。
サーバーを用意して作成したHTMLのホームページを公開しよう
コーディングが終わったら必要になるのが、サーバーの存在です。
なぜサーバーが必要なのか
コーディングの作業は自分のPCで行い、データも全てPCに保存しているため、インターネットへ一般公開するためにはそのためのコネクションを持ったサーバーへアップロードする必要があります。
個人のPCではストレージにも限界があり、常にPCを稼働させていなければWebページとしての体裁を保つことができないため、Webサーバーの存在はもはや不可欠と言えるでしょう。
普段私たちがインターネットで様々なWebサイトを閲覧する際、そのサイトのアドレスが表示されるかと思いますが、アドレス(住所)というワードが使われている通り、Webページを表示するためにはそのサイトの住所をインターネット上に登録する必要があります。
そのためにもサーバーを利用する必要があるのですが、サーバーにも種類があり、Webサーバーのようにソフトウェアそのものを指す場合と、データを保管しておくストレージとしてのサーバーがあります。
後者のサーバーが広義のサーバーで、Webサーバーのようなソフトウェアも内包しています。
いわゆるレンタルサーバーは広義のサーバーを指しており、これを１つ借りるだけでメールやWebサイトの公開、など、様々なインターネットサービスを利用することができるようになります。
初心者にオススメのサーバー
サーバーは自前で用意することは非常にコストがかかるため、大企業などであればかろうじて自前のサーバーを運用しているほどです。
一般的なのはレンタルサーバーを借りて、月々の利用料金を支払いながら運用を進めていくというものです。
月額料金を支払うだけで好きなだけ使うことができ、必要がなくなれば契約をストップさせるだけで良いため、使い勝手が良くオススメです。
その種類や値段もピンからキリまでありますが、オススメなのはコストパフォーマンス重視で選ぶという方法です。
たとえばMixhost(ミックスホスト)は月額料金が980円スタートで大量アクセスへの耐性も高く、セキュリティ強化にも力を入れているため、個人はもちろんんこと企業の紹介ページほどであれば十分な活躍が期待できます。
運用実績で選ぶなら、Xserver(エックスサーバー)が非常にポピュラーで、定評のあるレンタルサーバーです。
月額費用は1000円で、初期費用として3000円が徴収されるものの、ディスク容量は200GB、マルチドメインも無料、さらには無料お試し期間も付与されているので、初心者でもとっつきやすいサーバーとなっています。
メールサポートや電話サポートと、初心者にはありがたい運用についての問い合わせチャンネルも充実しているので、初めてのレンタルにはオススメの一台です。
法人向けのプランも充実しているため、個人からの運用でスタートし、軌道に乗ってから法人に切り替えるという使い方も有効です。
クラウドサーバーについて
最近ではクラウドコンピューティングに適したサービスも広く見られるようになり、クラウドサーバーの運用を考える人も増えてきました。
クラウドサーバーのメリットは、何と言っても従量課金制であることです。
レンタルサーバーは初めからサーバーのスペックが決まっているため、それを持て余すも限界まで使い込むも自由ですが、余剰スペック分が無駄になってしまうケースも見られます。
一方でクラウドサーバーの場合は必要な分だけCPUやストレージなどを確保することができるため、自由に拡張や増減を調整することができます。
小規模に展開したい場合はもちろんのこと、一時的なアクセス数増加にも柔軟に対応できるのがクラウドサーバーの強みです。
代表的なサービスとしては、「さくらのクラウド」などが挙げられます。
まとめ：HTMLはホームページ作成の根幹
ホームページ作成には多くのプロセスと準備が必要になりますが、その根幹となるのがHTMLによるコーディングです。
HTMLでしっかりコーディングが行えるようになれば、自ずと優れた Webサイト作りが可能になるため、まずはここをしっかりと勉強することをお勧めします。
英語でプログラミングを学べるKredo
英語×プログラミングのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×プログラミングをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で学ぶ「KredoIT留学」を提供しています。これまでの卒業生は2,000名を超え、卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×プログラミングのスキルを身につけてグローバルに活躍しませんか？
