ホームページ制作
■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

■ 初心者にありがちな間違い・失敗
ホームページを作るに当たって基本知識とマナーみたいな物です。最近は気軽に作れるようになり勉強せず無知識で作る方が多いです。

□ファイル名
日本語や全角アルファベットにしてしまう
ファイル名を日本語や全角で付けてしまうと環境によっては表示されません。WEBは世界中に発信されています。世界中で使用されている国際基準という事を理解していれば、ファイル名に日本語を使用することは間違いだと気が付くはずです。世界各国誰でも見られるように半角英数にしましょう。日本語はOSの中に日本語がインストールされてないと見られません。海外のPCでは見られないと思った方がよいでしょう。全角アルファベットも日本語です。
トップ.html / TOP.HTML
top.html

半角大文字のアルファベットにしてしまう
半角大文字なら表示されますが、TOP.HTMLなどコンピュータの世界では大文字は嫌われます。top.htmlにしましょう。スペースは禁止で、バーは使用できますが嫌われます。アンダーバーが好まれますのでそちらを使用しましょう。
TOP_PAGE.HTML / top-page.html
top_page.html

トップページをindex.htmlにしてない
トップページをindex.htmlにする事はルールです。index.htmlは省略することが出来ます。
http://www.interz.jp/index.html の場合 http://www.interz.jp/ と省略できます。そしてロボット検索エンジンがトップページだと判断してくれます。訪問者もトップぺージが分からないと戸惑ってしまいます。
http://www.interz.jp/top.html
http://www.interz.jp/index.html = http://www.interz.jp/

最上階層にトップページ(index.html)がない
用意された最上階層が気に食わず、別フォルダを用意しそこにトップページを置く方がいます。その場合は最上階層にindex.htmlを置き、その場所まで行かせる手段を作りましょう。
http://www.interz.jp/html/index.html
http://www.interz.jp/index.html


□画像が表示されない
CMYKで作成している
WEBで表示されるのはRGBのみです。CMYKは印刷に適した形式です。
CMYK
RGB

RGBを表示しているのに表示されない
WEBで表示されるのはRGBの8bitみです。グレースケールも使用できます。
RGB16bit/32bit グレースケール16bit/32bit モノクロ2階調
RGB8bit グレースケール8bit

拡張子が違う
GIFを作ったのに拡張子を.jpgにしている、JPEG画像なのに拡張子を.gifにしている。WEBで使用するのはJPEG・GIF・PNGのみです。BMPも使用できますが重いので使わない方がよいでしょう。
JPEG .jpeg .jpg フルカラー。写真・イラスト向け。圧縮し軽いが画像が劣化する
GIF .gif 256色。透過あり。アニメーションも作れ小型アイコン向け。ライセンス有りフリーではない。
PNG .png GIFのフリー版。
BMP .bmp ビットマップの無圧縮標準形式。重いので不向き。

□ファイルがアップロード出来ない
使用できる拡張子にする
音楽や動画はサーバに負担を掛けますので禁止されている所が多いです。zipなどの圧縮ファイルは違法なことに使われる事を恐れ使用できない所があります。自分のホームページスペースで使用できる拡張子と禁止されている拡張子を見ましょう。

ファイル上限を確認
通常の無料スペースでは1ファイル512KBの所が多いです。ホームページスペースで確認できますので確認致しましょう。ファイル転送制限が設けられている所もあります。FTPの1回の転送量が1MBなどです。512KB以下の400KBのファイルは転送できるが、3同時だと1200KBになり転送不可能となります。これも確認しましょう。この場合は分けて転送させれば平気です。
□やっちゃ駄目
フレームの中に他人のページを表示させる
フレームで自分のHPをデザインした場合、他の方のページに飛ばすときは target="_blank"target="top" を使用しましょう。そうしないと自分のサイトのフレーム内に他人のページが表示され、他の方のページが自分のサイトの一部と思われてしまい相手に不快な思いをさせます。
target="_blank" 別ウインドウで表示する
target="_top" ウインドウをそのページで上書きする

デザインに凝りすぎて重くする
ページの表示で訪問者が待ってくれるのは大体10秒程度です。それまでに表示されないとウインドウを閉じてしまいます。初心者の方は色々な技術を取り込もう・見せつけようと懲りすぎてしまう傾向があります。1ページ素材を含め500KB内に収まるようにデザインするのが理想的です。
JavaScriptを使うと重くなりますので使用しないのが理想ですが、ほどほどに。

シンプル イズ ベスト
自分が訪問者の立場に立って見やすいページを作りましょう。初心者のうちは凝りやすいですが、最終的にはシンプルなデザインに行き着きます。試行錯誤してみましょう。

音楽や動画を流す
PCのスピーカーの電源が入ったまま気が付かずHPを見る方が多いです。ネットサーフィンをしていて突然大音量の音楽が流れると相手が驚きます。注意を呼びかけるか、最初は停止にしておくとよいでしょう。自分が好きな曲が相手も好きとは限りません
最近はYoutubeやニコニコ動画を埋め込めるようになりましたが、著作権のある違法配信の音楽を流している方や、10個同時に再生されブラウザがフリーズしそうになった事もありました気を付けましょう。

注意文は控えめに
個人サイトで「○○に興味が無い方、○○を不快に思う方は入室しないでください」という注意文をよく目にしますが、ネットとは世界中に発信し老若男女誰でも見ることが出来ます。他人からみて不快と思うサイトなら止めましょう。マナーばかり羅列してるサイトがありますが、果たしてそれは他人から見て気軽に入りやすいサイトでしょうか?

