HTMLの学習室

HTMLとは

internet Explorerやsafariなどのウェブブラウザと呼ばれる表示ソフトは皆さんご存知かと思います。ホームページを表示・閲覧するために普段から意識せずに利用されていますよね。
この表示を可能にするための言語がHTMLです。言語とは言うものの通常のプログラミング言語とは少し趣が違っていて俗にマークアップ言語とも呼ばれています。　簡単にいってしまえば”記号を使って表示する”ものです。

HTMLは「ハイパー・テキスト・マークアップ・ランゲージ」の頭文字をとってその名がつきました。1990年頃はほとんど文字ばかりの簡素なページが多く、CSS（スタイルシート）で表示するという考え方があったのですが、当時はブラウザ自体にその機能が対応していませんでした。
CSSについては後述しますが、文章やリンク、色の使い分け等はHTMLに任せてブラウザの表示方法はCSSに任せる形式が現在では一般的です。

WordPressやhomepagebuilderのような作成ソフトを利用すればHTMLやCSSなどを意識せずにページを作成することはできますが、部分的に加工したい場合や独自の表現をしたい場合などにはこの言語を理解しておくと便利です。

HTMLの要素

HTML文書の先頭には<!DOCTYPE html>というHTMLのバージョンを記載します。その後は４つの要素が最低限必要になります。
始めは<html>で終わりは</html>で囲みます。１つのページを作成する毎に必要になります。<html lang=”ja”>のlang=”ja” 部分は lang（ランゲージ）、ja（日本語）を使いますと宣言します。
次に<head> ヘッダータグですが、この部分に文書全体の情報を書き入れます。ここでは<meta> メタタグを使って文字形式を宣言し、<title>タイトルタグにはページのタイトルを記入します。終わりには</head>としておきます。
ここまではブラウザに表示はされません。次が<body>ボディータグで、ここからがブラウザに表示される文書の内容になります。

ひとまずブラウザに表示できるように文字を入れてみました。ブラウザで表示してみますが、皆さんも是非試してみてください。ここではエディタにAtomを使っていますが、メモ帳でも結構です。記入できたらファイルに保存する時にファイル名の後に” . html “ドットの後にhtmlと拡張子をつけてください。そうすればブラウザがHTML言語で書かれた文書と認識してくれて表示されます。
ファイルの保存先はひとまずデスクトップの方が使いやすいでしょう。
後はブラウザを開いてデスクトップに作られた先ほどのファイルをドラッグ&ドロップすれば簡単に表示できます。

こんな感じです。タイトルタグに記入した文字はブラウザのタイトル部分に表示され、ページの内容は本文に出力されているのが解ります。
文字だけでは寂しいので画像も入れてみます。　デスクトップに新しくディレクトリを作ってその中に作ったhtmlファイルをドラッグ&ドロップで移動させます。そして任意の画像もディレクトリの中に移動させます。その後またエディタに戻って以下のように書き入れます。

新たに書き入れた<p>は改行するためのタグです。ここではまだ</p>と改行の終わりを示すタグは入れていません。<img>イメージタグは画像を出力するためのタグでsrc=”ferret.png”で画像のファイルの場所を指定しています。
同じディレクトリ内であればファイル名を記載するだけですが、別の場所にある場合はそのパスを記載しなければいけません。ブラウザはファイルを探せないので例えばsrc＝”Desktop/ferret.png”のように記入します。
width=”140″は横幅を140ピクセルで表示、height=”100″は縦の長さの表示を意味します。ブラウザで表示してみましょう。

原画はかなり大きいのですが、こんなに可愛く表示できました。
ここまではHTMLについてだけで作成してきましたが、ここからはCSSを使ってヘッダーメニューを作ってみます。

<a>エータグで他のページにジャンプするように設定します。href = “○〇〇.html”はのちに作るページ名を指定します。ブラウザに表示する文字に関連するページ名の方が後々解りやすいでしょう。ここではhomeとしています。
ここまでは画面の左端から右へと記載し、改行タグで画像を表示しているだけですが、これから配置をCSSで変化させてみましょう。その前に現在のページの構造を確認しておきます。
GoogleChromeの表示→開発/管理→要素の検証と進むと画面の構造を確認できます。

四角で色付きの構造が右端に描かれています。この部分をボックスと呼びます。margin（マージン）はページの外側の余白部分で常に透明になります。border（ボーダー）は枠の部分で、内容の周りに表示させることができる部分です。padding（パディング）は内容が表示される部分とボーダーとの空間の領域です。青で表示されている部分がbodyの内容が表示されている領域になります。CSSでの変化をわかりやすくするために少し内容を変えておきます。