ホームページ作成・ウェブデザイン制作・キーワード最適化・ウェブサイト構築ノウハウ
Space Make
独立個人起業初心者が知っ得ウェブデザイン速習法



ホームページセミナー
| HOME || サイトマップ |
ホームページ作成/ウェブデザイン制作の秘訣は、キーワード対策とHTMLファイル最適化(タグ・CSS・SEO)、アクセスアップの秘訣は、注目度を集める訴求力と信頼性とアクセシビリティとユーザビリティとインパクト―
ウェブページ HTML[Hyper Text Markup Language] は、ハイパー・テキスト・マークアップ言語のこと

☆ タグ(符丁記号)とエクステンション(拡張子)

タグ』というワードで一般的に知られてるものとしては、目印なり内訳などとして用いる小さい荷札とか、宛名書きラベルで用いられる裏つきのシール紙などなどありますが、HTMLファイルでいうところの『タグ』とは―

< >( )』など、データとなる事物のスタイルを指令する定められた書式のコードソースを入記する、括弧のカタチをした記号のことを指し、そこに命令符なるコードソースを入記することで表示スタイルが決められ―

ウェブページが表示されるブラウザ上において、命令符通りの構図で表現されるようになってるわけです。


タグ内に記述するコードには、『必ず記述すべき符丁コード』と、『必要に応じて記述する符丁コード』の2種類に大別され、必要に応じて記述する符丁コードには、『必ず閉じなければならないタグコード』と―

閉じる必要のないタグコード』とがあり、タグ符丁内に記述するコードの数は、想うより結構ありますから、そうしたタグコードを一気に覚え込むというのは、初めて知るという人にとっては至難の業だろうと想います。


ひとつひとつ試しながら理解していく方法が早く覚えられると思いますので、順序立てて解説致します。

1.必ず記述すべきタグ符丁コード

◇ 書き方例 【HTMLの代表的なタグ】(必要なタグ符丁コードは、基本的にこれだけです。)

<HTML>
<HEAD>
<title>
***(タイトル文)***</title>
<meta>
</HEAD>
<BODY>
***ドキュメント(本文)<BR>
************
</BODY>
</HTML>

<HTML>=閉じる必要あり】 『HTML(ハイパー・テキスト・マークアップ・ランゲージ)を提示するタグコード』

このタグコードをファイルページの最上部冒頭に入記して最下部の最後で閉じる、これによってパソコンOSに『HTMLファイル』ということを認識させてブラウザに表示させる、そのために告示するタグコードとなっています。

この定義を相対的に捉えますと『ウェブページのファイルと認識されない場合は、ブラウザには表示されない』或いは、『おかしな表示の仕方をしたり、表示速度に悪影響を及ぼし表示されるまでに時間を要したり』―

このような事態が生じてアクセス数が伸び悩めば、ウェブサイトとしては致命的になってしまう可能性もありますし、『信頼性』においても『絶対に記述するべき重要度の高いタグコード』というわけですね。


<HEAD>=閉じる必要あり】 『タイトルとかコンセプトなど、概要情報を記すヘッド(頭部)タグコード』

HTMLファイルの本文の上部(ヘッダー)に、そのページのタイトルを入記する<TITLE>タグコードをはじめとして、ウェブサイトにおけるミッションやビジョン、テーマやコンセプトなど、重要となる情報を端的に記載する―

タグ属性枠において、キーワード、サイト名/会社名、成作者名/責任者名、概要文/概説といった、ウェブサイトに関する情報を記載する各<META>タグコードは、このヘッドタグ枠に入記するようになっています。

これらが検索エンジンの検索結果ページに反映され、ランクの効力如何に影響してくると云われています。
<META>タグについての詳細はこちらをご覧下さい。⇒




<TITLE>=閉じる必要あり】 『ウェブサイトのタイトルなりページ別タイトルなどを提示するタグコード』

