初心者のためのネットショップ開業総合支援講座「HTML基礎」

FLASH用例

HTMLと制作ソフト.

ウェブサイトの作成は一般的にホームページ作成ソフトを利用しますが、例えば、人気の高いホームページ・ビルダーであっても表現やデザインの自由度に限界があります。
多少のHTML知識があれば、テキストエディタとの併用が作業の軽減が図れて効率的です。ページ作成はHTMLで記述しますが、このファイルを直接作成できるソフトがあります。
Windows付属の「メモ帳」や「ワードパッド」なども利用できますが、テキストエディタの定番ソフトはシェアウェアの秀丸エディタやフリーウェアのTeraPadが有名です。
無料ソフトには、市販ホームページ作成ソフトの機能を実装するez-HTML、通常の編集やHTMLソースの修正、プレビュー画面のワンタッチ切り替えができるalphaEDIT、上級者向けのNvuなどがあります。(FrontPage Expressは1996年後半に開発終了)
ウェブページの作成に必要なHTMLは仕組み自体が簡素なので模倣から始めるのが上達の近道です。これらの知識はワザワザお金と時間を費やして教わるようなものではありません。インターネットで検索すると大抵分かるので、自主学習で十分学ぶことができます。
ただし、独自の本格的なサイト構築はこれらソフトだけでは不十分なので、HTMLとCSSの知識は必要です。商用サイトはJavaScriptとCGIが不可欠で、基本知識がないとカスタマイズさえできません。検索キーワードを"初心者　ホームページ作成"で検索すれば多数ヒットしますが、サンプルを参考に丁寧な作成法を説明した超初心者のホームページ作成はお奨めサイトの一つです。

制作のポイントとFTP.

最初から満足できるサイトは無理だとお考えください。特にデザインや色使いは経験と研究が必要です。一般に人間工学的に縦横に並んだものを見る人の視線は自然と左から右、上から下へとＺの形を描くように移動すると言われますが、構築は見映えより、アクセシビリティの優れたサイトを最優先し、高齢者や視覚障害のアクセシビリティを診断できる無償ソフトのAccessibility Assistanceやウェブページのチェックとシミュレーションに便利なWeb Acessibility Toolbarなどで修正すべき箇所が特定できます。
ネットショップに適したサイトの認定基準はグッドデザインショップ認定の採点方法で公開していますが、この評価項目はサイトのレベル判断や外部委託の参考に役立ちます。

ページのファイル容量は125KB以内にする(参考:ある日のYahoo!サイト130.3KB)
表組みを作成し、その中に文章や画像を挿入する(初級者向け)
色使いは好みを優先するのではなく、サイトの内容に合うかどうかで決める
特殊なフォントは画像化し、イラスト的な使い方をする
フォントやサイズは多用しない(必要な場合は画像化する)
FLASHだけのトップページは作成しない
お急ぎの方はこちら、スキップなどのリンクも同様です。
トップページに音楽などの音声を自動的に鳴らさない
アクセスは自宅だけではありませんし、Windowsの標準音声ファイルWAVEは未圧縮のためファイル容量が大きくなる欠点があります。左側のメニューフレーム最下部にBGMをご参考までに設置しています。音楽ファイルは圧縮のできるMP3、WMA、ramや音声情報を数値化したMIDIがよく利用されます。
同じ内容のページは安易に分割せず、縦スクロールのページ内リンクで対応する
このような場合は次の「パンくずリスト」にします。
|HTMLと制作ソフト|制作のポイントとFTP|HTMLの作成|CMSと制作ツール|

サイトデザインのテンプレート

一般的にページデザインは他店の通販サイトを参考にしますが、無料の雛形を提供するてんぷれの天ぷら、Tmplate Shop、シンプレストやPOP素材配布サイトの0円の無料素材屋さん、ECPOP、MAYUWEBなども利用できます。これらのサイトは商用アイコンなどの素材画像は無料ですが、海外一流デザイナーのページテンプレートを修正加工できるテンプレートモンスターは1万円以下で高品質のオリジナルページに編集できるサービスを提供しています。サイトの信頼感や認知度を高める店名などのロゴ・シンボルマークのザインも重要です。制作業者はロゴプロジェクトで紹介されているので、ご覧ください。

