ホームページ制作基本の”き”「HTML」

HTMLお手本

 

1.はじめに

企業のウェブ担当者に任命された方は初めに
HTMLという単語に出くわすのではないかと思います。

HTMLとはホームページを構成する基本のプログラミング言語ですが、そもそもそれまでパソコンすらあまり触ってこなかったのにプログラミング言語と聞くだけで、一歩退いてしまうかもしれません。

しかし、複雑怪奇なプログラミング言語をはじめから覚える必要はありません。
要は、基本的な部分を抑えて、後は自分が作ろうと思うホームページのソース(プログラミング言語の羅列)を真似すれば、自然と覚えられるようになります。

今回は、ホームページってそもそもどうやってできているの?ということから、HTMLを使ってできることまで、ホームページの基本の”き”を学んでいきます。

HTMLお手本

 

2.ホームページはこうやってできている


写真にあるようにホームページは画像をベタ張りにして出来ているわけではなく、HTMLをはじめとするプログラミング言語で構成されています。普段見慣れたホームページとははるかに違いますが、これが原型です。

これらのソースを打ち込む媒体はメモ帳などでも構いませんが、専門のテキストエディタの使用をおすすめします。詳しくは後述の「3.ファイル作成だけに気をとらわれないで」にて。

普通のテキストファイル(Wordなど)と違うのは、

・ファイルの名前が「〇〇.html」であること

・ファイルの中身が、一定のルールに基づいて書かれていること

この2つだけです。

この2つの条件に沿って作られたファイルのことをHTMLファイル、2つ目のルールのことをHTMLと呼んでいます。

ホームページ

しかし、一般的に皆さんが見るようなホームページは文字の装飾があったり、画像が表示されていたり、カーソルを当てると反応したり、色々な部品が組み込まれています。

ホームページを構成する代表的なファイルには以下のようなものがあります。

・HTMLファイル(〇〇.html)と画像ファイル(〇〇.jpg、〇〇.gif、〇〇.png)
➡ホームページを構成する最も基本となるファイルとして、どんな内容を表示するかを記述するHTMLとページ中に表示したい画像ファイル。

・CSSファイル(〇〇.css)
➡HTMLファイルに記述された枠組みのレイアウトを変更したり、文字の色や大きさ、枠線などの「見た目」を変更したりするために用いられるファイル。

・javascriptファイル(〇〇.js)
➡ページに動きをつけるファイル。メイン画像が動くホームページは最近では珍しくないので、使用される機会が増えています

 

3.ファイル作成だけに気をとられないで

さて、ここまでホームページを構成するファイルについて概要を説明してきましたが、実はこれらのファイルを作っただけでは、ホームページを閲覧することはできません。

画家が描く絵もそうですが、外に向けて公開しなければ人目につくことはありませんよね。

アップロード
サーバーと呼ばれる大量のデータを保存してある場所に自身のホームページのデータをアップロードすることで初めて多くの方に見られるようになります。

ここでは公開作業の詳細は割愛しますが、基本的な流れを押さえておけば、せっかくファイルを作ったのに、お蔵入りなんていう悲惨な状況にはならずにすむということだけ覚えておいてください。

ファイルの作成については、「2.ホームページはこうやってできている」で簡単に説明いたしましたが、テキストエディタと呼ばれる専用のファイルを使うことをお勧めいたします。

▼代表的なテキストエディタ
テラパッド(TeraPad)
https://forest.watch.impress.co.jp/library/software/terapad/

Brakets(ブラケット)
http://brackets.io/

 

4.簡単な事例

ホームページの全体像がなんとなく分かってきたところで、今度は手を動かしてHTMLでどんなことができるのかを体感してみましょう。

まずは、先ほどご紹介したテキストエディタをご用意ください。今回はBrakets(ブラケット)を使って進めていきます。

初めに、簡単な見出しをつける作業をしていきましょう。ソース内の<>で囲まれた記号を”タグ”と呼びます。例えば、<p>は「pタグ」<br>は「brタグ」などと呼びます。

基本的に、多くのタグが開始タグと終了タグのセットで使われます。例えば、<p>~</p>といった具合になります。

また、開始タグ、終了タグがある場合は入れ子構造になるため、上の写真のようにはならず、下の写真のようになります。


では、簡単なワークとして、①見出しづけ、②表づくりに挑戦していきましょう!「学ぶは真似ぶ」と思いながら、まずはソースを真似して打つことから始めましょう。

 

【1】見出しづけ
では下の写真を真似してソースを書いてみてください。

 
書き終わったら、「1-1index.html」と名前をつけて保存してください。それをお使いのブラウザ(Google Chrome、Internet Explorer)にドラッグ&ドロップしてみてください。

下記写真のようになったら正解です。

正解①
<h1>~<h6>というのが見出しを表すタグになります。<h1>が最上位で、数字が小さくなるにつれて下位の見出しとなり、<h6>が最下位となります。

ブラウザで表示をするとテキストサイズが変化したり、太字になったり、前後に改行が入りますが、検索エンジンに関しても重要な意味を持つため、単に文字の大きさを変えたり、太字にするためだけの目的で使用するのは避けましょう。

 

【2】表づくり
では、続いて表づくりに移りましょう。先ほど同様まずは下記のソースをテキストエディタに打ち込んでみてください。


今度は、「1-2index.html」と名前をつけて保存しましょう。下記写真のようになったら正解です。


このような形で簡単に表も作れてしまうという優れモノなのです。あとはこれにCSSなどのファイルを追加していくことで装飾ができたりするのですが、今回は基本の”き”ということでここまでにしたいと思います。

まとめ

いかがでしたでしょうか。
身近にあるものだとついついどうやってできているかまでは意識がいきにくいものだとは思いますが、実際に作る側になってやってみると新しい発見もたくさんあります。

ぜひ、まずは「真似る」を意識して、理想のホームページ作りに励んでください!

HTMLお手本

参考になったらシェアをお願いします!