ホームページ制作
■HTMLの基本
HTMLとは?
ブログが優秀?
初心者ミス・疑問
階層とファイル名
基本構成
改行と段落
文字の大きさ
強調/斜体/打消し
文字の色指定
中央寄せ
行揃え(段落)
行揃え
見出し
+-で文字指定
箇条書きリスト
順番有りリスト
ハイパーリンク
メールリンク
■メタタグ
説明文/キーワード

16進数色見本
色名で指定

■実践的
JavaScript・CSS
画面内で広告固定

■無料レンタル
HPスペース
アクセスランキング
アクセス解析
ブログパーツ
□R指定サイト可
掲示板
アクセスランキング
アクセス解析

■無料配布CGI
画像掲示板
1行掲示板

■CSS
px,em,%対応表

■無料ツール
構文チェック
HTML Validator
リンク切れチェック
リンク切れチェッカー

別ジャンルへ飛ぶ
別サイト(創作専門)
掲示板・ろだ
年齢制限/広告非表示
GoogleAds非表示
コピペ
スマホ向けページ有
忍者

interz
Google
忍者
点数の見方
殿堂入り 6点 殿
5点 5
4点 4
3点 3
2点 2
1点 1
評価不能
サイト名変更/移転
変更
サイト合併/休止
合併
サイト閉鎖/年齢指制限
閉鎖年齢制限
Amazon
Amazon
人気記事
ブログパーツ
Ads

■ HTML Validator
構文のチェックは必要
ホームページを制作しているとHTMLやCSSの構文は結構間違える物です。何度も何度も見直していても見落としてしまったり、自分の間違った癖は自分では見付けられない物。
よってフリーソフトの構文チェックを使用すると便利です。今回探しているとFirefoxのアドオンにもある事を知りました。

アドオンって?
アドオンとはFirefoxに導入出来る拡張機能で、このアドオンのお陰でFirefoxはIEに迫る人気が出ました。しかし欠点としては軽いことが売りのFirefoxが重くなってしまいます。

□ HTML Validatorの導入
今回は「HTML ValidatorというアドオンのHTML/CSS構文チェックが有名なようなので入れてみたいと思います。

まずFirefoxを立ち上げます

1.ツールをクリック
2.アドオンを選択しクリック



アドオン検索
アドオンを探してみましょう

3.右側にある検索ウインドウに「HTML Validator」と入力し検索します
HTML Validator 0.9.5.1(2011年12月30日版)」がありました。これですね。アドオンは古くて対応してない物も出てきますが、更新が1ヶ月ほど前で最新のようです。

4.「インストール」 をクリックしましょう。


再起動
ブラウザが再起動されますので、大事なページはショートカットを作るなり、ブックマークしておきましょう。一応再起動前のページは再起動後に全部再表示されます。OSの再起動はありませんでした。


アルゴリズムの選択
  • HTML Tidy(誰でも)
  • SGML Parser(プロ)
  • 併用(プロ)
通常は一般向けのHTMLとXHTMLの構文チェック用のアルゴリズム「HTML Tidy」で構いません。インストール後に寄付してくれというウインドウが表示されますが、まだ使ってもないのに寄付を迫られても困りますので消してしまいましょう。もし使ってみて、このソフトは良いので寄付したいという方はどうぞしてあげて下さい。


後でも選択可能
アドオンの画面で「拡張機能」を見ると現在インストール済みのアドオン一覧が見られます。使わないアドオンを消してあげると軽くなります。

ここにある「HTML Validator 0.9.5.1」の設定をクリックしましょう。


HTML Validatorのオプション」が表示され、「一般」→「アルゴリズム」の所でも変えられます。アクセシビリティ・レベルを変えられます。アクセシビリティとは利用しやすさのレベルです。年輩者や障害者でも見られるかという事になります。デフォルトのまま「なし」が良さそうですね。
    ブラウザ画面
  • 自動的に閲覧中のページ文法をチェック
    これにチェックを入れると閲覧するサイトを全て構文チェックしてくれますが、自分のサイト以外もチェックされ重くなりますので外して置いた方が良いと思われます。
  • アイコンを隠す
    これは右下にアイコンが出て構文エラーを教えてくれるという物。これはチェックを入れ隠して置いた方が良さそうです。
■ HTML Validator で構文チェック
構文チェックのやり方
自分で作成したHPを開き
  1. 右クリックでメニューを表示
    画像やFlash、呼び出し部分では変わってしまいますのでサイト構成部分で行います
  2. ページのソースを表示」を選びます


いつものソース画面の下に「HTMLのエラーと警告」と「ヘルプ」が追加されています。

□ HTMLのエラーと警告
エラーの種別」と「行番号」「縦番号」「HTMLのエラーと警告」があり警告は英語ですが、HTMLなので何を言いたいかは大体分かります。クリックすればソースのその部分まで移動してくれます。そしてヘルプ部分に間違った書き方と正しい書き方の例が表示されます。英語ですが日本とアメリカでは○と×の意味が違い、アメリカには○がありません。
これが○という意味になりますので注意しましょう。



実際に修正してみて
構文エラーが260個でました。しかし自分のタグの間違いは4つしかありませんでした。
    エラーと判断される物
  • アフリエイトのソース
  • AdSenseのソース
  • ツイートボタンのソース
  • ALTは最後に入れないとならない
  • 本分の全角スペース
頑張って260個→20個まで減らしましたが、ホームページ作成ソフトを使っていますのでALTの場所は自動でそこに入るため間違ってませんし、日本語なので全角スペースも使用します。渋々これらを修正しました。
アフィリエイト・AdSense・ツイートボタンに関しては公式配布されているソースにエラー出されても困ります。もし修正したら動作しなくなります。よって20個が限界でした。



□ページの文法を修正は危険
HTML Validator」右下に「ページの文法を修正」というボタンがありエラー部分を自動修正してくれるという優れものです。しかしながらアフリエイトやAdSenseのソースを自動修正してしまいます。これらはソースを変えてしまうとカウントされなくなり収入が入らなくなります。そしてソースの改変は規約違反になります。よってこれらを使用しているサイトは使っては駄目です。

間違っている部分を探すのに使用し、その後は自分で修正するのが良さそうです。英語なのでちょっと使いにくいのも難点ですね。
(2012年1月20日記載)