ブラウザ

インターネットを通じウェブサイトを訪問するのに、必要なページ閲覧ソフトをブラウザと呼び、これによってHTMLファイルをウェブページに表示することができます。
60種以上と言われるブラウザはWindows標準のタブブラウザ対応のIEが圧倒的に利用されていますが、Netscape NavigatorやFirefoxなどに対応できるサイトが望まれます。
突然「お気に入り」に登録したウェブサイトが消滅することがありますが、必要ページをHTMLファイルに完全保存できる紙copiLiteは情報のデータベース化に最適です。

FTP(File Transfer Protocol)

インターネット上でファイル転送を行う手順をFTPと言い、このFTPの手順でファイル転送を行うアプリケーションのことをFTPソフトと呼びます。通常は作成したウェブページをプロバイダやレンタルサーバに転送する場合に使用しますが、CGIファイルのパーミッションを設定する場合にも利用されます。パーミッションとは、ユーザとグループのファイルやディレクトリに対するアクセスを制御するために使用される属性で、このパーミッションがないと他のユーザのファイルやディレクトリにアクセスできません。これは1台のシステムを複数ユーザで共有するための適切な設定を行なうセキュリティ上の仕組みです。一般にFTPはホームページ作成ソフトに付属していますが、FFFTPをお奨めします。
【FFFTPのパーミッション設定例】
属性の変更例

現在の属性707は左側からオーナー権限、グループ権限、その他権限の状態を示しています。呼出(読込)許可は4、書込許可は2、実行許可は1で表すので、合計は7になります。３桁の数字以外には、それぞれの頭文字を使い、属性値をrwx---rwxなどのように表示します。UNIX系サーバーのパーミッションはディレクトリーやファイル別に設定します。

CGIの作者が指定するファイルのパーミッションはレンタルサーバーの環境により、そのままでは作動しないこともあります。

HTMLの作成.

HTMLとは、ブラウザで表示できるテキストファイルを作成するための文書構造記述言語です。これは"< >"で囲む一対のタグと呼ばれる記号を用いて文書構造を指定します。
現在閲覧中のHTMLを表示するには、画面上から右クリックし、ソースの表示(V)をクリックします。一般的なウェブページをHTMLで記述すると以下のようになっています。
なお、HTMLの解説サイトは数多くありますが、あらたさんちのWWW素材集やとほほのWWW入門、HTML小技集などが有名です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">←HTMLの文書型宣言
<html lang="ja">←日本語を指定(英語"en")
<head>←ヘッダ開始
<title>ネットショップ創業支援</title>←タイトル文
</head>←ヘッダ終了
<body>←本文開始
初心者のための創業を支援しています。←内容記述
</body>←本文終了
</html>←HTML文書終了

タグは基本的に開始タグと終了タグのペアであり、終了タグはスラッシュの/で始まります。全角文字はタグと認識されないので、必ず半角英数で記述する必要があります。タグ自体は大小を区別しませんが、終了タグがないと以降に影響することがあります。

ファイル名

HTML文書の拡張子は通常".html"を使用するのが一般的ですが、旧WindowsOSの扱える拡張子が3文字なので、現在も".htm"を使用することがあります。
また、トップページの通常ファイル名であるindex.htmをプロバイダから指定される場合もあります。Windows系サーバーの場合はHTMLファイル名の大小文字を区別しませんが、これを区別するUNIX系サーバーのプロバイダが多いため小文字での統一をお奨めします。

タグの概説

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">はタグではありませんが、次のような文書型を宣言しています。

ウェブ関連技術の標準化推進団体であるW3Cが推奨するHTMLver4.01を使用する
HTML4.01のDTD記載タグを使用しているが、将来的に無効とされるタグを使用する

正確なHTML構文は難しいものですが、実際のウェブサイトで満点近いサイトはほとんどなく、特に意識する必要はありません。オンライン上のAnother HTML-lintやMarkup Validation Serviceを利用して文法チェックができます。

<html lang="ja"></html>日本語のhtmlを示す言語コードを指定する
<head></head>ヘッダ部を示し、ページ表示に直接の影響はなく、次の付加情報を記述します

