ホームページのタグ講座

今回は少々閑話休題したいと思います。
今回のテーマは「xhtml」です。

皆さんは「xhtml」というものはご存知でしょうか？
これもホームページタグの一種で、基本はhtmlと代わりません。
ただ、言うなれば「次世代型html」と言ったところでしょうか。

詳しいタグの書き方は今回は省かせていただきますが（次の機会に回したいと思います）htmlとxhtmlの違いは、当然DOCTIPE宣言の書き方からあります。
まぁ、これはxhtmlを知らない方にとっては予想の範疇内でしょう。

これ以外の大きな違いは、閉じタグが必ず必要なことです。
閉じタグとは<span>～</span>の場合の</span>であることはおわかりですね。
大抵のものはこういった閉じタグがありますが、まれに例外として閉じないものがあります。
それが、前回にご説明した画像タグであったり、ヘアラインタグ（<hr>）であったり、またメタタグであったり・・・
xhtmlではこれらも閉じる必要となるのです。

とはいっても、中身がないのに無理矢理</img>を書き込むわけではないのであしからず。
画像の場合、<img src="●" />となります。
・・・htmlとの違い、お判りでしょうか？
そう、最後に「/」が付いていることです。
これが、xhtmlでは閉じタグの代わりになります。

xhtmlと聞くと、htmlとは全く違う難しいもののように考える方がいらっしゃるようですが、htmlとの違いはこういった細かな点にあり、さほど難しいことではありません。
今やサーバーもハウジング（コロケーション）やデータセンターを利用する時代です。
あなたのホームページも、この機会にhtmlからxhtmlへと変更してみませんか？

画像タグ

おはようございます。
前回の宣言通り、今回はホームページに画像を表示させるためのタグについてです。

これが画像タグの基本。
●●●には画像のファイル名が入ります。
画像のファイル名は、ホームページタグのリファレンスサイトによっては「画像のアドレス」だったり「画像のURL」などと説明されていますが、どれも同じものです。
もし「img」というフォルダの中の「icon.gif」という名のファイルならば、「img/icon.gif」と●●●に入ることになります。
リンクタグの「href=～」の書き方と同じとお考えください（リンクタグについては、後日詳しく説明いたします）

画像タグにはいくつかの属性があり、以下はホームページに画像を表示させるうえで特に必要となるものです。

◆width="●" height="●"
画像の大きさを指定します。
widthが幅で、heightが高さ。
●はそれぞれの長さを示す数字で、単位はピクセル（px）かパーセント（%）のどちらかとなります（単位を付けなければピクセルで指定されます）
この属性で大きさを指定しない場合、画像そのものの大きさがデフォルトとして表示されますが、省略せずに記述すべきでしょう。
というのも、ブラウザのバグによって画像に重なってテキストが表示される恐れがあるため。
これらの属性はCSSでも指定することができるので、ホームページのデザインとして画像の大きさが決まっているなら、なるべくそちらで記述することをお勧めします。

◆alt="●"
画像の名前を表す属性で、●に入るテキストは半角全角問いません。
何かしら操作をしない限りホームページに表示されない属性で、これは視覚障害者用の読み上げブラウザなどで読み上げるためのものです。
アクセシビリティのためには必須の属性ですが、デザインのための画像なら不要となるでしょう。

使用可能画像・2

あけましておめでとうございます。
月日が経つのは早いもので、ついこのあいだまで「もう年末か・・・」なんて思っていたら、気がつけば既に年が明けていましたね（笑）
今年もこのホームページタグ講座にて、ホームページタグについてどんどん説明していきますので、どうぞご利用くださいませ。
本年も宜しくお願い致します！

さて、昨年はホームページタグの一環として、ホームページにおける使用可能画像の保存形式についてお話していました。
ご紹介したのは、GIF形式とJPG形式。
これらには、それぞれ適した画像があり、これらの特徴についてもお判りいただけたかと思います。

ですが、ホームページで使用できる画像の形式には実はもうひとつあるのです。
今回は残りのひとつについてご説明させていただきます。

◆PNG形式
PNGはGIFに似て異なるものです。
GIFの場合は特許の関係で作成できる画像編集ソフトが限られてきますが、こちらはその制限を避けるために開発されました。
数年前から既にあった保存形式ですが、W3Cに推奨されていることもあり、ここ最近で広く使われるようになっているようですね。
この形式に適した画像は、個人的な感想ですが、写真と単色画像の中間くらいのものが良いと思っています。
もしくは、その両方。
JPGとGIF双方の特徴を兼ね備えた形式と考えても良いでしょう。
JPGとGIFのどちらかを選びにくい場合にPNGを選択してみてはいかがでしょうか。

・・・さて、画像の保存形式については以上です。
次回は、いよいよ画像のタグについて。

使用可能画像・1