ウェブサイトにおける各ページのタイトルは、ヘッダーの<HEAD>タグ属性枠内に<title>タグ枠を設定して、その枠欄に入記するよう定められていますから、そこに記述されたそれぞれのウェブページのタイトルは―

パソコンブラウザ(閲覧ソフト)を立ち上げた際に、上部バー左に表示されるようになっており、検索サイトなどで検索された際、検索結果ページに反映されて掲示されたり、閲覧したアクセスユーザーが気に入って―

PCブラウザの『お気に入り(「ブックマーク」)』に登録したりと、それ相応に大事な役割を担ってるものです。


そのため、制作されたウェブサイトにおいて、検索サイトから多くのユーザーにアクセスしてもらうべく、メインの重要な語句とする『キーワードを組み込んだフレーズ』である文言が最大のカギを握ることになりますから―

自身の意図するキーワードでヒットさせたいと、どなたもが連日のように切磋琢磨されてるかと推測いたしますが、それを実現させるためには、『検索エンジン』に配慮した『適切なキーワード対策を講じること』―

これが一般的に『SEO対策』と云われてるもので、ファイル構成における最も重要な課題となっています。


<BODY>=閉じる必要あり】『ブラウザで表示されるウェブページコンテンツ枠を提示するタグコード』

<TITLE><META>タグを除いて、この先解説するタグコードは、全てこのタグの枠内で使用して、スタイルにおいてビジュアル的要素となる様々な表現を醸し出すことが可能になり、ウェブデザインの要となります。

◇ 書き方例
<BODY>
******(本文)******<BR>
******(本文)******
</BODY>
<BODY BGCOLOR="(色名)"><TEXT="(色名)">
(色)付き背景の中に(色)文字で表示しています。
</BODY>
― 色の指定方法はこちらをご覧ください。⇒




2.必要に応じて使用するタグ

<BR>=閉じる必要なし】 『文書の改行をさせる際に指定するタグコード』

HTMLファイル内の本文中の文書を改行して段落させたい場合、この<BR>という符丁コードをあてがうことによって、パソコンOS(オペレーティング・システム)の解析機能がそれを読み取って、改行して段落を施した―

文字列をブラウザ上において反映させることを可能にしてますから、改行を命令するこのタグコードを入記せず普通に改行しても、PCのブラウザ上において反映されることなく表示されてしまいます。

また、この<BR>タグそのものに対して、スタイルコードでサイズを指定すれば、大きさを調整することができ、そのことから改行された際の文字列の行間幅を調整することも可能になります。

※ 行間幅を直接指定するスタイルコードもありますので、そちらで調整する方がベターですけどね。


<P>=閉じる必要あり】 『文書の段落分けをする際に指定するタグコード』

試しにやってみられたらわかりますが、実のところ、この<P>というタグコードは閉じなくても使うことができます。

ですが、文書の位置を指定する<ALIGN>タグコードを用いた場合には、特定の箇所で閉じなければページ全ての文書などの位置が右寄りや中央寄りになるなど、ビジュアル的に不都合な表示になってしまいます。

ですから、HTMLファイルに記述したソースコードなどをチェックした際に、ワケが解らず困惑するようなことにならないように、『閉じるべきタグコードは忘れずにキッチリと閉じる』ということだけは心しておくべきでしょう。

※ 因みに、<p>の段落コードで文章を改行した場合、<br>タグコードで改行した場合の行間幅よりも若干広めになるため、読み易さをという点を考慮すれば、<p>タグコードによる改行の方がベターでしょう。


<H>=閉じる必要あり】 『見出しタイトルを設けたい際に指定するタグコード』

文書の見出しを設定する際に指定するタグコードで、文字の大きさが1〜6(<H1>〜<H6>)までのレベルで分かれていて、<H1>が最も大きい文字で、<H6>が最も小さい文字で表示できるようになっています。

これに加えて位置を指定することができ、『中央寄せ・右寄せ』といった具合に表示させることができます。
(位置を指定するノウハウについては<ALIGN>タグコードのところで詳しく解説します。)

