HTML

HTMLの基本

HTMLの利用方法

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

半角英数

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

特殊文字

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

要素の配置順

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

HTMLの処理速度

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

表示と非表示

コードの表示(特殊文字、pre要素)

ブラウザ上でHTML要素をそのまま表示させる場合は、コードの括弧部分を特殊文字に変えます。
また、pre要素を利用しても表示できますが、こちらは制限も多く利用できる場面が限定されるのであまりおすすめできません。
特殊文字
ソースと同じスペースを表示する pre タグについて

<>&lt;&gt;

文字列の非表示(コメント)

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

<!---->

改行と段落

改行(br要素)

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

<br>

段落(p要素)

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

<p></p>

リンクの張り方

同一ページで開く

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

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

新しいページで開く

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

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

ページ内リンクの張り方

リンク先

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

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

リンク元(外部ページ、同一ページ)

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

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

画像の表示方法

画像(img要素)

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

<img src="画像ファイルのパス" alt="画像のタイトル">

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

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

<a href="クリック後の画像ファイルのパス" width="画像の横幅" height="画像の縦幅">
<img src="クリック前の画像ファイルのパス" width="画像の横幅" height="画像の縦幅" alt="画像のタイトル">
</a>

オンラインPC館