こんにちは。
今回は画像の埋め込みタグについてです。
しかし、タグの前にホームページで使用できる画像について説明しなくてはなりませんので、しばしお付き合いください。

ホームページで使用できるかできないかというのは、保存形式による違いがありますが、基本的にどのような保存形式またどんなファイルタイプでも、サーバーにアップロードすることは可能です。
また、それらのファイルに対するアクセスについても、表示されるかダウンロードされるかの違いはあっても、不可能ではありません。

ただ、ブラウザに画像を表示させるとなると、どのような保存形式であっても可能というわけではないのでご注意を。
Photoshop用の保存形式のままでは、ブラウザでは表示されませんよ。

ホームページに表示させるための画像の保存形式は以下の3つです。
それぞれに特徴がありますので、それらと合わせて覚えましょう。

◆GIF形式
小さなアイコンやドットイラストなど、色数の少ない画像にお勧めの形式。
うまく使いこなすと、大きな画像でもファイルサイズは比較的軽く済みます。
ただし、作成許可を得ている画像編集ソフト（Photoshopなど）でないと、この形式では保存できません。
簡単な「GIFアニメ」という動画も作れます。

◆JPG形式
こちらは写真など色数が多い画像に。
保存の際、ファイルサイズを軽くするために画質を選ぶという方式がとられますが、画質を低くしすぎると汚くなってしまうので、多少重くても高画質の方が良いです。

DOCTYPE宣言

今回は、先日お話した必須のホームページタグ数種類のうち、一番最初のDOCTYPE宣言についてです。
とはいえ、厳密にいうとDOCTYPE宣言はホームページタグとは少し違います。
ホームページタグは<html>～</html>の中に記述するものですが、DOCTYPE宣言は<html>と書き始めるよりも先に記述しなくてはなりません。

DOCTYPE宣言の意義は、これから記述していくHTMLのバージョンや使用を指定し、それに合わせてブラウザにホームページが表示されるようにするものです。
DOCTYPE宣言の種類は、Strict（厳密型）、Transitional（移行型）、Frameset（フレーム用）の3種類。
Strict（厳密型）はHTMLのルールに厳密に従わなければならないもので、Transitional（移行型）はそれよりもルールが緩やかになっているとお考えください。
使いやすさでいえば、もちろんTransitional（移行型）。
Frameset（フレーム用）はその名のとおりフレームを使用する場合のものですが、フレームそのものが推奨されていないのでお勧めできません。

では、以下DOCTYPE宣言の記述方法です。

◆Strict（厳密型）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

◆Frameset（フレーム用）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

ページ全般

今回からはタグの基本について話しながらも、実際にホームページを作れるようにも説明していきたいと思います。
そのためのHTMLの書き方ですが、これまでに述べたタグの入れ子や使い方さえ間違っていなければ、何でも好きなように配置して良いというものではありません。
必須であり、基本でもあるホームページタグはもちろんあります。

まずは細かい説明は省きまして、以下が必須＆基本のホームページタグとその順番です。
（「～～～」と記述したところは任意の箇所です）

<!DOCTYPE HTML PUBLIC "～～～">
<html>
<head>
<title>～～～</title>
</head>
<body>
～～～
</body>
</html>

・・・以上。
ホームページ内どのページにおいてもこれらはセットとして書かなければいけないタグです。
それぞれのタグの説明は以下の通りです。

◆<!DOCTYPE HTML PUBLIC "～～～">
HTMLを書き始めるよりもいちばん最初にこれでDOCTYPE宣言をしなくてはいけません。
DOCTYPE宣言とは、ホームページが作られているHTMLのバージョンや仕様を定めることです。

◆<html>～～～</html>
どこからどこまでがHTML文書であるかを指定するタグ。

◆<head>～～～</head>
この中にはブラウザには表示されないページ情報などを記述します。
ページ情報とは、主にmeta・title・link、他JavaScriptやCSSなども。

◆<title>～～～</title>
そのページのタイトルやホームページ名などを記述するタグ。
ここに書かれた文はブラウザのタイトルバーや検索エンジンの検索結果に表示されます。

◆<body>～～～</body>
ページのブラウザに表示される部分を記述する箇所です。
ここに数々のタグを配置してホームページを作っていくことになります。

タグの種類

ホームページタグは大別すると以下の2種類となります。
例は実際にそれぞれのタグを使用した場合の見た目です。
枠はどの部分にタグを使用しているか分かるように付けただけですので、実際は任意に指定できます。

◆ブロックレベル要素
文書構造を指定する要素です。
開始タグと終了タグの箇所では自動的に改行が入ります。

例
ホームページ内で

ブロックレベル要素

を使用した場合

◆インライン要素
文章内で指定する要素です。

例
ホームページ内でインライン要素を使用した場合