R指定は積極的に
逆にR指定は積極的に取り入れて方が良さそうです。Google AdWordsに体験登録したところ、ここのコンテンツの入り口には年齢確認と「はい」「いいえ」を置いてくれと指示のメールが来ました。別にアダルトやグロなどでは無かったのですが結構厳しいようです。

世間ではアダルトよりグロに関しての方が厳しいですね。無料サーバや普通のレンタルサーバはR指定が禁止されていますので注意しましょう。絵や小説でも駄目です。アダルト専用サーバはかなり高く重いです、アダルト専用サーバでもグロが禁止されている所が多いです。
□HPを公開する責任
HPを公開すると責任が付きまといます。HTMLというよりネット上で活動するマナーです。

嘘・誤情報
初心者だからといって嘘や誤情報を乗せるとそれが全世界に発信されてしまいます。当サイトと同じようなHTML講座のサイトを初心者が立ち上げ内容が間違っており閉鎖に追い込まれたサイトもありました。間違いや勘違いは誰にでもありますので、慎重に記事を書き間違いに気が付いたら修正しましょう。

モラルを
主にブログですが、最近は平気で日本企業の国内サーバを使い、同じ日本企業のPSPのイメージやコミックを配布してる方がいます。そして犯罪自慢をして炎上する方がいます。危険を冒して危ない情報を配信している自覚がある方はよいのですが、知らずにやっている人の方が危険ですね。

個人情報を控える
初心者に多いのですが、HPに「自分の本名や写真」「住んでいる地域の情報」を記載しやすいです。これは危険なので止めましょう。働いている店や会社の名前を出すのも危険ですね、mixiでよくトラブルになってる記事を見かけます。これはユーザ登録時にも言えることで、私は生年月日を5年前後ずらし住んでる市を隣市にして登録する事が多いです。有料サービスやクレジット決済は嘘の情報は駄目です。トラブルがあったときに対応して貰えない可能性があります。

HPに写真を載せる場合は、知らない人の顔が映っていたり、電話番号などが映っている場合はモザイクを掛けましょう。最悪の場合訴えられる可能性があります。

掲示板
掲示板を借りた後にHP運営に飽きてしまい、掲示板を解約せず放置してスパム広告だらけになっているサイトをよく見かけます。害は無いだろうと思っていても実は掲示板を借りた本人、もしくは運営者にも責任が付きまといます。当サイトも掲示板を放置していたところ長崎県警からメールが来ました。何でも免許や保健所、銀行口座売買の書き込みがあったとのこと。このメールに気が付き早急に対応しましたが、もし対応してなかったら法的手段に出られてたかも知れません。

悪徳商法 -国民健康保険証・銀行口座・運転免許証売買の書き込み-

■ 疑問
□ 文字コードは「Shift_JIS」と「utf-8」どちらを使うべき?
Shift_JISで構わないが、utf-8が使用できるならutf-8を使った方がよい。文字化けや自分の使っているパーツを考慮して考えましょう。

□ 拡張子は.htmと.htmlのどちらを使うべき?
.htmと.htmlに差はありません。どちらの意味も内容も一緒となります。ただ.htmlの方が一般的です。HPを作るときは .htmと.htmlの混合はよしましょう。拡張子が違うのでindex.htm index.htmlと同じファイル名のページが作れてしまいます。そしてtop.htmというページを作り後でtop.htmlに変えてしまうと検索エンジンからも外れ、他のサイトからの被リンクも外れ、自分のサイト内のリンクも外れ面倒なことになります。

□ 画面サイズはどれくらいで作成すべき?
自分が大画面液晶を使っていたとしても、閲覧者は使ってるとは限りません。大型液晶も増えてきましたが、モバイルも増えてきています。昔から1024×768に必要情報が収まるように作成する事を心がけるように言われていますが、ノートパソコンで見ることを考えるとこれが妥当ですね。
しかしまとめブログなど流行っている物は情報が下に長いものが多く、作る側・見る側共に縦幅は気にしない方が増えているようです。一般人、特に年輩者向けのページは1024×768に必要な情報が収まるようにし文字を大きめにした方が良いでしょう。


(2011年11月11日の当サイト閲覧者の画面サイズ)

□ 動作確認は使用率の高いブラウザ全てで
多くの人に見せるからには動作確認をして、文字化けしてないか、デザインが狂っていないか確認しましょう。しかし自分がWindowsのIEを使っているからと言って全員が同じ環境ではありません。出来る限り多くのブラウザで試しましょう。Macを持っていればなおさら良いです。
昔は「Internet Explorer」「Netscape Navigator」の2種類での動作確認でしたが、2011年現在では以下の動作確認が妥当でしょう。


(2011年11月11日の当サイト閲覧者の使用ブラウザ)
優先順位 ブラウザ名  
1 Internet Explorer 45.2%
2 Chrome 21%
3 Firefox 13.2%

□ 共通タグを使う
多くの人に見て貰う為には共通タグを使うのが良いでしょう。昔はIE用タグ、ネスケ用タグが存在し作り方が若干変わりました。ネスケではフレームが使用できないなどがありました。これはIEのバージョンでも変わり多くのブラウザで使える共通タグを使い作る事をお奨め致します。当サイトでは共通タグ中心に特集していきます。これはHTMLのバージョンでも言えます。HTML5で禁止になるタグ新しく追加されるタグは使わない方が無難です。HTML4と5で両方使えるタグを使用しましょう。

(2011年11月13日記載)