IT Design 旅 PetLife Life RenojiStock AboutUs

外部Link

「HTML」リファレンス

HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ（空白）」を表示する方法

「HTML」の基礎知識

「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方他のページに移行する「リンク」の作り方表の作り方 Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方

「HTML」タグ

【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト（箇条書き）で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素

IT Memo >>> HTML >>> 【HTML】HTMLの書式

【HTML】HTMLの書式

【HTML】
HTMLの書式

「HTML」は、
他の言語のプログラミングと同様に書き方があり、
その記述ルールを守ってプログラミングすることで、
「Webページ」として正しく機能してくれます。

「HTML文書」は、

「HTML」タグを使って、
コンテンツ内容が表示されるように、
「マークアップ」していきます。

「HTMLタグ」の書き方は、
基本書式を覚えることで、
色々とアレンジができるようになっています。

詳しくは、
下記をご参照ください。

INDEX

■ 最もシンプルな「Webページ」

■ 「HTML」とは
■ 「HTMLファイル」の「拡張子」
■ 「HTML文書」の書式

■ 「HTML文章」の構成

■ 「HTMLファイル」の構成に使用される「HTMLタグ」

■ 「DOCTYPE宣言」を記述する方法
■ HTMLファイルのヘッダー部分「headタグ」の内部に記述する内容

■ タイトルの設定方法
■ 「CSS」外部ファイルとリンクさせる方法
■ 「Javascript」外部ファイルとリンクさせる方法
■ 画像を先読み込みする方法

最もシンプルな「Webページ」

下記のサンプルコードは、
もっともシンプルな「Webページ（HTMLファイル）」で、
きちんと機能もします。
余計なものが、全くないので、
「HTML文書」の構造を理解するのに役立ちます。

「HTML文書」の構造については、
「書式」のところで詳しく記述しています。

最低限必要な「HTMLタグ」だけでも、
「Webページ」は機能します。

サーバーのテストなどで、
使用されることも多い記述で、
ブラウザに「Hello World!!」と表示されれば、
サーバーが機能しているかのチェックに使われています。

現在でも機能するので、
チェックのときは、
これぐらいのものを記述するぐらいでOK。

世界中の現在のWebページすべてが、
ここからスタートしていて、
色々と肉付けしていくと、
有名企業のWebになったりもします。

最初の一歩としてのプログラム。

<!DOCTYPE html>
<html>
<head>
</head>
<body>

Hello World!!

</body>
</html>

Back

「HTML」とは

「HTML」は、「CSS」と共にホームページやBlogなどのWebページを製作するためのプログラミング言語。
「HTML」は、画像や文章などの構成・骨組みを担当し、「CSS」は、ページのレイアウト・デザインを担当する。
インターネットのブラウザで見れるページは、すべて「HTML」「CSS」を利用してページを作成している。
身近なプログラミング言語の１つで、非常に簡単な仕組みになっているので初心者向きのプログラミングでもある。
現在の最新バージョンは、「HTML5」シリーズで、数年ごとにバージョンアップされ改良され続けている。
HTML文章というのは、HTML（エイチティーエムエル）=HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略称
ウェブ上の文書を記述するためのマークアップ言語。
HTML文章の様々なタグを利用して記述することで、様々な機能を記述設定することができる。

Back

「HTMLファイル」の「拡張子」

HTMLファイルの拡張子は、
・「.html」
・「.htm」
の２つが使用されるが、
HTMLファイルの中に他の言語を埋め込む場合、他の言語の拡張子が使用される。

「xml」の決まりで記述されたHTMLファイルの場合、「.xhtml」「.xht」「.xml」という拡張子が使われる。
「PHP」が組み込まれたHTMLファイルの場合、「.php」という拡張子が使われる。
「Javascript」「CSS」が組み込まれたHTMLファイルは、拡張子が変わらず「.html」「.htm」が使われる。

Back

「HTML文書」の書式

「HTML」ドキュメントは、「ドキュメント宣言」と「HTMLブロック」の二つで構成され、「HTMLブロック」は、「headerブロック」と「bodyブロック」で構成されていて、
「headerブロック」と「bodyブロック」の中に、Webの内容を記述するようになっている。
この構成は、すべてのHTML文章で、利用される構成。
前後に、他言語のプログラムが記述されることはあっても、HTML文章に、この構成が欠くことはない。

「HTML文章」の構成

<!DOCTYPE html>
<html>
<head>

ブラウザには表示されない
「Webページ」の需要な情報を記述します。
「タイトル」「CSSへのリンク」「Javascriptへのリンク」「説明」「キーワード」など。
Webコンテンツを表示するために必要な情報を記述するエリア。

</head>
<body>

「Webページ」に表示されるコンテンツ内容を記述するエリア。

</body>
</html>

ドキュメント宣言

このファイルが「「HTML」ファイルです」っていう宣言をする場所

HTMLブロック

