Brat Creator

HTML入門～WEBサイトの骨組みを作ろう～

「WEB初心者だけどWEBサイト作ってみたい！」という方の為に、
今回はWEBサイトを製作するのに必須のHTMLが何なのかということや
書き方などの基礎を説明していきます。

HTMLとは

HTMLとは、WEBサイトを構成するために開発された言語で、
正式名称は「HyperText Markup Language」と言います。

普段、私たちがブラウザで観ているWebページのほとんどが、HTMLを使って作られています。
HTMLはWEBサイトの骨組みとなる部分なので、オリジナルのWEBサイトを作る際には
避けては通れない道となっています。

ちなみに、あなたが他の方々と同じオリジナリティ0の量産型スタイルの
ブログを作りたいだけの方であれば、思いっきり避けて通ることができます。

HTML5とは

HTML5とは、HTMLのバージョン5のことです。
HTML4が1999年12月に開発され、そこからはHTML4が主流でしたが、
2014年10月28日にHTML5が登場したことで、現在はHTML5が主流になっています。

XHTMLとは

XHTMLとはHTMLとXMLを合わせたコードです。
現在ではWEBサイトを作る時にはあまり使われていません。

必要なツール

「でも、こういうWEBサイト作るソフトって結構お高いんでしょう」
と思った方ご安心ください無料で出来ます。
一応有料のものもありますが、最近は有料に負けないものもたくさんあります!
というかプロの現場でもみんな普通に無料のテキストエディタ使ってます。有料にも劣らない！おすすめの無料テキストエディタ（後半で有料のも紹介するよ♪）

HTMの書き方

HTMLはタグというものを使って書いていきます。

 <p>HTMの書き方L</p>

こんな感じに<開始タグ>〜<閉じタグ>で要素を囲むのが基本の書き方です。

HTMLファイルの作り方

これは非常に簡単です。
保存するときに名前をindex.htmlという感じに、
最後の拡張子をhtmlにすれば完成です！
ちなみに「.html」の前の文字は何でもいいですが、
トップページは一般的にindex.htmlという名前にします。

必須タグ

さっき拡張子をhtmlにすればHTMLファイルは完成です！
と言ったばかりですが、本当はまだです。
HTMLファイルには必須タグというものがあります。
それがこちら。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ウェブサイトのタイトル</title>
    </head>
  <body>
  </body>
</html>

必須と言ってもこれはもう毎回お決まりなのでコピペでいいです。
エディタによっては自動で書き出してくれます。

!doctype html

!doctype htmlはドキュメントタイプ宣言と呼ばれていて、HTMLの冒頭に書きます。
このHTMLがHTML5で書いてありますよとブラウザに教えています。
これを書き忘れると表示がおかしくなることがあるので気を付けましょう。

また、<!DOCTYPE html>という風に書いているサイトもありますが、
HTML5では大文字だろうが、小文字だろうがどっちでもいいです。

<!doctype html>

html

htmlタグはこの中はhtmlの内容ですよという意味。
WEBサイトの内容はこの中に書いていきます。

<!doctype html>
<html>～</html>

head

headタグ内に書いた内容はヘッダ情報として扱われて、ブラウザ上には表示されません。
ウェブサイトのタイトル、JavaScript、CSSなどをここに書きます。

<!doctype html>
<html>
  <head>～</head>
</html>

meta charset=”UTF-8″

meta charset=”UTF-8″はHTMLの文字エンコーディングを指定できます。
詳しい説明は割愛しますが、こいつを指定しないで日本語打つと文字化けします。
これはheadの中に書きます。

<!doctype html>
<html>
  <head>
    <meta charset=”UTF-8″>
  </head>
</html>

詳しく知りたい方はこちら
文字コードって何だ！？ 世界で最もポピュラーな文字コード「UTF-8」とその仕組みを学ぼう！｜ferret [フェレット]

title

titleはサイトのタイトルを書きます。
ここに書いたタイトルはブラウザのタグの部分に表示されます。
これもheadの中に書きましょう。

<!doctype html>
<html>
  <head>
    <meta charset=”UTF-8″>
    <title>サイトのタイトル</title>
  </head>
</html>

body

body内に書いたコードはブラウザに表示されます。
headの下に書きましょう。

<!doctype html>
<html>
  <head>
    <meta charset=”UTF-8″>
    <title>サイトのタイトル</title>
  </head>
  <body>～</body>
</html>

classとid

classとidは開始タグ内に書く属性の1つです。
<div id=”box”> や<p class=”apple”>というような書き方をします。
classやidを使うと、タグ毎にに好きな固有の名前を付与させることができます。

では一体なぜ固有の名前を付ける必要があるのかと言うと、
CSSなどで見た目を変える作業をする際に固有の名前を付けることで、
そのタグだけの見た目を変えられるようになります。

その為、デザインを変えたい部分のタグにはそれぞれclassやidを付けていくことになります。

コメントアウト

コードに何かメモ書きを残しておきたい時に文字をそのまま書くとバグったり、
サイトに書いた文字が表示されたりします。それを防ぐためにはコメントアウトします。

コメントアウトというのはこれはコードとは関係ない文字だから
気にしないでねとブラウザに教えてくれるコードのことです。

<!-- 文字 -->と書くとその中にある文字全てがコメントアウトされます。
またちゃんとしたHTMLコードもコメントアウトするとサイトに反映されなくなります。

<!--
囲った文字は全部コメントアウトされます。
<p>ちゃんとしたHTMLコードもコメントアウトされます。</p>
-->

まとめ

  • HTMLはWEBサイトの骨組みとなる言語
  • 現在はHTML5が主流
  • HTMLを書くためにはテキストエディタなどを使う
  • <開始タグ>〜<閉じタグ>で要素を囲む
  • HTMLは拡張子を「.html」にする
  • 必須タグはコピペorエディタによる自動書き出し
  • デザインを変えたいタグにはclassやidを付ける
  • コードにメモを書くときはコメントアウトを使う

Comment