ホームページのタグ講座

ホームページ作成スクールに使用するドキュメントの作成ですが、なんとか一段落しました。
連日集中して作業していたおかげでなかなか順調に進み、かつ良いものができたと自負しております。

さて、当サイトでのタグ講座ですが・・・xhtmlでしたね。
短期間とはいえ更新から遠ざかっていたためか、それともホームページ作成スクールのことを考えていたためか、どこまでこのタグについて説明していたのか・・・（汗）

説明している期間も長くなっていますし、少々ここらでこれまでのxhtmlについてをまとめてみるとしましょう。

◆xml宣言を記述する
　例：<?xml version="1.0" encoding="Shift_JIS"?>

◆DOCTYPE宣言をxhtml用のものにする
　例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

◆html要素をxhtml用のものにする
　例：<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

◆閉じタグの無いタグに、それに代わる記述を付け足す
　例：<br />など

◆全て小文字で記述する
　例：<div class="～">→○、<DIV CLASS="～">→×

◆引用符を省略しない
　例：<div width="100">→○、<div width=100>→×

◆閉じタグを省略しない
　例：<p>　～TEXT～　</p>→○、<p>～TEXT～→×

htmlタグとは異なるxhtmlタグの決まりごとは、これら以外にももう少しあります。
最初のうちは面倒と感じるかもしれませんが、覚えてしまえば難しいことはありません。
あと少しだけ、どうぞお付き合いください。

地元のスクールについて

こんにちは、随分ご無沙汰しております。
実は地元のホームページ作成スクールから要請を受けまして、初心者向けのホームページタグ講座の講師を務めることとなり、そのためのテキストドキュメントを作成していました。
本当のテキストとしては出版されているタグの本を利用するのですが、それを判り易く噛み砕いて、かつ実際にタグを組みながらホームページ作成を覚えるためのドキュメントです。
テキストを頭から読んでいくだけでは、ホームページタグの基本を学んでいるつもりでも、いざタグを組んでホームページを作るとなると、最初に覚えたはずのホームページタグの基本を忘れてしまっているものなのですよ。
タグのもっとも覚えやすい方法は、実際にタグを組んでホームページを作りつつ、その都度タグの必要なことを覚えて行く方法だと思っております。
その方が、ホームページタグと必要事項を結び付けて覚えられますし、また何度も繰り返しホームページタグの基本を確認できますからね。

その地元のホームページ作成スクールは、最終的にはアフィリエイト用のホームページ作成を目的としております。
そのため、受講生が学ばなければいけないのはHTMLやホームページタグのことばかりでなく、SEOや検索エンジンのこと、マーケティング（SEM）に関すること、ホームページデザインに関することなど、タグ以外にも様々です。
とはいえ、私が講師を担当しているのはそれらのうちのHTMLやホームページタグについてですので、私にとってタグは専門的なことですからそれほど重荷だとは思っていません。
むしろ、楽しくやらせていただいております。

ただ、注意しなくてはならないのは、HTMLやホームページタグについてとはいえ、タグはSEOやホームページデザインと無関係というわけではないことですね。
SEO対策にはホームページタグの組み方も関係してきますし、ホームページデザインはタグを組んで作るものですから。

なにはともあれ、ホームページ作成スクール開催はこれからですので、あと少し、はりきってドキュメントを作成していきたいと思います。
忙しさゆえ、個人的なお話しで失礼いたしました。

htmlとxhtmlのタグの違い・3

ホームページタグをxhtmlで記述する場合、htmlで省略できていたものがxhtmlでは省略不可となっています。
これを面倒と思うかどうかは人それぞれですが、個人的には省略していない方が正しくきちんとホームページタグを組めているように思えます。
そのため、例えホームページタグがxhtmlではなくhtmlでも、なるべくなら省略せずに細部まで記述しておきたいものです。

◆引用符を省略しない

ホームページタグの属性値のうち、「width」や「height」といった数字のみで記述できるものに関しては、htmlの場合はそれら値を囲む引用符は省略可能でした。
しかし、xhtmlでは省略できず、属性値の全てが引用符で囲む必要があります。

例：
<div width="100" height="150">　→　○
<div width=100 height=150>　→　×

◆閉じタグを省略しない

ホームページタグの種類のうち、body、p、liといった一部のタグに関しては、html場合は閉じタグは省略可能となっていました。
しかし、xhtmlでは省略できず、タグの全てに閉じタグを加える必要があります。

例a1：　→　○
<html>
～（中略）～
<body>
<p>　～TEXT～　</p>
<p>　～TEXT～　</p>
</body>
</html>

例a2：　→　×
<html>
～（中略）～
<body>
<p>　～TEXT～
<p>　～TEXT～
</html>

例b1：　→　○
<ul>
<li>　～リスト～　</li>
<li>　～リスト～　</li>
</ul>

例b2：　→　×
<ul>
<li>　～リスト～
<li>　～リスト～
</ul>

htmlとxhtmlのタグの違い・2

引き続き、xhtmlタグの書き方です。
基本的なホームページタグの書き方としてはhtmlと然程違いはないので、htmlタグの場合と異なる箇所のみ説明します。
今回説明するのは、xhtmlを記述する際に忘れがちな点です。

◆閉じタグ
htmlの基本の書き方は、対象のテキスト等を開始タグと閉じタグで囲む方法です。
（例：<span>テキスト</span>）
ですが、画像タグの<img>を始めとして閉じタグがないものもいくつかありますね。
xhtmlでは、それらの全てにも閉じタグを要素として付加させます。
以下の例をご参考下さい。

タグ内の最後に、終了タグの代わりとして半角の“ /”を入れ込みます。
半角スペースもお忘れなく。

◆小文字で記述する
htmlではタグ名、要素名などを大文字での記述も可能でしたが、xhtmlでは全て小文字で記述することとなっています。
これまで全て大文字で、またはタグと要素で大文字小文字を使い分けてホームページを制作していた方はご注意ください。

例：
<div class="～">　→　○
<DIV class="～">　→　×
<div CLASS="～">　→　×
<DIV CLASS="～">　→　×

以上はホームページタグで特に間違えやすく、また忘れやすい違いですが、htmlとxhtmlの少ない違いのうちのたった2点です。
覚えて習慣づけてしまえばミスのないホームページを作成できますので、最初のうちは気を付けて記述していきましょう。

htmlとxhtmlのタグの違い・1

ホームページタグの書き方をhtmlからxhtmlへ移行する方が徐々に増えつつあります。
xhtmlとは、前回も述べた通り次世代型htmlといったようなタグ。
まだ移行していない方も、これを機にxhtmlへの移行に挑戦してみませんか？
以下に、移行の方法・・・htmlとxhtmlのタグの違いを説明していきます。

◆xml宣言
以下のxml宣言をソースの最上部（DOCTYPE宣言より上）に加えます。
使用エンコードによって「Shift_JIS」の部分を変更してください。

<?xml version="1.0" encoding="Shift_JIS"?>

◆DOCTYPE宣言
DOCTYPE宣言を、以下のxhtml専用のものにします。

Strict型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

◆html要素
html要素を、以下のxhtml専用のものにします。
言語コードを忘れずに。

xhtmlについて

今回は少々閑話休題したいと思います。
今回のテーマは「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">

次ページへ »

CATEGORIES

LINK

META