以上の例はHTML4.01の場合ですが、今後はブログなどで使用される次世代マークアップ言語のXHTMLが主流になります。詳しくはXHTMLの書き方と留意点、Web Frontierをご覧ください。最も互換性のあるXHTML1.0はHTML4.01の要素や属性をそのまま利用し、XMLの規則に従って定義し直したものなので、特別な知識を必要とするわけではありません。

XHTMLの概説

HTML4.01の規格を XMLベースで再形式化したものである
要素や属性は変わらないので、既存のHTMLをXMLのルールに修正するだけである
現状はXHTMLを採用しているメリットを実感できない
厳格な規格で構造と表現を要求されるXHTMLは環境に左右されない
表示はCSSで指定するため、構造が簡素でSEOに有利である
XHTML文書の要素、属性はすべて小文字で記述する
終了タグは省略できない<br /><img /><meta /><input /><hr />など
全ての属性値をダブルクォーテーション（"）の引用符で囲む
「&」は必ず「&」と記述する
name属性とid属性を併用する

<?xml version="1.0" encoding="Shift_JIS"?>←文字コード指定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">←XHTML1.0文書型宣言(Strict又はFramesetの文書宣言)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">←日本語宣言
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />←文字コード宣言
<meta http-equiv="Content-Script-Type" content="text/javascript" />←外部javascriptの宣言
<link rel="stylesheet" type="text/css" href="***.css" />←cssファイルの読み込み宣言

なお、JavaScriptやCSSの記述は次のタイプに大別されます。

個別記述型
タグ内に直接記述することで設定タグに効果を及ぼします。
ファイル記述型
ページのヘッダ部に集約して記述することでページ全体に効果を及ぼします。
別ファイル記述型
拡張子の".js"や".css"の別ファイルをリンクし、被リンク先のページ全体に効果を及ぼします。

プログラムの記述が長く複雑なJavaScriptやCSSをこの拡張子に変換したファイルで管理すると、ページの一括修正が容易でHTMLが簡素になるため、SEO対策に有利です。
フォントの種類と基本サイズ、色やリンク効果などは最初からCSSファイルで管理するのが望ましく、CSSの確認はW3C CSS 検証サービスを利用します。日本語コードはUNIX系でEUC-JPやISO-2022-JP、WinやMac系ではShift_JISやUnicoodeのUTF-8が一般的ですが、将来の標準コードと目される文字化けしにくいUTF-8をお薦めします。
意味不明の「文字化け」は異なる文字コード間のページを交互に閲覧する場合に生じやすく、METAタグで文字コードの宣言が必要です。METAタグを使って検索ロボットに的確なページ情報を提供することもできます。

<title></title>ページのタイトル文を記述します。
内容はブラウザのタイトルバーに表示され、ブックマークのタイトルにも使われる
<body></body>この部分が本文になってページが表示されます

この他に動作や表示に影響を及ぼさないコメントタグと呼ばれるタグがありますが、これは更新記録や備忘メモ、一時的に文書の一部を隠す場合などに直接記述します。
[例]

論理タグと装飾タグ

タグには、要素の性質を表す論理タグと単に表示方法を指定する装飾タグとがあります。一般例は文字サイズを指定するタグの<h>や<strong>は論理タグ、<b>が装飾タグです。
タグで囲んだ文字は一見同じように表示されますが、本来の意味に違いがあります。例えば、<h>は見出しのサイズを指定し、<strong>は重要であることを示します。
これに対し、<b>は単に太文字にすることを意味します。同様に、段落を表す<p>は</p>と囲んだ文章を強調する意味があり、単なる改行<br>とは違います。今後の方向としてHTMLが文章構造を示し、CSSで表示制御することが推奨されます。装飾タグの使用はなるべく回避するのが無難ですし、SEO対策にも効果的です。

サイトページの横幅

