Webデザイナーを目指すなら避けて通れないHTMLの基礎知識。
「HTMLとCSS」がセットで登場することが多いです。
この記事ではHTMLの書き方…ではなく、そもそもHTMLって何？という基本的なことをWebデザイン初心者向けに解説します。
自宅のパソコンでお金をかけずにHTMLファイルを作って、パソコンのWebブラウザで表示することができます。
目次
HTMLの読み方と意味
HTMLの読み方は
エイチティーエムエルです。そのままアルファベットを読みます。
HTMLの正式名称は、
HyperText Markup Language
ハイパーテキストマークアップランゲージ
ハイパーテキストをマークアップする言語ですよ……
これだけではわかりにくいですよね。
ハイパーテキストとは？
Webページ上のテキスト(文字情報)から画像や他のデータなどを呼び出す仕組みそのものがハイパーテキストです。
文字を書くだけで、他の場所にある画像を表示することができます。
文字を書くだけで、他のページに移動することができます。いわゆるリンクですね。
ハイパーテキストは1965年8月24日にテッド・ネルソン氏によって生み出されました。
結構古くからあるんですね。
メールでもハイパーテキストを使うことができます。
「HTMLメール形式」「リッチテキスト形式」と呼ばれています。
文字の色を変えたり、表を入れたりできるメールの形式です。
マークアップとは？
HTMLにおけるマークアップとは、テキストに意味を付けていくことです。
- これは見出し
- 本文はここからここまで
- ヘッダーはこの範囲
- ここにAの画像を表示
このように、それぞれ決まった記述で適切に意味をつけていきます。これがマークアップです。
要するにHTMLとは？
HTMLについて超カンタンに説明するなら、
リンクを貼ったりテキストに意味をつけたりして、Webサイトを作ることができる言語です。
全てテキスト(文字データ)で構成されています。
HTMLの記述ルールに従って正しく記述すれば、カンタンにWebサイトができあがります。
HTMLには種類がある
Webデザイナーやエンジニアの方は便宜的に「HTML」と呼んでいますが、実はHTMLには種類があります。
ここでは、HTMLには種類があるということだけ解説します。
詳しい違いや見分け方については別の機会に書きたいと思います。
HTMLの種類によって使えるタグや記述ルールが違います。細かい違いはありますが、基本的なところは同じです。
- HTML
- XHTML
- HTML5
など、それぞれにバージョン違いもあります。
これからHTMLを覚えたい方はHTML5の勉強をおすすめします。HTML5は今(2018年の時点で)主に使われているからです。
HTMLを書くツールやアプリは？
お金をかけなくてもHTMLは書けます。
ここではWebサイトを作ってインターネット上に公開することではなく、HTMLを書く方法について紹介します。
Windowsの場合はメモ帳、Macの場合Text EditでもHTMLを書くことができます。
HTMLファイルは文字が打ててHTML形式で保存できるものなら、どんなツールでも作ることができます。文字のコピー＆ペーストができるものをオススメします。
テキストエディタでHTMLを書く
私がHTMLを書く時はテキストエディタを使っています。
テキストエディタとは、
文字情報を打つ、編集する、保存することなどに特化したソフトウェアです。
HTMLは文字情報(テキスト)だけで作られているので、テキストエディタの機能はとても便利です。
- テキストエディタ上の文字表示で、HTMLタグの種類別に色分けして確認できる
- HTMLを書くために便利な機能がある
- 文字コードを確認、変更できる
利用者が多いテキストエディタ
Atom
Githubが作成したテキストエディタです。
HTMLの他にも、javascript、PHP、Rubyなど主要な言語に対応していてエンジニアからも人気があります。
Sublime Text
Windows、Mac、LINUXに対応している海外産の テキストエディタです。拡張性がかなり自由なため、プログラミング上級者でも利用者が多いテキストエディタです。
メモ帳、Text Edit、テキストエディタなどで本格的なWebサイトを作る場合は
HTMLタグを理解していて正確に記述できることが条件となってしまいます。直接文字やHTMLタグをテキストだけで入力(記述)していくからです。
カンタンなWebページなら、これらのツールでカンタンにHTMLを書いて作ることができますよ。
文字コードを確認して文字化けを防ぐ
HTMLを書く前に、必ずファイルの文字コードを確認しましょう。
結論から書くと「UTF-8」になっていればだいたい大丈夫だと思います。
せっかくHTMLファイルを保存したのに文字化けしてしまったことはありませんか？
私はあります。
これは文字化けしているWebサイトの表示画面です。
文字化けが起こるのは文字コードの設定が間違っている可能性が高いです。
みなさん一度は通る道だと思うくらい、最初は文字コードを間違えて文字化けしてしまうことが多い気がします。
HTMLファイルの文字コードはとても大切な設定です。
文字コードとは
正確には「文字コード」ではなく「エンコード(符号化)方式」ですが、ここでは通称の「文字コード」と呼ぶことにします。
全ての文字コードを覚える必要はないので、テキストエディタの設定で下記を探してみてください。
- Shift_JIS
- EUC-JP
- Unicode
- UTF-8
- UTF-16
他にもたくさんの文字コードがありますが、とりあえずUTF-8を選択して文字を書き始めるといいと思います。
HTMLの文字コードの設定・確認のタイミング
- ファイルを開く時
- ファイルを保存する時
- HTMLの<head>～</head>の中の<meta>の記述
このどこかで文字コードの設定が違っていると文字化けしてしまうことがあります。
他にも、実際にインターネット上にWebサイトを公開した時、サーバー側の設定が原因で文字化けしてしまうことがあります。Webデザイナーは基本的にはサーバーの設定をいじらないため、専門の人にお任せしましょう。
HTMLファイルを保存して、閉じて、また開いたら文字化けしていた。
インターネットに公開したら文字化けしてしまった。
両方とも何度も経験しています。
文字化けしてしまったら、焦らずに文字コードを確認してみましょう。
HTMLファイル形式で保存する
メモ帳やテキストエディタでカンタンにHTMLが書けたら、あるいは書いている途中で、HTMLファイルを保存します。
保存する時の設定は
保存形式はHTMLを選択
拡張子は「.html」
パソコンで拡張子表示の設定をしよう
余談ですが、
パソコンやMacで拡張子を表示しない設定にしてる場合は、拡張子を表示する設定に変更しましょう。
拡張子は「何のファイルか」を表すものです。
拡張子「.html」「.css」「.jpg」「.png」「.png」「.svg」などがパッと見てわからないと、Webサイト制作がとても不便です。
HTMLファイルを保存する時の「.html」と「.htm」の違い
HTMLを保存する時、ファイル形式「.html」を選択すると決めておけばまずは大丈夫です。
「.htm」という選択肢が存在することがあります。
HTMLのLがないファイル形式です。
「.html」と「.htm」は同じです。どちらもHTMLファイルです。
拡張子「.html」または「.htm」を付けることで、「このページは HyperText Markup Language というコンピュータ用の言語で書かれています」ということを表します。
「.htm」という拡張子は昔のファイル名の文字数の名残りです。(英数8文字以内、拡張子は3文字以内）
「.html」と「.htm」が混在するととても不便
「.html」と「.htm」はどちらも同じHTMLファイルですが、例えば「index.html」と「index.htm」が存在する場合、
ファイル名が違っているため、コンピュータ上では違うファイルとして扱われます。
同じくフォルダに「index.html」と「index.htm」を入れることができてしまいます。上書きされません。
どちらが正しいファイルなのかわかりにくいです。
また、HTMLファイルの記述でリンクを貼るには拡張子を正確に書かなければいけません。
「index.html」と記述したリンクからは「index.htm」へは移動できません。
「.html」と「.htm」が混在するとWebサイトの運営や修正がとても面倒になります。
今は「.html」が主流なので最初から統一しておけば問題ありません。
保存したHTMLファイルをブラウザで見る
保存したHTMLファイルはインターネット上にアップロードしなくても、ご自宅のパソコンのWebブラウザでWebサイトのように表示することができます。
Webブラウザとは、インターネットのWebサイトなどを見るためのアプリケーションです。
パソコンに標準で入っているものや無料でダウンロードできるブラウザがあります。
思ったとおりに表示できるか
画像やリンクは間違いないか
機能は正常に動くか
Webサイト公開前に、HTMLファイルの記述の間違い、表示の崩れなどを発見できます。
終わりに
Webデザインを始めようとすると必ず登場する「HTML」。
そもそもHTMLって何？って思いますよね。
一度覚えてしまうとそんなに難しくありませんが、
保存方法や記述、文字コードを間違えると正常にWebサイトとして表示されないものです。
無料でカンタンなHTMLを書いて自宅パソコンのブラウザで表示できるので、トライ＆エラーであれこれ試してしてみることをおすすめします。
HTMLに慣れてきたら、Webページに装飾をするためのCSSにもチャレンジしてみると楽しいですよ。
