tsux.me 現役京大生エンジニア精進の日々

0から始めるHTML!(導入編)【WEB開発のススメ】

早速HTMLをマスターしていきましょう。

まず、HTML言語はプログラミング言語ではありません。気楽にいきましょう!

HTML言語はマークアップ言語と言って、テキストに印をつけることでどんな機能・情報なのかをブラウザに教える役割があります。

なので学習すべき内容は大体は以下のようになります。

  1. HTMLとその書き方の基本を知る
  2. よく使われるHTMLタグと意味を覚える
  3. HTMLのコーディングする上でのルールを知る

この記事では、上記の一番最初の「1. HTMLとその書き方の基本を知る」をしっかり抑えていく導入編です。この記事をマスターして次回からバリバリHTMLを書いて勉強!と言うのを目指します。

まだちょっと座学チックですが頑張りましょう!!

HTMLとその種類をおさらいする

HTMLは Hyper Text Markup Language の頭文字で、テキスト(情報)を構造化して、「これは〜〜の情報だよ!」と宣言したり、他のデータへ簡単にアクセスできるようにしたりするめっちゃハイパーな言語だと言うことは、以前もお話しました。

このマークアップ言語にはいくつか種類があって、以下のようなものがあります。

  • SGML ... HTMLやXMLの親とも言える存在。
  • HTML ... WEBページ用にSGMLから発展。
  • XML ... データのやり取り重視でSGMLから発展。
  • XHTML ... XMLの厳密さをHTMLに取り入れたもの。

つまるところ、今現在WEB開発において勉強するのはHTMLだけでOKですが、こんなのがあるんだ、と言うのは頭に入れておくと、イキれます笑

で、そのHTMLにも実は以下のように(バージョン的な)種類があります。ですが、現在ではほぼ完全にHTML5を指していると考えて問題ないでしょう。

  • HTML4.01
  • HTML5

ではこの4.01から5になって何が変わったのか?

簡単に言うと、「簡単になった」と「役割を絞った」です。

簡単に紹介します。


「簡単になった」

HTML5では色々と省略が許可されたり、様々なメディアがサポートされたりして、すごい楽にかけるようになりました。

例を挙げると、HTMLファイルを書き始める際、一番初めに「ドキュメントタイプ宣言」と言うものを書きます。

「これはHTML4ですよ」、とか、「これはXMLですよ」、とかを教えるためのもので、まあなくても動くのは動くのですが、支障をきたすこともあるので通常は書くものです。

これが、HTML4では

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

とよくわからない文字列が連なるところを、HTML5だと

<!DOCTYPE html>

と、すごく短くなります。

これらのHTMLはW3Cと言う機関が仕様を決めているのですが、W3Cが正式にHTML5を勧告しました。

これにより、この他、様々な記述が省略可能になったり短い記述で済むようになりました。

「役割を絞った」

これが一番大事です。

HTML5になってからいくつかの機能が使えなくなったり、非推奨になったりしているのですが、それらの機能は大抵の場合、HTMLの本来の機能である、「構造や設定の宣言」にあまり関係ない機能になります。

と言うのからもわかるように、HTML5ではその役割を明確にし、役割分担をしよう、という動きが感じられます。

僕の解釈で簡単に言うと、

HTMLは構造を定義するものなので、それ以外のこと(見た目とか)は、HTMLではなくCSSなど別のもので定義しましょう

と言うことです(見た目の他にもあります)。

HTML4の名残でスタイルをHTMLで調整できたりするのですが、これはあまりオススメしない、ってことです。これは後々説明しようと思います。


以上、おさらいすると、

  • HTMLって言われたら、簡単にかけるHTML5のことを指すんだ
  • HTML5は構造を定義するだけなんだ

ってことだけは頭に入れといてください。

HTMLを書くための環境

HTMLを書き始めるために、環境を整えましょう。

とりあえず現時点で必要なものは、

  • パソコン
  • WEBブラウザ
  • エディタ(統合開発環境 : IDE)

です。

エディタでコードを書いて、その結果をブラウザで見ていく、と言う感じです。

僕のオススメですが、

PC

これについては収集つかなくなりがちなので少しだけ。これから買う人は悪いことは言いません、Mac 系にしておきましょう。UbuntuなどのLinuxだとなお良いと思うのですがマニアックで敷居が高いので、Macにしておけばプログラミングのしやすさと言う点では過不足ありません。もちろんWindowsでも構いませんが、安いものだと重い上、やはりちょっとプログラミング向きでない感は否めません(言っちゃった)。

ブラウザ