この見出しタグコードの場合は、通常<FONT>タグコードのように<COLOR>の色指定タグコードを組み込むことはできませんが、<FONT>タグコードを組み込むことによって、見出しに色をつけることができます。

<H></H>の間に<FONT COLOR="(色指定)">******</FONT>といった具合に、色指定のタグコードを挟み込むように組み合わせることによって、好みのカラーで見出しを表現することができるわけです。
― 実際の設定例はこちらをご覧ください。⇒



<FONT>=閉じる必要あり】 『文字の書体や大きさ、色などを設けたい際に指定するタグコード』

テキスト文書の文字に、書体、大きさ、カラーなどを設けたい際に、このタグコードを設定して表現させます。

* 【書体を指定する場合】=FONT FACE="(『MS ゴシック』とか、『MS 明朝』など他)"
* 【大きさを指定する場合】=FONT SIZE="(『1〜7』の数字、もしくは『-3〜+3』の数字)"
* 【色を指定する場合】=FONT COLOR="(『BLACK』や『WHITE』など、あるいは『#000000』など他)"


◇ 書き方例
<FONT SIZE="7" COLOR="RED">大きな赤い文字</FONT>
<FONT SIZE="1">
フォントサイズ1の文字</FONT>
<FONT COLOR="BLUE">【<FONT COLOR="#0000ff">】
青色指定だけの文字</FONT>
<FONT SIZE="4" FACE="MS 明朝">
フォントサイズ4と書体(明朝体)を指定した文字</FONT>
― 実際の設定例はこちらをご覧ください。⇒



<S>=閉じる必要あり】 『文書文字上に訂正線(棒線)を設定したい際に用いるタグコード』

このタグコードは、文書なり価格などにおいて訂正する必要性のある箇所に指定するもので、このタグコードを指定することによって、それらの横中央に指定した範囲だけ訂正線が表示されるようになっています。

例えば、正しい⇒間違い】【5000円⇒3500円】【すこぶる全く笑えない複雑な心情を汲みとった】といった具合で、訂正する必要のある事柄に対して指定すれば、有用性からその趣旨を提示することができます。


<HR>=閉じる必要なし】 『ページ上に罫線(横線)を設定したい際に用いるタグコード』

ページ上で意図する場所に罫線を表示させることができ、その罫線の長さとか太さなどの指定をすることができますし、中央や右といった位置の指定、罫線に影をつけるなどといった指定をすることもできます。
位置の指定については<ALIGN>タグコードのところで解説します。

* 【普通の罫線を指定】=<HR>
* 【罫線に長さを指定】=HR WIDTH="(幅の数字『ドット数か% (表示される範囲幅のものに対する%)』)"
* 【罫線に太さを指定】=HR SIZE="(太さの数字『ドット数で指定』)"
* 【罫線に影ありを指定】=HR SHADE

― 実際の設定例はこちらをご覧ください。⇒



<ALIGN>=単独では使えない】 『見出し・段落・罫線・文字・画像などの位置指定に使える』
各項目の表示位置を変更することはできますが、<FONT>タグとを組み合わせることはできません。

* 【左寄せに設定】⇒ ALIGN="LEFT" (『左寄せ』が標準であるため、通常、使うことはありません)
* 【中央(センター)に設定】⇒ ALIGN="CENTER"
* 【右寄せに設定】⇒ ALIGN="RIGHT"


◇ 書き方例
<H1 ALIGN="CENTER">見出し1を中央に表示する</H1>
<H1 ALIGN="RIGHT">
見出し1を右側に表示する</H1>
<SPAN ALIGN="RIGHT">
文字や画像の他全てを右揃えにする</SPAN>
<DIV ALIGN="RIGHT">
文字や画像の他全てを右揃えにする</DIV>
<P ALIGN="RIGHT">
文字や画像の他全てを右揃えにする</P>
― 実際の設定例はこちらをご覧ください。⇒



主に使用するタグコードについて解説してまいりましたが、ウェブページの文章は全て左から右へと横並びに書き綴られてるだけのことで、『これらのタグ指令によってパソコンのブラウザ画面に反映させてる』というわけで―

