HTML - ウェブ制作テクニック - テクニック

HTML Standard

HTML5はなぜ廃止された？いつからなのか、仕様変遷も紹介！
HTML Standard 日本語訳
 HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！

HTMLの基本

HTMLの利用方法

HTMLはWebページを作成するためのマークアップ言語で、Web制作を行う上での最低限必要な知識です。
HTMLではWebページの構造や表示方法を指定する事が可能で、基本的には文字列の前後に対応したHTML要素を記述します。
利用する際は専用ソフトやエディタを使用し、拡張子を「.html」または「.htm」として保存すればブラウザで表示した際に指定通りに表示されます。
また、CSSやCMSを利用する事でより効率的に管理できますが、HTMLはこれらがなくても単体でWebページを作成する事ができます。
HTMLとは
 Webプログラミング

半角英数

HTMLを記述する場合は、全て「半角英数字」で記述する必要があります。

特殊文字

Webページ上で文章の一部として記号を表記する場合に、HTMLでも解釈できるものはできるだけ特殊文字を利用します。
これによりブラウザが間違って解釈する事がなくなるので安全です。

要素の配置順

1つの文字列に対して複数の要素を利用する場合は、外側と内側のどちらにどの要素を使うかが決められています。
この配置が違っても正常に表示される場合もありますが、W3Cでは大きな減点になります。

HTMLの処理速度

HTMLでは複雑な構造は処理速度の低下に繋がるため、入れ子などを利用する場合はできるだけシンプルな構造にする必要があります。

表示と非表示

コードの表示（特殊文字、code要素、pre要素）

ブラウザ上でHTML要素をそのまま表示させる場合は、コードの括弧部分を特殊文字に変えます。
また、code要素やpre要素を利用する事もできますが、これらの要素を使用してもコードの重要な部分は特殊文字に置き換える必要があります。
code要素
 pre要素

特殊文字：<～>→<～>
pre要素とcode要素：<pre><code>～</code></pre>

文字列の非表示（コメント）

「」で囲んだ部分は、文字列でもコードでも全てがブラウザ上では非表示になります。
また、改行を入れても効果は変わらないため、複数行にわたる長文を非表示にする事もできます。

改行と段落

改行（br要素）

「 」を行末に書くと改行されます。

～

段落（p要素）

「」と「」で囲むと段落されます。
段落にすると上下に一行分の空白行ができますが、CSSをうまく使えば回避できます。

～

リンクの張り方

同一ページで開く

これがリンクコードの基本的な書き方で、デフォルトでは同一ページで開きます。

<a href="リンク先アドレス">リンクタイトル</a>

新しいページで開く

リンクをクリックした時に新しいページで開くようにするには、リンクコードに「target="_blank"」を入れるだけです。

<a href="リンク先アドレス" target="_blank">リンクタイトル</a>

ページ内リンクの張り方

リンク先

リンク先には以下のように記述します。

<a name="キーワード">リンクタイトル</a>

リンク元（外部ページ、同一ページ）

リンク元は以下のような記述になります。

外部ページ：<a href="ページアドレス#キーワード">リンクタイトル</a>
同一ページ：<a href="#キーワード">リンクタイトル</a>

画像の表示方法

ファビコン

サイト専用のアイコンであるファビコンの表示方法です。
まずファビコンファイルを作成して、サイト内のフォルダに保存します。
後は全てのHTMLファイルのヘッダー内に以下のように記述するだけです。

画像（img要素）

サイト上で画像を表示する方法です。

クリック後の画像を指定する方法

画像をクリックすると拡大表示したり、別画像に置き換えたりする事ができます。
外側のコードでクリック後の画像を指定し、内側のコードでクリック前の画像を指定します。
表示画像とクリック後の画像は別々の画像でも同じ画像でもかまいません。
以下はサンプル画像として1つの画像を利用し、サイズ変更（縮小画像→拡大画像）の形にしています。

APNGの表示方法

APNG（アニメーションPNG）をサイト上で表示する方法です。
あまり大きなデータだと正常に表示されない場合があります。
動画ファイルのAPNG抽出