HTMLの記述

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

<!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-lintMarkup Validation Serviceを利用し、文法チェックができます。トップページや運営ポリシーページに記述しているHTMLは過剰なタグを使用し、100点に修正していますので、ご参考までにソースをご覧ください。

  • <html lang="ja"></html>日本語のhtmlを示す言語コードを指定する
  • <head></head>ヘッダ部を示し、ページ表示に直接の影響はなく、次の情報を付加する
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">←文字コード
<meta name="keywords" content="ネット通販,開業,広島">←検索キーワード(10個以内)
<meta name="description" content="初心者を・・です">←検索リストの表示紹介(50字内)
<title>ネットショップ開業総合支援講座</title>←表示するタイトル文字
<link rel="stylesheet" type="text/css" href="***.css">←cssファイルの読み込み宣言
<script type="text/javascript" src="***.js"></script>←Javascript読み込み宣言
<style type="text/css">←css(スタイルシート)の直接記述宣言
<!–←コメント開始
A{←リンクのスタイル開始
text-decoration : none;←リンクの下線を非表示
color : #ffffff;←リンク文字を白色に指定
}←リンクのスタイル終了
–>←コメント終了
</style>

以上の例はHTML4.01の場合ですが、現在はブログなどで広く使用されるXHTMLが多いようです。詳しくはXHTMLの書き方と留意点Web Frontierなどをご覧ください。

XHTMLの概説