『文字や画像をその場所に記入したり設置してるわけではない』ということがお解りいただけたことでしょう。


こうしてみましても、最初からいきなりたくさんのタグコードを一気に覚えるなんて至難の業でしょ?

ですから、ここで解説した手順を参考にしてタグコードひとつひとつを試しながら、必要に応じてテキストを見直して検証する、それを繰り返しやってるうちにそれぞれのタグコードが自然と理解できるようになってきます。

そうやって知識を深めながら覚えてゆくというやり方がベターかと思いますが、いかがでしょうか?

以上、最低限覚えておくべきタグコードに関する解説は終わりです、用例を参考に活用してみて下さいね。



☆ ファイルの拡張子と種類

表計算ソフト(エクセル)やワープロソフト(ワード)、グラフィックスエディタ(画像の処理や作成を施すソフト)などで作成した各種データをファイル形態とした容で保存し、それぞれのファイル単位でデータのやりとりをします。

例えば、メールでやりとり(送受信)する場合、テキストメッセージとは別に、添付ファイルという容にして送受信することができますし、圧縮ファイルという容にすれば、ダウンロードによるやりとりをすることができます。


1.テキストファイルとバイナリファイル

ウェブページの殆どは、テキストファイルとバイナリファイルの2種類のフォーマット(形式)ファイルで形成制作されており、テキストファイルは文字のみで構成されるファイルで、Windowsでは『メモ帳(ノートパッド)』とか―

ワードソフトなどのテキストエディタで開示することができ、ワープロソフトなどを使用してもテキスト形式で保存することができますし、エクセルといった表計算ソフトを使用しても、『SYLK形式』や『CSV形式』といった―


テキストファイルとして保存することができ、これらのファイルの文字の記録方法(CSVはデータをカンマで区切る)も名称も異なりますが、どちらも文字だけで構成するテキストファイルであることには変わりありません。

テキストフォーマットによるファイルの特徴は、テキストエディタで簡単に開示することができ、スキルがあれば、編集ができることで、HTMLファイルにおいても、書き込まれてる内容の全てが分かるようになってます 。


テキストファイルに対してバイナリファイルというフォーマットファイルがありますが、アプリケーションプログラム本体や画像ファイル、音声ファイル、表計算ソフト・ワープロソフトなど独自の保存形式のものを云います。


◇ テキストファイルとバイナリファイルの相違点

テキストファイル

文字で構成されるファイル
← テキストファイル

文字符号で構成されるファイルで、メモ帳などのテキストエディタで開示して編集することができる
010101010101 010101010101 010101010101 010101010101 ← バイナリファイル

コンピュータが解読表示し易い記号で構成されるファイルで、専用アプリでのみ編集することができる

ウェブページを構成するHTMLファイルなるものは、テキストエディタで開示できて編集も可能な、基本的にはテキストファイルであり、そのページ(ファイル)内に組み込まれる専用の別フォルダに格納されてる―

グラフィックス(画像)とかアニメーション・カートゥーン(動画)、ボイス・サウンド(音声)などは、意味不明の記号やグラフなどで細かく大量に組み合わされて構成されるファイルで、バイナリファイルと云われており―

それをコンピュータ処理をすることによって、ブラウザ上で再現されるようになってるというわけです。


バイナリファイルは、それに適応した専用のアプリケーションソフトウェアでのみ開示できるものなので、テキストエディタなどで開示しようとすれば、パソコンがフリーズ(停止)するなど、故障にもなりかねないため―

専用のフォーマットツール以外のものでは絶対に開示しないこと、これをシッカリと意に留めておきましょう。


◇ ファイル名をつける際の留意点

ファイルに付けるピリオドコードの『ドット』というのは、基本的に拡張子とファイル名との区切りとして用いるようになってるものですので、例えば、『index.page01.txt.htm』といったように、いくつもドットを用いた場合―