ブロックレベル要素には使用範囲の幅や高さなどが指定できますが、インライン要素では指定できません。
ただし、インライン要素の一種に置換要素というものがあり、それに関しては幅・高さともに指定可能です。

以下はそれぞれのホームページタグ（一部）の一覧です。

◆ブロックレベル要素
div、h1～h6、p、table、ul、ol、dl、blockquote、form、hr・・・など。

◆インライン要素
span、a、em、strong、sup、sub、br・・・など。
（置換要素）
img、input、textarea・・・など。

ホームページタグの中には、特定のタグ同士を組み合わせて使用するものがあり、テーブルやリスト、またフォームタグがその代表です。
例えば、テーブルには少なくとも<table><tr><td>の三種類を組み合わせて使うのですが、それぞれを単独で使用することはできません。

タグの組み立て

ホームページタグにはいろいろな種類があり、HTMLはそれら複数を組み立てて制作します。
ひとつのテキストや内容に対して、タグは複数を併用することができます。
その場合の書き方は・・・

正：<span><a>テキスト</a></span>
誤：<span><a>テキスト</span></a>

正のようにタグで囲んでいるものを更に囲む形となります。
誤のように囲みの構造を交差させてはいけません。
囲んでいるものを更に囲むようにと繰り返していくと、次のようになります。

例

タグの中にタグが入っている状態を「入れ子」といいます。
上の例では分かりやすいように所々改行していますが、ソース内において改行位置は任意となっています。
また、タブでインデントさせてもページの見た目に影響はありませんので、ご自分の編集しやすいよう、入れ子の状態など分かりやすく記述するといいでしょう。

ちなみに、終了タグを書き忘れてもブラウザによっては自動判別して表示してくれるものがあります。
そのようなブラウザで見た目を確認しながらホームページを制作している場合、間違いに気づかないまま作業を進めてしまい、別のブラウザ使用者は閲覧できないという状態になってしまいかねないので、ホームページタグ記述の際には充分注意してください。

見出し

ホームページタグの基礎についても説明するとはいっても、やはりこのブログの狙いは、間違ったタグの使用を正すことです。
とはいえ、今では1Uサーバーやサーバー販売にに興味がある僕自身も、当初は間違えて覚えてホームページを作っていました。
そんな僕に皆さんを叱咤する権利はありません。
ぜひ一緒に知識を改めていきましょう。

今回は見出しタグについてです。

◆見出しタグ（<h1>～<h6>）

見出しを指定するタグは<h1><h2><h3><h4><h5><h6>の六種類あります。七つ目以降はありません。
これを指定したテキストは、属性での指定がない限り太字になり、<h1>がいちばん大きなフォントで、<h2><h3>・・・と数字が大きくなるにつれて小さなフォントで表示されます。
間違えてはならないのは、決してテキストの大きさを指定するタグではないということ。
これらはあくまでも見出しを指定するタグなのです。

使い分け方は、見出しの重要度です。
例えば見出しがそれぞれ章（大見出し）・節（中見出し）・項（小見出し）に分けられる場合、順番は以下のようになります。

ここで注意。
章・節・項の関係さえ間違っていなければ<h2>以下はひとつのページにおいて複数指定できます。
しかし、<h1>はページにおける最も大きな見出しとならなければいけないため、原則1ページにひとつか指定してはいけません。

また、<h1>のすぐ後に<h3>を使用するなど、途中にあるべき見出しをとばしての指定は適切ではありません。
1～6の順序をきちんと守って、正しい文書構造のホームページを作らなくてはならないのです。

タグの構造

ホームページ制作の経験がある人向けに、タグの使い方からいずれは専用サーバについても説明していこうかと思っていましたが、せっかくなので、おさらいがてら基本も述べていこうかと思います。

HTMLソースはタグの組み合わせによって書きます。
ではタグとは何かというと・・・

この場合「テキスト」という文字を囲んでいる英字がそうです。
文字より先の<a>を開始タグ、後の</a>を終了タグといい、このタグに何か指定を加えることで中の文字を装飾したりできます。
たとえば・・・

開始タグの中にこのような指定を加えました。
この場合、

a　←タグ名（要素）
href=”"　←属性
#　←値（属性値）

・・・という構造になります。
属性はひとつのタグの中に複数指定することができます。
例えば・・・

タグと属性には全角文字は使えません。
必ず半角英字での記述となります。
半角英字であれば大文字小文字どちらでも記述できますが、XHTMLでは大文字は使用できないのでご注意ください。

また、値を囲むダブルクォーテーションは、値が数字のみの場合などは省略可能です。
しかし、こちらもXHTMLでは必須となりますので、全ての場合においてダブルクォーテーションで囲んでおくようお勧めします。

ほとんどのタグでは開始タグに対し終了タグを必要とします。
一部、終了タグを必要としないタグもありますが、それについてはまた後ほど。

次ページへ »

CATEGORIES

LINK

META