2019/08/09

プログラミング初心者のためのHTML講義【現役エンジニアが解説】

PROGRAM

HTMLとは何かを知りたい方に。

この記事を読まれている方は、

HTMLとは何かを知りたい
プログラミングとHTMLの関係を知りたい
HTMLの書き方を知りたい

おそらくこのように考えている方が多いと思います。

この記事を書いている私は、
プログラミング未経験から転職を果たした現役のWeb系エンジニアです。
エンジニア歴は３年ですが、本業とは別にフリーランスの副業で月１０万円ほど、多いときで２０万円ほどの収入があります。

この記事では、現役のエンジニアが、プログラミング初心者向けに、HTMLについて解説します。

HTMLとは

まず、HTMLとは「HyperText Markup Language」の略で、マークアップ言語のひとつです。
「マークアップ言語とはなんぞや」と思われる方も多いと思いますが、簡単に言うと、画面を作るための言語のことです。

そして、ほとんどのウェブページが、このHTMLによって書かれていますので、Web系のエンジニアを目指す方にとっては、避けては通れない言語ということになります。

ウェブページ以外にも、例えば、スマホアプリの画面やWindowsアプリの画面などを描くマークアップ言語も、HTMLに近いXML系の言語で書かれています。

そのため、HTMLを覚えてしまえば、他のマークアップ言語も同じような感覚で使いこなすことができるようになります。

とりあえず手っ取り早くマークアップ言語を覚えたいという方は、Webのマークアップ言語であるHTMLから始めてみるのが得策かと思われます。

HTMLは、後ほど書き方については紹介しますが、タグというもので括る「入れ子構造」のマークアップ言語であり、HTMLではウェブページのブロック構成から、他ページへのハイパーリンク、フォントや文字色の指定などができ、機能面ではかなり充実しています。

HTML5になってから、できることがさらに増え、動画などのメディアの活用も非常に楽なものになっています。

プログラミングとHTMLの関係

これからプログラミングをする方にとっては、画面の設計と製造は避けては通れない道になります。

理由は、プログラミングはあくまで裏側の仕掛けであって、それだけでは表側のユーザーインタフェース(UI)、すなわち画面がつくれないからです。

そのため、プログラミングをする上では、表側の画面製造のためのマークアップ言語と、裏側の処理のためのプログラミング言語の２種類を覚えないといけません。

これはWebのHTMLだけでなく、スマホアプリやWindowsアプリでも同じです。
スマホではXML、WindowsアプリではXAMLなどで画面を実装していくことになります。

マークアップ言語はプログラミングを行うために避けては通れないものですが、一番身近で覚えやすいのは間違いなくHTMLだと思います。

Web上にたくさんサンプルもありますし、書籍もあります。
おまけにブラウザで他のページのソース(HTML)を見ることもできますので、真似ることも容易です。

以下にHTMLの書き方を簡単に解説していますので、ぜひ言語のイメージだけでも覚えていって下さい。

HTMLの書き方

基本的なルールと書き方

HTMLは、タグを括ることで、画面を表現していきます。
試しに、拡張子が.htmlのファイルを作り、以下の内容を書いて、適当に名前を付けて保存してみましょう。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>ページのタイトルをここに入力</title>
</head>
<body>
    コンテンツをここに入力
</body>
</html>

これをブラウザで表示させてみる(開く)とタイトルが「ページのタイトルをここに入力」と表示され、画面には「コンテンツをここに入力」と表示されると思います。

これが最もベーシックというか、ミニマムなHTMLの書き方になります。
HTMLは入れ子構造のマークアップ言語となっているので、<html>という開始タグと</html>という終了タグの間に、<head>…</head>というものがあり、またその中に…というような書き方になっています。これはルールなのでそういうものだと覚えて下さい。

それでは、それぞれのタグの意味と役割を、一つずつ解説していきます。