index.page01.txt』までがファイル名ということになり、ファイル名として使えなくはないのですが、8文字前後の半角英数字で、解り易く簡潔に表記するのが好ましいとされていますから、これをファイル名としたい―

というのであれば、『index_page01-txt』といった具合に、ドット以外の記号にして、ドットをファイル名には極力組み込まないようにするのがベターなので、このことも意に留めておきましょう。


因みに、Windowsの場合、『\/:;,"?<>*|』等の記号はファイル名に使えないようになってますし、『+=&』や空白などの使用もインターネットの制約上から禁じられています。



2.ファイル名の付け方

大概の人は、日本語和名をあてたローマ字で表記して、解り易いファイル名を付けることが多いかと想いますが、ファイル名を付ける際にも、なるべく『SEO』を意識することが重要なポイントになりますから―

『テーマなどでキーワードを意識する』・『必ず半角英数1バイト文字を使う』・『拡張子は適切に付ける』


拡張子が必要なワケ

例えば、『mypage.html(マイページ【ドット】エィチティーエムエル)』というファイル名を付けた場合、ドットの後の「html」が『拡張子』と呼ばれるもので、ワープロソフト「Word」のドキュメントファイルであれば『.doc』―

テキストファイルであれば『.txt』といった具合に、いわゆる、そのファイルがどういった定義を持った性質のものなのかをコンピュータが識別するために宛がわれた専用の記号と覚えておきましょう。


Windowsの場合、これらのファイルにカーソルを合わせてダブルクリックするだけでアプリケーションが自動的に起動するわけですが、いわゆるOSが拡張子によってそのファイルを認識して表示させる」というわけです。

Macintosh(マック)の場合は、基本的に拡張子というのは存在してなく、違った方法で認識するようになってるため、マックでウェブページを作成した際は、ファイルに必ず拡張子を付けるようにする必要があります。


『http://www.7676space.com/kantan/index.html』⇒これは「URL」といわれ、ウェブ上の場所を指定する表記方法のことで、一般的にホームページ/ウェブサイト固有のアクセス用アドレスといったものです。

www.7676space.com』はドメイン名、その後の『kantan』はフォルダ名、『index』というのがファイル名となり、「.html」と記述し、この「.html」という拡張子があることによって、それがホームページを表示する―

HTML』によって記述されてるファイルと認識して、内容を解析して表示するシクミになってるわけです。


実際に拡張子を省略してURLを入力した場合、indexも「フォルダ」というように認識するか、ファイルと認識したとしても、どんなファイルがあるのかを認識することができないため、正常に表示されません。

要するに、どんなファイルであっても、それに適合した拡張子を付ける必要があり、マックでウェブページを作成した際には、必ず拡張子を付け、ファイル名、拡張子ともに小文字で記述するのが好ましいとされています。



2バイト文字が不適切な理由

【abc=ABC=123】←これが1バイト文字(『半角英数字』とも言います。)

【ABC=123=あいう】←これが2バイト文字(『全角英数字』とも言います。)


通常『全角文字』と言われる「2バイト文字」と云えば、日本語というイメージが強くありますが、漢字文化圏とか、タイ語、アラビア語などのようにアルファベット文字以外を使う国は、2バイト文字が使われています。

「【ABC】ってアルファベットだろ?」なんて疑問も持たれるだろうかとは思いますが、これはワープロソフトなどで日本語を打つときに都合のよいように割り当てられ文字で、そもそもの定義概念が異なってるわけです。


アルファベット文化圏では、原則的に2バイト文字を使用するといった概念はないため、その昔、開発されたアプリケーションを2バイト文字使用文化圏向きに移植するときに、かなり労力がいったという経緯があり―

それらの反省をふまえてWindows2000において『UNICODE』という2バイト文字変換プログラムが新たに開発され、その後、各国の言語に対応できるシステムが開発されて現代に至ってるわけです。


ちなみに、1バイト文字であっても『半角カタカナ』というのも日本語文字ですから、基本的に『半角英数』としては不適切ということになり、そもそも『半角英数』の1バイト文字を基として発展してきたわけですから―