HTMLの内容を記述するブロックで、「ヘッダー部分（headタグ）」と「ボディ部分（bodyタグ）」に分かれる。

headerブロック

ヘッダー部分（headタグ）には、
Web表示部分の設定や説明などを記述する。
Webページには表示されないが重要な部分。

bodyブロック

HTMLブロックの「ボディ部分（bodyタグ）」には、
Webに表示される内容を記述する場所。

というような構成になっている。

Back

「HTMLファイル」の構成に使用される「HTMLタグ」

HTMLタグ	説明
!DOCTYPE	HTMLバージョンの宣言
html	HTML文書であることを明示。すべてのHTML文書をhtmlタグの中に記入します。
head	ヘッダ情報を記入する場所です。 headタグで囲まれたものは、titleタグ意外では表示されません。その他の記述内容は、必要な情報、リンク先などを記述する場所になります。 CSS・javascriptなどのリンクを記入する場所です。利用されるのは、「meta」「link」「script」「title」といったタグが利用されます。
body	HTML文書の本文を記述する。「body」タグの中に記述する内容が、ブラウザに表示されます。「body」タグ内で利用されるタグは、「HTML」ページの目次にまとめてあります。



「head」タグ内に記述タグ
meta	meta は METAinformation（メタ情報）の略。「それまでの機能に加えて、後から機能を追加する」といった意味。 metaタグは、HTML の規約定義以外にも、様々な目的で使用される。
link	CSSなどの外部ファイルなどにリンクさせるタグ href属性で指定した文書を参照する。 <link href="CSS(スタイルシート)のパス" rel="stylesheet" type="text/css" />
script	Javascript文書にリンクさせるタグ href属性で指定したJavascriptを参照する。 <script type="text/javascript" src="Javascriptのパス"></script>
title	文書のタイトルを指定。 HTML文書のヘッダ部（<head>～</head>）に一度だけ記述。タイトルは、ブラウザのツールバー・履歴・お気に入り・メニュー・検索エンジンの検索結果などに表示される。

Back

「DOCTYPE宣言」を記述する方法

「DOCTYPE宣言」は、
「HTML文書」の一番最初に記述することになっています。

使用する「HTML」の「バージョン」によって、
記述する「DOCTYPE宣言」が異なります。

「DOCTYPE宣言」の記述位置

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

「HTMLバージョン」ごとの「DOCTYPE宣言」

HTML5 のHTMLバージョン宣言

<!DOCTYPE html>

HTML4.01 Strict のHTMLバージョン宣言

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

HTML4.01 Transitional のHTMLバージョン宣言

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

HTML4.01 Frameset のHTMLバージョン宣言

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

HTML3.2 のHTMLバージョン宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Compact HTML 1.0（i-mode）のHTMLバージョン宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

Back

HTMLファイルのヘッダー部分「headタグ」の内部に記述する内容

「HTML」ファイルのヘッダー部分には、
色々と大切なことを記述することになっています。
・ページの設定
・ページの「タイトル」
・ページの「キーワード」
・ページの「説明文」
・外部「CSS」ファイルへのリンク
・外部「Javascript]ファイルへのリンク
・「CSS」コード
・「Javascript」コード
など色々な設定を書き込む場所として、
「head」タグ内のヘッダー部分は使われています。

ヘッダー部分の書式

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Webページのタイトル</title>

<link href="CSS外部ファイルのURL" rel="stylesheet" type="text/css" />
<script async src=" Javascript外部ファイルのURL"></script>

<script>
「Javascript]のプログラムコード
</script>

</head>
<body>
</body>
</html>

Back

タイトルの設定方法

タイトルタグは、ページのタイトルを表示するタグで、
ブラウザ・タブに、表示されるページのタイトル。

検索エンジンの検索結果に表示されのも、このタイトルタグの内容が表示される。
そのページを表すタイトルなので、きちんと設定しておく必要がある。

検索エンジンもタイトルタグの内容も重視しているので、
SEO対策としてもタイトルタグは重要。

検索エンジンはこのタイトルを非常に重要視している。
ここに検索されたいキーワードを絡めていく事が重要。
また、「IT」というキーワードで検索されたい場合、必ずタイトルに「IT」というキーワードを含める。

記述の仕方は簡単で、タイトルタグの間に、タイトルを記述するだけです。
<title>「IT情報を調べるには〜」</title>という感じで記述すると良いらしい。
ここのタイトル部分に、キーワードを含めないタイトルは、あまり意味がないらしい。

「タイトル」は、「SEO」としても重要で、
Web検索エンジンに登録されるのにも重要視されている重要な要素です。
一緒に、「キーワード」「説明文」なども「SEO」対策として重要視されています。

タイトルタグの書式

<title>ページのタイトル</title>

<title>タグの内側に、
ページのタイトルを記述するだけの簡単な書式ですが、
タイトルの中身は重要だそうです。