まず、<!DOCTYPE HTML>はこの文書がHTML5の文書であることを意味しています。5というのはHTMLのバージョンで、現時点では最新バージョンを表します。特に理由のない限りは、メディアの活用なども便利な最新版を使うように宣言しておきましょう。

次に、htmlタグがありますが、これは形式的なもので、HTMLで書く場合に全体を括るタグとして必要になります。

その中に、headとbodyというタグが並列で並んでいます。

headはmetaタグなどの設定系の記述を書いたり、読み込みファイルなどを指定したりする場合に使うところです。今回の例ではmetaタグを使用し、文字コード(charset)をUTF-8に設定しています。それによって、この文書はUTF-8という文字コードで書かれた文書であることを宣言しています。また、titleタグでこのページのタイトルを設定しています。

一方、bodyには画面に表示するコンテンツを記述していきます。今回の場合は「コンテンツをここに入力」という文字列がbodyタグの中にあるので、それが画面に表示されます。

HTMLの場合、開発者が主に書いていくのは、このbodyの中になります。逆にbody以外のheadの中などに書いても見た目を作ることはできないので、意味がありません。

基本的な書き方は以上になります。
続いて、ハイパーリンクなどの各要素の書き方を解説していきます。

リンクの貼り方

リンクを貼るには、aタグで括り、href属性でURLを指定する必要があります。
具体的には以下のように書きます。

<a href="https://google.com/">Google</a>

上記の例では、グーグルへのリンクを貼っています。
HTMLの用語として、タグの中に○○=○○とあるものは属性と呼びます。左側が属性の名前で、右側が属性の値になります。

aタグの場合はhref属性でリンク先を指定しないと、リンクとしての機能が発揮されません。

画像の貼り方

昨今、画像のないウェブページはほとんど存在しないと思います。
画像を貼るには、imgタグで括り、src属性で画像のパスやURLを指定する必要があります。
具体的には以下のように書きます。

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

上記の例では、グーグルのロゴマークの画像を表示しています。
他にも属性で画像の縦サイズや横サイズを調整できたりしますが、ここでは割愛します。

リスト表示

ウェブページで情報を発信する際に、リスト（箇条書き）で文章を表示したいこともあると思います。
リスト表示は、ulタグで括り、各文章をliタグで括ることで実現できます。

<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

上記の例では、項目３つをリスト表示しています。
中黒ではなく、数字にしたい場合は、ulではなくolタグを使用します。

ブロックの分け方

HTMLで最もよく使われるタグの一つとして、divタグが挙げられます。
これはブロックを分けるためのタグです。
例えば、以下のように書いてみましょう。もちろんbodyの中です。

<div style="background-color:red;">
ヘッダー
</div>
<div style="background-color:blue;">
    コンテンツ
</div>
<div style="background-color:yellow;">
フッター
</div>

ヘッダーとコンテンツ、フッターという三段のブロックに分けて表示したい場合はよくあると思います。その際は、上のようにdivタグを使用してブロック分けをします。ここではわかりやすいように各ブロックに色を付けています。

style属性は各項目を設定することで、色を付けたり、フォントを変えたりすることができるので、見せ方を変えたいときに便利です。

最近ではヘッダーの場合はheaderタグ、フッターの場合はfooterタグを使うことがほとんどですが、昔はdivしかなかったので、divで表現していました。今回はあえてdivで表現しています。

ブロック分けを全くしないウェブページはまずないと思いますので、これから画面の設計と製造をされる方は、ぜひdivタグを覚えて、使いこなせるようにしておいてください。
今回は縦に並ぶdivタグですが、横に並ばせるときも同じようにdivを使います。

もっときちんとHTMLを学びたい方は、HTMLの書籍を買ったり、プログラミングスクールなどを検討されると良いと思います。HTMLはプログラミングとは呼びませんが、プログラミングとは切っても切れない関係があるので、プログラミングスクールで取り扱っていることがほとんどです。

よかったら、こちらの記事も参考にして下さい。