最も互換性のあるXHTML1.0はHTML4.01の要素や属性をそのまま利用し、XMLの規則に従って定義し直したものなので、特に知識を必要とするわけではありません。

  1. HTML4.01の規格をXMLベースで再形式化したものです
  2. 要素や属性は変わず、既存のHTMLをXMLのルールに修正するだけです
  3. 現状はXHTMLを採用しているメリットを実感できない
  4. 厳格な規格で構造と表現を要求されるXHTMLは環境に左右されない
  5. 表示はCSSで指定するため、構造が簡素でSEOに有利です
  6. XHTML文書の要素、属性はすべて小文字で記述します
  7. 終了タグは省略不可(<br /><img /><meta /><input /><hr
    />などと記述)
  8. 全ての属性値をダブルクォーテーション(")の引用符で囲みます
  9. 「&」は必ず「&amp;」と記述します
  10. name属性とid属性を併用して記述します
  11. CSSなどのスクリプト部分を<!–~//–>で括らない
<?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_JISUnicoodeUTF-8が一般的ですが、国外向けのサイト作成には、将来の標準コードと目される文字化けしにくいUTF-8をお薦めします。
意味不明の「文字化け」は異なる文字コード間のページを交互に閲覧する場合に生じやすく、METAタグで文字コードの宣言が必要です。METAタグを使って検索ロボットに的確なページ情報の提供もできます。

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

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

HTML5.0の概説

バージョンアップを繰り返したHTML4.0は1999年の策定以来、大きな変化がない一方でウェブページの表現力は進歩を続け、XHTML言語やウェブサイトの体裁やスタイルを定義するCSSという概念が標準ツールとして広く利用されるようになりました。
W3Cが策定するHTML5.0の発表で、従来の主流と目されていたXHTMLとCSSによるページ作成はHTML5.0に対応するための作業や費用が必要となります。HTML5の構文チェックはWebサービスのAnotthher HTML-Lint5Validator.nu (X)HTML5 Validatorでurlの入力だけで利用できます。
反面、HTML5.0はサイト内コンテンツの構造化を進める方向性があるため、検索エンジンとの親和性が高く、自動的にSEO対策に近いことができる利点があります。
現在、IE9以降やFirefox、Opera、Chromeなどのブラウザなどに対応していますが、新たに追加された主な要素についてはHTML5.JPHTML5入門などをご覧ください。

論理タグと装飾タグ

タグは要素の性質を表す論理タグと単に表示方法を指定する装飾タグがあります。例は文字サイズを指定するタグの<h>や<strong>は論理タグ、<b>が装飾タグです。タグで囲んだ文字は一見同じように表示されますが、本来の意味に違いがあります。
例えば、<h>は見出しのサイズを指定し、<strong>は重要であることを示し、<b>は単に太文字にすることを意味します。同様に、段落を表す<p>は</p>と囲んだ文章を強調する意味があり、単なる改行<br><br>とは違います。
将来の方向はXHTMLで文章構造を示し、CSSでの表示制御が推奨されるため、商用サイトの構築はSEO対策に不利な装飾タグを最初から使用しないことが重要です。

装飾タグ例 <font> <br> <center> <i> <u> <s> <b>

サイトページの横幅

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

レスポンシブデザイン

スマホやタブレットの普及により、単一のHTMLページと各端末用のCSSだけで、端末が変わっても同一内容のデザインが最適化されたホームページで表示されるウェブデザインが不可欠になりました。詳細についてはレスポンシブWebデザインの作り方をご覧ください。
この技術を導入することで、PC用を含めた端末機器別に複数のサイトを作る必要はなくなり、例えばcmsツールのWordpressの場合はプラグインの導入やレスポンシブデザインに対応したテーマを選択することで簡単に実現することができます。この結果、更新作業の簡略化や更新漏れのミスが減少したり、内容が重複したサイトURLを無くすことでSEO対策にもなります。

JavaScriptの利用と記述方法

JavaScriptはユーザー側のパソコンでプログラムを実行するので応答が早く、サーバに負荷のかからない特徴があり、プログラムをHTMLソース内に記述すると、要求に応じて判断し、高速に処理することができます。
反面、初期バージョンの基本的な命令を除き完全な互換性がないため、バージョンやブラウザによっては動作が実行されない場合があります。
このような場合は未対応のブラウザに配慮し、スクリプト部分を<!–~//–>で囲むことで、scriptタグで囲んだスクリプト部分がそのまま表示されるのを防止します。JavaScriptの記述後は必ず主要ブラウザでの動作確認が不可欠です。
JavaScriptもHTML言語と同様に実行時に無視されるコメント部分があり、一行の場合は先頭が//で始まる行の行末までになります。複数行の場合は/*あいう*/で囲まれた「あいう」部分がコメント部分になります。
JavaScriptとXMLで作成するAjaxを利用した画像表示スクリプトにLightbox2があります。このスクリプトはHTMLファイルの<a>タグのrel属性にlightboxの文字を記述し、スクリプトにリンクするだけで作動します。
なお、ブログであってもJavaScriptが実行できる環境であれば利用することができますが、LightBoxの使い方とカスタマイズ方法はCSS Lectureなどをご参照ください。
JavaScriptはWEST MiRaJavaScript Library Archiveなど多くの配布サイトがありますが、CGIと違い、少しの慣れで変更できるので、独自仕様が可能です。

CGI/SSIの利用と注意点

CGIはブラウザからのアクセスに応答し、プロバイダのサーバ側でCGIプログラムを実行します。実行結果はユーザーのブラウザへ返信する仕組みなので、ユーザーのパソコンやOS、ブラウザなどの動作環境に影響されない性質があります。
サーバ側で実行されるため、動作環境によって反応が遅くなることもあります。PHPはPerlのような設置場所に制約もなく、簡単で使いやすいスクリプトと言われ、WebサーバーのApacheのモジュールとして動くので、CGIより処理が数倍速く、利用することで、インタラクティブな動的HTMLページが作成できます。
これらは、一般にBBSやアクセスカウンター、フォームメール、買物かご、アンケート、予約システムなどに利用されます。レンタルサーバはUNIX系の互換OSが多く、perlやSSIで作成したWindowsのCGI改行コードであるCR+LFをUNIXのサーバーに転送する場合、改行コードをLFに変換しないと正常に作動しません。
例えばMac OSの改行コードはCRですが、Windows OSで作動させるには、CR+LFにコード変換する必要があります。また、サーバーにCGIファイルを転送する場合は通常、自動的に適切な改行コードに変換するので、特に意識する必要はありません。
なお、Windows付属のメモ帳やワードパッドは改行コードの変換機能がありませんので、直接変換できるテキストエディタや改行コード変換ソフトなどを利用します。CGIが正常に作動しない場合、一度はチェックして見るべきでしょう。
SSIの構文は通常のHTML構文の一部を使用していますが、CGIとは微妙な違いがあり、SSIを使用する場合はサーバー側がSSIコマンドを解析実行できるよう、呼び出し元のHTMLファイルの拡張子".html"を".shtml"にする必要があります。
CGIスクリプトの代表的な配布サイトにKent WebDICなどがあります。正常に作動しないCGIをサーバーに転送するとダウンし、共有サーバー内の他サイトに迷惑を及ぼすので、改造は慎重に行う必要があります。

DHTMLの利用と注意点

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

FLASHの利用と注意点

FLASH音楽やアニメなどを動画表現するソフトで、トップページのイメージ画像やバナー広告に利用されます。例えば、このページで使用する電光掲示板のサイズや文字列などはtxtファイルで編集が可能です。
特にページ全体がフラッシュに凝っている場合はスキップボタンを設置しても不便で飽きられやすく、費用(手間)対効果やアクセスユーザーの利便性からもお薦めできません。山陰地方の某有名温泉旅館のサイトは過大なフラッシュを多用しながら、肝心のコンテンツが充実していないなどの例もあります。
Flashを表示するswfファイルの作成ソフトはFlash Professionalやパワーポイント、ワード、エクセル、PDFから簡単にFLASHスライドショーを作成できるそのままFLASHスライドショーなどがあります。フリーウェアのParaFla!は独自のpflファイル作成後にswfファイルを生成し、閲覧ソフトのFlash Playerは全てのtxtファイルや画像ファイル、ActionScriptを包括したswfファイルを読み込んだ後に表示します。
一方のアニメGIF画像ファイルはサーバーが読み込んだ順に表示します。そのため、サーバーの負荷や回線速度に影響されずに再生できますが、同一情報量であれば、GIFアニメに比べFlashアニメのファイルサイズが小さくなります。
また、メモ帳などのテキスト編集ソフトでswfファイルのソースを閲覧できないことも製作者側の利点です。改変の自由度が高いフリーのFLASH素材は次のサイトなどで提供されていますが、無料のブログパーツと同様にサイトのアクセントに利用できます。

FLASF素材UFO Satisfy Desire Flashbucks FLASH素材 katsulabo Flash Works

RSSサイトの対応法

ブログは記事の投稿や更新情報を整理配信するPingサーバーに自動通知する機能があります。ブログサイトはRSSリーダーと呼ばれるソフトに事前登録すると、各ページのタイトルやアドレス、見出し、要約、更新時刻などの更新情報を自動配信します。
最新Webコンテンツを登録者に自動配信できると、リピーターへの販促やブログ検索に活用できます。HTMLページをRSS対応にすることは、ブログ同様のSEO対策にもなります。
大規模サイトの場合、RSS対応サイトをCMSなどで構築するまでの間はページの改変が不要でRSS配信の可能なASPRSSフィード.CCが利用できます。
CMSを利用しない小規模サイトの場合は直近の更新ファイル情報を自動抽出し、RSSやAtom形式のデータを自動生成するFumy RSS & Atom Makerをお奨めします。
このツールを利用すれば、指定フォルダ内の全ファイルを更新時刻順に調べ、ファイルの中身から題名や概要を自動抽出するため、最初の設定で自動的にRSSやAtom形式のファイルをアップロードし、Ping送信も全自動で完了することができます。
また、RSSやAtom形式のファイルは検索エンジンを自力で誘導できるGoogleウェブマスターツールなどで必要なサイトマップの標準形式であるxmlファイルを代替できるので、一石二鳥の効果もあります。
その他、CoffeeCup Google SiteMapperなどのフリーウェアを選択する方法がありますが、次の19社へ一括Ping送信する送信ボックスを利用すると、各PINGサーバーへ指定したブログやサイトの更新情報が登録されます。これらが登録されると、ブログ検索サイトの検索対象になるため、アクセスの増加が見込めます。

CMSと制作ツール

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

フリーウェア XOOPS Cube Drupal WordPress MTOS baserCMS
商用ウェア Movable Type a-blog cms CMS Designer

CMSの本格的な導入はCGIの設置やPHPMySQLCSSの知識が必要なので、有料のDL-MARKETや無料のテンプレートキングホームページテンプレートの部屋などのテーマ、プラグイン、ウェジットなどを利用しても改変の難易度が高い作業です。
公開当初から利用制限のないWordPressはMTOSと異なり、利用者が多く情報サイトも数多く存在しますが、基礎知識がなければ、商用での構築は困難です。ブログの「静的」な情報を固定ページにすることで通常のサイトとして利用することができます。
固定ページは時間軸で整理保存される投稿ページと違い、全く「時間に影響されない」ので、最初にサイトデザインとCSSによる表示制御を設定すると簡単に大量、迅速に文字情報をデータベースに格納できるため、多くの情報系サイトが利用しています。
一方、サイトデザインを重視する物販系のお店は主たるサイトとの相互リンクを利用し、ツィッターやSNSと同様に誘導ツールとしてのご利用をお奨めします。なお、CMSツールにショッピングカートを導入する方法は次の3つの方法があります。

  • ショッピングカートをレンタルする
    ColorMeShopなど専用カートが利用できるレンタルサーバーの管理ページから設定します。決済システムや大手ショッピングモールへの出店などの特典もあり、最も便利で簡単な方法で、CMSの「今週のお奨め」などのリンクからショップサイトにリンクします。
  • ショッピングカートをCMSに組み込む
    有料又は無料のショッピングカート構築プログラムを利用する。この方法は自分でカートが管理できるので運営コストを抑えることができます。別サイトにリンクするか、CMSのブログ内に「買い物かごボタン」を設置します。
  • CMSの専用プラグインを利用する
    CMSツールだけで運営を完結したい場合の方法です。例えば、WordPressの専用プラグインであるWP-OliveCartWelcartなどのを導入するので、同一サーバーでデータ管理できる利点があります。

■令和元年版カレンダー

2019年8月
     
 1234
567891011
12131415161718
19202122232425
262728293031  

■サイト内検索

■記事講読ランキング

■統計情報サイト

都道府県別統計
世界経済のネタ帳
■地方情報
地方公共団体情報システム機構
中国地域の中小企業支援施策
■ビジネス支援情報
exBuzzwords
ネット通販の構築支援別館
無料ビジネス相談会
1.対象者
☆起業をお考えの方
☆起業後間もない方
2.場所
広島市立中央図書館
3.開催日
☆毎月第2土曜12:00~17:00
4.1時間以内の予約制
☆先着順5名
5.申込先
中央図書館事業課
☆Tel:082-222-5542

■中小企業ビジネス支援サイト


Copy Protected by Chetan's WP-Copyprotect.