Chrome がいいでしょう。世界の主流です。できれば後々はレイアウトの確認などのために他のブラウザも複数あるといいんですが、現時点では今使っているものだけでも構わないです。

エディタ

VSCode が無料で性能も高くオススメです。こだわりがあればそれで良いし、実際どんなものでもできるのはできます。なんなら、メモ帳でもできます。ですが、一応僕が色々使ってきた上で、速く、拡張機能が豊富な VSCode がおすすめです。

一応、今後は上記の環境で進めていくので、しゃーねーな、したがってやるよ、って方は用意しておいてください。

今回のメインはHTMLなので、これらの用意の方法に関してはすみませんがググってください。

以上、おさらいすると、

  • Mac の PC が良さそう!
  • Chrome が主流なんだ!
  • VSCode ってのが便利なんだ!

ってことだけは頭に入れて、環境を準備してください。

いよいよコードを書きます!

HTMLを書いてみる

HTMLの綺麗な書き方、コーディングルールに関しては、人の好みによる部分があります。

今後これに関しては、いつも自分がそうなので、 Google のコーディング規約を基本的に参考にした書き方になると思います。

Google のやり方で書くんです!もっと喜んでいいですよ!

もちろん、エラーにならない範囲で好きに書いていただいてもいいのですが、後々のために見やすく、綺麗に書くことは意識してください。

それでは、参照しやすい好きな場所に、index.html ファイルを作り、 VSCode で開いてみましょう。

VSCode は拡張機能の HTML Snippets を入れておくとHTMLが書きやすいです。

上記を入れた状態で html と入力すると、

のように候補が出てくるので html : 5 を選択すると、

一気に下のようなのが自動入力されます。 VSCode 便利ですね。

HTMLのテンプレです。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>

</body>
</html>

わけわかんないと思います。

これをちょっと書き換えて、超簡単に説明してみました。

<!DOCTYPE html> <!-- ドキュメントタイプ宣言 : html5 だよって宣言してます。 -->

<!-- この記号で挟まれた部分はコメントで何を書いても無視してくれる! -->

<html lang="ja"> <!-- htmlタグ : HTML文書全体を囲んでいる。 lang="ja" で日本語宣言。 -->

  <head> <!-- headタグ : このHTML全体の「設定」部分 -->
    <meta charset="UTF-8"> <!-- metaタグ : 文字コード設定 MacやLinuxの標準のUTF-8が世界のHTMLの標準 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- metaタグ : スマホでの表示設定 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- metaタグ : Windowsで古いIE使ってる人向けの設定 -->
    <title>タイトルです</title> <!-- titleタグ : タブや検索結果などに表示されるタイトル -->
  </head>

  <body> <!-- bodyタグ : この中がブラウザの画面に表示されるメインのコンテンツ部分 -->
    <h1>Hello, World!(こんにちは!)</h1> <!-- h1タグ : 一番の見出し -->
  </body>

</html>

みやすいように改行やインデントも入れました。

一般にHTMLファイルのインデントは半角スペース2つ分です。

さてこのファイルをFinderなどのファイルマネージャから探してブラウザで開いてみましょう。(多分ダブルクリックするだけです。)

ブラウザで上のように表示されたら成功です!

もう見出しを書くことができました。


ここで、少し内容を整理します。

HTML文書は「タグ」と呼ばれるもので情報(コンテンツ)や設定を宣言します。

<h1> のような始まりを意味する開始タグと、

</h1> のような終了タグで囲まれた部分がコンテンツです。

開始タグ内では、 属性="値" のように書くことで設定を宣言できます。

ちなみに下の例の class 属性は、そのタグにクラス(分類)名を設定してあげるものです。

<タグ 属性="値">コンテンツ</タグ>

例)
<h1 class="main-title">Hello, World!(こんにちは!)</h1>

中には先ほどの meta タグなどのように、設定のみで中身がないものは、終了タグを書かないものもあります。

<タグ 属性="値" 属性="値">

例)
<meta http-equiv="X-UA-Compatible" content="ie=edge">

改行を示す <br> のように設定さえ無いものもあります。

<タグ>

例)
<br>

こんな感じです。


なんか思い出したら後々書き足すかもしれませんが、

以上がHTMLの記述の基本です。

あとはHTMLでよく使われる「タグの『種類』、『役割』、『設定』」を覚えれば、バチバチにHTMLを書いていけるようになります!

それは次の記事以降で説明していきたいと思います。

これまでは基礎だったのでこれでも割としっかり説明しましたが、次からは the 暗記って感じなので、

よく使うものだけ厳選し、使いこなせるように、パパッと、

説明していくつもりです。

では次も頑張りましょう!

COMMENT

コメントはありません