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文書終了

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

フレーム構造

コンテンツメニューなどを別ファイルとして複数フレームに読み込み、全体を1ページに表示する構造は一般にframesetやiframeのタグを使用しますが、framesetで構築したindx.htmlには、コンテンツ自体を記述せず、フレーム別に表示されるHTMLファイル名が記述されます。
このようなframesetに対し、インナーフレーム構造のiframeはindex.htmlにコンテンツ自体を記述でき、しかもページの任意の位置に表示ができるので、SEO対策に有利な点と利便性から多くのサイトで利用されています。
また、iframeをjavascriptで読み込むことで、index.htmlファイルにiframeタグを記述する必要がなく、多くのHTMLの文書型宣言に対応することができます。
【iframeタグの一般例】

<td><iframe src=”.//menu.html” width=”160″ height=”1600″
marginheight=”0″ frameborder=”0″ scrolling=”no”
title=”IFRAME対応ブラウザが必要です!”>IFRAME対応ブラウザが必要です!</iframe></td>

【index.htmlにjavascriptでframe.jsを読み込む】

<td><script type=”text/javascript” src=”.//java/frame.js”></script><noscript>JavaScript(アクティブスクリプト)を有効に設定してください</noscript></td>

【ファイル名frame.jsのjavascript作成例】

<!–
document.write(“<iframe src=’.//menu.html’ height=’1600′ width=’130′
scrolling=’no’ frameborder=’0′></iframe>”);
// –>

フレーム構造はjavascript以外にobjectタグでも表示は可能ですが、IE9以前のブラウザで表示した場合はスクロールバーが表示されるなどブラウザによって意図した表示にならないことがあります。

<td>
<object type=”text/html” data=”menu.html” style=”width:130px;height:1600px;”>
<p>non object</p>
</object>
</td>

ファイル名

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、W3Cマークアップ検証サービスやMarkup Validation Serviceを利用すれば、文法チェックは簡単にできます。

  • <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文書型宣言
<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ファイルでの管理が望ましく、確認はW3C CSS検証サービスを利用します。
日本語コードはUNIX系でEUC-JPやISO-2022-JP、WinやMac系ではShift_JISやUnicoodeのUTF-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-Lint5やValidator.nu (X)HTML5 Validatorでurlの入力だけで利用できます。
反面、HTML5.0はサイト内コンテンツの構造化を進める方向性があるため、検索エンジンとの親和性が高く、自動的にSEO対策に近いことができる利点があります。
現在、IE9以降やEdge、Firefox、Opera、Chromeなどのブラウザなどに対応していますが、新たに追加された主な要素についてはHTML5.0などをご覧ください。

論理タグと装飾タグ

タグは要素の性質を表す論理タグと単に表示方法を指定する装飾タグがあります。例は文字サイズを指定するタグの<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%”>とするリキッドデザインは最大画面時の縦スクロールが減少し、表示される情報量を大幅に増加することができるので、画像を多用する場合や段組みレイアウトなどで利用します。
ただし、この場合は１行に含まれる字数が多くなるので、逆に読みにくい欠点があります。これにはエラスティクレイアウトを選択し、文字数で横幅サイズを指定することで、可読性を高める方法があります。これは１行あたりの字数を１文字に相当するemという単位で指定します。
例えば<td width=”40em”>と指定した場合、１行40文字の字数は縮小や拡大しても変わらない効果があります。ページ全部を原寸印刷する場合、画面上の横幅サイズを650ピクセル以内に収めるとA4縦サイズの印刷ができますが、用紙余白を左右19.05㎜にする必要があります。

空白文字の使用

余白の調整には、スタイルシートのmarginプロパティやpaddingプロパティを使うのが一般的ですが、特に空白文字を挿入し、文字間のバランスをとることがあります。この場合はスペースキーで連続して挿入しても1つの半角スペースと解釈され、1文字分の空白しか表示されません。
強制的に半角英数の空白文字を挿入する場合は「＆nbsp;」を使用します。この他にも「＆ensp;」、「＆emsp;」、「＆thinsp;」などがあります。空白文字を含め直接HTMLに記述できない記号を実体参照文字と言いますが、代表的なものに「＆lt;」、「＆gt;」、「＆amp;」がよく利用されます。
また、テキスト間に空白を入れるなら、少し手間を要しますが空白の幅をpx単位で自由に設定できるよう<span>タグを使用した「cssで余白をとる方法」をお奨めします。

JavaScriptの利用と記述方法

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

DHTMLの利用と注意点

DHTMLはHTMLで動的な表現を実現するために考えられた技術です。これはプログラム言語ではなく、CSSやJavaScriptをHTMLと連動させる機能なので特別な規格や仕様はなく、一般にクリックやマウス移動などでイベントを発生させます。
よく使用されるイベントにonload=””やonclick=””、onmouseover=””などがありますが、JavaScript同様にバージョンやブラウザによっては一部の動作が実行できない場合があります。これらのプログラムが複雑で長い場合は拡張子”.js”の別ファイルを作成し、リンクします。
一方のアニメGIF画像ファイルはサーバーが読み込んだ順に表示します。そのため、サーバーの負荷や回線速度に影響されずに再生できますし、無料のブログパーツはサイトのアクセサリーに利用できます。

RSSサイトの対応法

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

CMSと制作ツール

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

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

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

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

令和5年

2023年6月
月 火 水 木 金 土 日
 1234
567891011
12131415161718
19202122232425
2627282930  

Webサイト内検索

表示数