ページ内を象徴するキーワードを含めることが重要だと言われています。
ページタイトルは、検索エンジンに表示される時に表示される部分なので、
検索エンジンからのアクセスを呼び込むには、タイトルの内容は重要になります。

「title」タグは、
通常、ブラウザの1番上の方に記述される要素の一つ。

記入例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML・CSS・プログラミングなどのITを中心とした情報を掲載</title>
<meta name="keywords" content="IT,IT情報,HTML,CSS,プログラミング">
<meta name="description" content="HTML、CSS、プログラミングなど,ITを中心とした情報を掲載。気軽にご利用ください。">
以下、省略～

Back

「CSS」外部ファイルとリンクさせる方法

スタイルシート（CSS専用ファイル）を作って、「外部CSSファイル」として、CSSを記述し、複数のHTMLファイルにリンクさせ、１つのスタイルシートで、複数のWebページのレイアウトデザインを統括できるのが最大のメリット。
複数ページに同じレイアウトデザインを割り当てるときには、外部CSSファイルのスタイルシートを作成して記述するようになっています。
ページをリンクさせるだけで良いのと、修正を加えるときにスタイルシートを変更するだけで良いので、非常に効率が良い。

外部CSSファイル「スタイルシート」のメリット
・外部CSSは、いくつものHTMLドキュメントにリンク可能。
・同じ内容をHTMLドキュメントごとに記述しなくて済むので便利。

「link」タグは、外部ファイルとHTMLファイルをリンクさせるた為のタグ。
CSSのコードを記述した外部ファイルとHTMLファイルをリンクすることによって、外部ファイルに記述されたCSSを利用することができるようになる。

記述例

<head>

//外部CSSファイルへのリンク
<link href="./CSSファイル名.css" rel="stylesheet" type="text/css" />

</head>

linkの属性

属性	意味
disabled	このスタイルシートを無効化。
media=media	スタイルシートを適用するメディアを指定。 screen＝画面など、ページ分割の無いメディア print＝プリンタなど、ページ分割のあるメディア all＝全メディア（既定値）
type=type	スタイルシートの言語を指定。「text/css」＝Cascading Style Sheets 「text/javascript」＝JavaScript Style Sheets
scoped	style要素の親要素をルートとするサブツリーにのみ、スタイルを適用。
href属性	外部ファイルのURL。
rel属性	「リンクタイプ」といい、リンク先のリソースとの関係を記述。 index ----- 現在のドキュメントに対してインデックスを提供する文書へのリンク。 contents ----- 現在のドキュメントに対して目次を提供する文書へのリンク。 next ----- 順序が定められた一連の文書の中で、次の文書へのリンク。 prev ----- 順序が定められた一連の文書の中で、前の文書へのリンク。 start ----- 一連の文書の中の最初の文書へのリンクを示します。サーチエンジンのロボットなどへのナビゲーションとしても利用可能。 stylesheet ----- 別のファイルとして用意したスタイルシートを使う場合に記述。 alternate ----- hreflang属性などと合わせて、ドキュメントの別バージョンへのリンクを用意します。 made ----- これのみrev属性の値となります。ドキュメントの作者を示し、作者へのメールURLや、ホームページのURLを指定。 chapter ----- section ----- subsection ----- appendix ----- glossary ----- copyright ----- help ----- bookmark -----
rev属性	リンクタイプと呼ばれ、リンク元のリソースとの関係を記述。
type属性	参照先の文書のタイプを記述。
hreflang属性	リンク先の言語バージョンを記述。
media属性	リンク先のメディアバージョンを記述。印刷用などへのリンクの際利用する属性。
title属性	リンク先のタイトルを記述。
charset=charset	参照先の文書のキャラクタセットを記述。（Shift_Jisなど） HTML5 には未定義。 disabled = (e4+)このリンクタグを無効化。
hreflang=lang	参照先の文書の言語を指定。
media=media	文書の出力先を指定。 screen - 通常の画面に出力。 print - 印刷プレビュー画面に出力。 all - 全出力先に出力。
target=target	表示ターゲットを記述。
type=type	参照先の文書の文書タイプを記述。
sizes=n	「rel="icon"」の際のアイコンサイズを「sizes="16x16"」という指定で変更する。「sizes="16x16 32x32" 」という複数記述も可能。

Back

「Javascript」外部ファイルとリンクさせる方法

「Javascript」は、HTMLファイルに直接記述することができます。
「Javascript」専用の外部ファイルに記述して、リンクさせる方法もあります。
「Javascript」外部ファイルは、ヘッダー部分にのみ記述することになっています。
記載の順序もプログラム実行に影響することがあります。

「Javascript」外部ファイルとリンクさせる書式

「Javascript」を「HTML」に記述する方法

Back

画像を先読み込みする方法

大きな画像を表示するなどをするには、少し時間がかかります。
なので、前もって、画像を「preload（先読み込み）」しておくと、
画像の表示や切り替えがスムーズになる。
表示のズレなどの防止にもなる。

画像を先読み込みする書式

Back