<table width="750">などのようにテーブルタグでページ全体をピクセル単位で指定するページ横幅固定型のサイトは少なくありませんが、ブラウザのウィンドウ左側にある「お気に入り」を常に表示せず、最大画面で見ているユーザーも多いようです。
ページ横幅を固定すると画面内の表示部が固定されるので、最大画面にすると無用な余白が生じます。そのため、<BODY>タグにバックグランドカラーやバックグランドイメージの属性で余白をレイアウトすることがあります。また、相対値指定の文字を大や最大で表示すると画面内の情報量が極めて少なくなる欠点がありますので、一般的に文字情報の多いサイトは三段組にし、両サイドをメインメニューや新着情報、バナーなどを配置します。ウェブデザインを特に重視しなければ、例えば<table width="100%">とするリキッドデザインは最大画面時の縦スクロールが減少し、表示される情報量を大幅に増加することができます。画像を多用する場合や段組みレイアウトなどで利用しますが、この場合は１行に含まれる字数が多くなって逆に読みにくいことがあります。
これにはエラスティクレイアウトを選択し、文字数で横幅サイズを指定することで、可読性を高める方法があります。これは１行あたりの字数を１文字に相当するem(エム)という単位で指定します。例えば<td width="40em">と指定した場合、１行40文字の字数は縮小や拡大しても変わらない効果があります。ページの全部を印刷する場合、画面上の横幅650ピクセル以内に収めるとA4縦の印刷ができますが、用紙余白を左右19.05㎜に初期設定する必要があります。

JavaScriptの利用と記述方法

JavaScriptはNetscape社開発のスクリプト言語で、ユーザー側のパソコンでプログラムを実行します。このプログラムをHTMLソースに記述すると、要求に応じて判断し、高速に処理することができますが、初期バージョンの基本的な命令を除き完全な互換性がないため、バージョンやブラウザによっては一部の動作が実行できない場合があります。
この場合は未対応のブラウザに配慮し、スクリプト部分をで囲むことで、scriptタグで囲んだスクリプト部分がそのまま表示されるのを防ぐことができます。
JavaScriptもHTML言語と同様に実行時に無視されるコメント部分があります。
一行の場合は先頭が//で始まる行の行末までになります。複数行の場合は/*あいうえお*/で囲まれた「あいうえお」部分がコメント部分になります。
JavaScriptはWEST MiRaやJavaScript小技集、All Aboutなど多くの配布サイトがありますが、CGIと違い、少しの慣れで編集できるので、独自の仕様変更が可能です。

CGIの利用と注意点

CGIはブラウザからのアクセスによってプロバイダのサーバ側でCGIプログラムが実行されます。実行結果はユーザーのブラウザへ返信する仕組みになっていますので、ユーザーのパソコンやOS、ブラウザなどの動作環境に影響されない性質があります。ただし、サーバ側で実行されるため、動作環境によっては反応が遅くなることもあります。
PHPはPerlのような設置場所に制約もなく、簡単で使いやすいスクリプトと言われ、WebサーバーのApacheのモジュールとして動くので、CGIより処理が数倍高速になります。
これらのCGIを利用することで、インタラクティブな動的なHTMLページを作成することができます。一般にBBSやアクセスカウンター、Webメール、買物かご、アンケート、予約システムなどがあります。一般にレンタルサーバはUNIX系の互換OSが多く、perlやSSIで作成したCGIの改行コードはLFでないと作動しません。Macの改行コードはCRですが、WindowsでCGIを作動するには、CR+LFをLFにコード変換する必要があります。
また、SSIを記述したサーバー側で作動するHTMLファイルの拡張子は「.shtml」になり、Windows付属のメモ帳やワードパッドは改行コードの変換機能がありません。
CGIスクリプトを配布する代表的なサイトにKent WebやWeb寺子屋、CGIZOO、DICなどがあります。正常に作動しないCGIをプロバイダのサーバーに転送するとダウンし、共有サーバー内の他サイトに迷惑をかけますので、改造は特に慎重に行う必要があります。
改造ソースはサイトから利用できるPerl言語のオンライン文法チェッカーがあります。

DHTMLの利用と注意点

Dynamic HTMLの略であるDHTMLはHTMLで動的な表現を実現するために考えられたものです。これはプログラム言語ではなく、"CSS"や"JavaScript"をHTMLに組み合わせた機能で規格や仕様はなく、クリックやマウス移動などでイベントを発生させる技術です。
よく使用されるイベントには、onload=""やonclick=""、onmouseover=""などがありますが、JavaScript同様にバージョンやブラウザによっては一部の動作が実行できない場合があります。これらのプログラムが複雑で長い場合は拡張子".js"の別ファイルを作成し、リンクします。