グローバルなインターネットにおいては、1バイト文字がスタンダードとなるのは当然といえば当然でしょう。



長いファイル名がよくない理由

長いファイル名を付ける際に考慮すべき大事なことは、『どんな内容のファイルかが判るようにする』ということで、メリットはこんなところですが、インターネットで使用されてる最もポピュラーなUNIXというOSにおいては―

フォルダの名称も含めて合計255文字までという制限が設けられており、これはWindowsでも同様ですし、Macの場合は31文字までとなっていて、規定数を超えるとファイル数も限定されてくるということです。



ウェブデータにおけるマメ知識

パソコンがWindowsの場合、あるはずのウェブファイルの拡張子が見えてない、なんてことがありませんか?

そういった場合には、ウィンドウメニューの【ツール(V)】→【フォルダオプション(O)】をチョイスし、表示されるダイアログボックスの中にあります「表示」タブ欄の「登録ファイルの拡張子は表示しない」のチェックを消しましょう。


また、何かしらのバイナリファイルをダブルクリックした際に、「ファイルを開くアプリケーションの選択」と記載されたボックスが表示されることがあろうかと思いますが、気になるからといって、ヘタに表示させようものなら―

パソコンがフリーズするなど、正常に作動しなくなる場合もありますから、どのアプリで開示できるのか解らないのに、「試してみよう!」なんてことは考えず、躊躇うことなく「キャンセル」ボタンをクリックしましょう。




3.代表的な拡張子の種類

● html(htm)
画像表示や文字表示などに関して、テキスト形式で記述するHTMLファイルに付ける拡張子です。

● jpg(jpeg)・gif・png
* jpg(jpeg)はJoint Photographics Experts Group bitmapの略称
* gifはGraphics Interchange Formatの略称
* pngはPortable Network Graphicsの略称
これらはグラフィックス(画像)ファイルに付ける拡張子で、画像処理ソフトなどのアプリケーションによって開示することができるバイナリファイルと言われるものです。

● mid(midi)・wav・aiff・ra(ram)
* mid(midi)はMusaical Instrumental Digital Interfaceの略称
* wavはWAVEの略称
* aiffはApple Interchange File Formatの略称
* ra(ram)はReal Audio Moviesの略称
MediaPlayerとかQuickTimePlayerといったソフトで再生できるバイナリファイルです。

● mpg(mpeg)・mov・qt・avi
* mpg(mpeg)はMoving Picture Expert Groupの略称
* movはMovie Filesの略称
* qtはQuickTime Files の略称
* aviはAudio Interleaving略称
MediaPlayerとかQuickTimePlayerといったソフトで再生できるバイナリファイルです。

● cgi・shtml
* cgiはCommon Gateway Interfaceの略称
* shtmlはServer side include HTMLの略称

いずれもテキスト形式のファイルで、『shtml』は、サーバーにおいてアンケートによる集計など、特殊な動作をさせる機能に用いられる拡張子で、サーバー内部において計算解析した結果をHTML形式に変換してからユーザーのブラウザに送信されるため、ウェブページ制作者以外にファイルの中身を知ることはできません。

以上、手元で作業する際に最低限覚えておくべきタグコードと、拡張子の種類について解説致しました。
それぞれの用例を参考にして活用してみていただけると何よりです。

それでは次のスキルへ  p(^Y^)ノ 〜レッツトライ♪

NEXT

ウェブデザイン速習法
HTML最速習得法
タグ(命令符)と拡張子
キーワードの指定基準
ウェブデザインのスキル
ウェブページの理想形
/ 儲ける仕組み / SEO.SEM必修ノウハウ / 詐欺ビジネス / 独立個人起業セミナー / ウェブデザイン速習法 /
/ HOME / プロフィール / 特定商取引法に基づく表記 / お問い合わせ / サイトマップ / 上まで戻る
● あなたにお役立て頂ければ幸いです― マテリアルギャラリー Space Make Main Office