FLASHの利用と注意点

FLASHは音楽やアニメなどを動画表現するソフトで、トップページのイメージ画像やバナー広告に利用されます。例えば、このページで使用する電光掲示板のサイズや文字列などはtxtやHTMLファイルでの編集が可能です。特にページ全体がフラッシュの場合はスキップボタンを設置しても不便で飽きられやすく、費用対効果やお客様の利便性からお薦めできません。山陰地方の某有名温泉旅館のサイトは過大なフラッシュを多用しながら、肝心のコンテンツが充実していないなどの例もあります。SWFファイルの閲覧はFlash Playerのインストールが必要ですが、Flashの作成ソフトはFlash Basic8やSWiSH Maxなどが有名です。このSWFファイルは全てのtxtファイルや画像ファイル、スクリプト言語を読み込んだ後に表示します。これに対し、アニメGIF画像ファイルはサーバーが読み込んだ順に表示します。そのため、サーバーの負荷や回線速度に影響されずに再生でき、同一情報量であれば、GIFアニメに比べFlashアニメのファイルサイズの方が小さくなります。
メモ帳などのテキスト編集ソフトでSWFファイルのソースが見れないのも利点です。カスタマイズの自由度が高いフリーのFLASH素材は次のサイトなどで提供されていますが、無料のブログパーツとしてサイトのアクセントに利用することもできます。

RSSサイトの対応法

ブログは記事の投稿や更新情報を整理し配信するPingサーバーに自動通知する機能があります。ブログサイトはRSSリーダーと呼ばれるソフトに事前登録することで、各ページのタイトルやアドレス、見出し、要約、更新時刻等の更新情報を自動的に配信します。
最新Webコンテンツを登録者に自動配信できると、リピーターへの販促やブログ検索に活用できます。通常のHTMLページをRSS対応にすることは、ブログ同様のSEO対策にもなります。通常のウェブサイトをMyRss.jpに登録することで、同様に利用できます。
大規模サイトの場合、RSS対応サイトをCMSなどで構築するまでの間はページの改変が不要でRSS配信の可能なASPのRSSフィード.CCが利用できます。
CMSを利用しない小規模サイトの場合は直近の更新ファイル情報を自動抽出し、RSSやAtom形式のデータを自動生成するFumy RSS & Atom Makerなどのフリーウェアを選択する方法があります。このソフトは指定フォルダ内の全ファイルを更新時刻順に調べ、ファイルの中身から題名や概要を自動抽出するため、最初の設定で自動的にRSSやAtom形式のファイルをアップロードし、Ping送信もします。

CMSと制作ツール.

ウェブサイトの構築はテキストや画像などの素材を作成するだけでは完成しません。HTMLやCSSなどの構文でレイアウトや装飾を施し、サイト内外へのリンクが必要だからです。
ウェブ構造をMySQLなどのデータベースに保存し、効率的に管理するシステムウェアをCMSと呼びます。CMSの導入で制作者はHTMLなどの知識を必要としないため、テキスト更新時の作業が不要です。また、ブラウザで直接サイト修正ができるので、更新頻度が高まる効果があり、SEO対策に有利です。サイト内リンクが自動生成のため、ページ増加に伴う関連リンクの追加が不要となる利点もあります。ホスティング業者のサーバーを利用するCMSの中には、サイトデザインをテンプレートに用意しているブログやウェブサイトの自動作成ツールが代表的で、これらの利用で容易にサイトの構築ができます。
CMSは企業サイト構築に利用する商用向けソフトウェアやフリーウェアがあります。

フリーウェア	XOOPS Cube	Drupal	Nucleus
商用ウェア	Movable Type	a-blog	CMS Designer

フリーウェアの導入はCGIの設置やPHP、MySQLの知識に加え、構築に改造と経験が必要なので、雛形のモジュールをダウンロードしても初心者には、かなり敷居が高いでしょう。

制作講座.初心者のためのネットショップ開業総合支援講座