html、xhtml
手打ち者用：コピペで使う
<head>〜</head>
- 文書型宣言 移行
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 文書型宣言 厳格
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- まとめてコピペ
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:www.w3.org/1999/xhtml" xml:lang="ja" lang="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta name="description" content="内容" />
<meta name="keywords" content="キーワード" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>タイトル</title>
<link href="ファイル名.css" rel="stylesheet" type="text/css" />
<script src="ファイル名.js" type="text/javascript"></script>
</head>
- 文字コード
- charset=shift_jis
charset=UTF-8
charset=EUC-JP
- スペース
-
- <
- <
- >
- >
- &
- &
- "
- "
- ©
- ©
- ®
- ®
- 参考URL
- world wide web guide
http://w3g.jp/others/data/letters
- ※注意
- インストールされているフォントの種類によっては表示されないこともあります。
- ♡
- ♡｜ハート
- ♥
- ♥｜ハート
- ♢
- ♢｜ダイヤ
- ♦
- ♦｜ダイヤ
- ♤
- ♤｜スペード
- ♠
- ♠｜スペード
- ♧
- ♧｜クローバー
- ♣
- ♣｜クローバー
- ❣
- ❣｜びっくりハート
- ❤
- ❤｜ぷりっとハート
- ❥
- ❥｜ハート横
※windows環境ではほとんど表示されないということに。アイコン作成の下書きにと思ったのに残念。。。
表情↓
記号↓
天気・自然系↓
マーク系↓
ダーク系↓
手と文房具↓
チェス↓
12星座↓
UTF-8の英数字表示の問題
html文書の文字コードをUTF-8にすると、日本語と韓国語などの文字が混在するページを作成できたり、外国のウィジェットをページに設置できたりと色々便利。国際標準もUTF-8の使用を推奨している。
しかし一部ブラウザでは解釈の違いから読みづらくなったり、文字化けが起きたりするので注意が必要。shift_jisから変更する際の注意点を以下にまとめた。
- html文書内
- <html lang="ja">
※日本語の文字化け防止のために。 - 文字コードの宣言
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- CSS
- @charset='UTF-8';
※外部スタイルシートの一番頭に↑上の宣言を追加。 - javascript
- UTF-8で保存しなおす。
※外部javascript内に書かれた日本語が文字化けする時は
文字コードを指定できるエディタを使いUTF-8で保存しなおすと直ったりする。
↓日本語が書かれてる例（確認ダイヤログの設定｜太字部分が文字化けして表示されることがある）
function ConfirmOpen(){
if(window.confirm("下のボタンを選んでください")){location.href="okyes.html"}
else{location.href="nocancel.html"}
}
英数字表示
- 現象
- UTF-8を指定するとwindows版IE6で英数字（1バイト文字）がすべて"Times New Roman" になる。このフォントはセリフつきでアンチエイリアスなしだと数字も半角記号もかなり読みづらい。
- 対象ブラウザ
- IE6
- 対処法１
- font-family で欧文フォントを指定する。
欧文フォントを改めて指定することで、"Times New Roman "以外に設定できる。
通常font-familyを何も指定しないと、ブラウザのデフォルトフォントが使用される。※IE6でもShift_jisやEUC-JPの場合はデフォルトのフォントが表示される。（変更していなければMSPゴシック）
また（総称ファミリー）sans-serifのみを指定しても、IE6では独自の解釈でフォントを割り当てるので日本語もキチンとフォント指定した方が無難。
色々あわせて以下を指定した。（順序どおり）
font-family:"ＭＳ Ｐ ゴシック",MS Sans serif,Osaka,sans-serif;
- ＭＳ Ｐ ゴシック
- 日本語フォントの指定
ＭＳ ゴシックは使用しないこと。（文字化けの問題などがあるのでＭＳ Ｐ ゴシックを使う。） - MS Sans serif
- 欧文フォントの指定
他の標準で入っていると思われる欧文フォント（Arial など）では、半角＜や半角／がひしゃげてしまったので、一番きれいに表示されたMS Sans serif を使用。 このフォントは米国ソフト開発や、ブラウザ環境でのデフォルトフォント。
ただ、日本語と並べると字間が狭い（というか密着してしまう）
最初から指定していたのなら日本語と接する時は半角を開けるとかの対処法があったが、手遅れにつきletter-spacingで全体の文字間を0.05em広げることで対応。
その他のフォントは他ブラウザ用。
文法チェック
- W3Cの検証サービス
- http://validator.w3.org/
※初期ページではURLを入力するタイプ（「Validate by URl」）だが、ページ内の「Validate by File Update」タブに切り替えるとファイル指定でのチェックもできる。
「Validate by Direct Input」タブに切り替えると、直接ソースをフィールドにコピペしてチェックできる。
セキュリティ
？全コピーを防ぐための方法
- 記述内容
- @import "http://";
- 記入箇所
- 全ファイル共通のCSSファイル 一番上に記述
- 理屈
- サイトごと全ダウンロードしようとしてもCSSファイルが見つからないのでエラーになる。はずだったが。
- 結果
- 最初に試したsafariでダウンロードできた。使えないのかも。保留。
今現在「上位レベルのプロトコルによっても文字コードが判別できないなら必須」とされている。
DOCTYPEの前にXML宣言をいれると、IE6などで後方互換モードになる問題もあり、入れないほうが良い。
またIE6ではDOCTYPEの前に何かがあるとすべて後方互換モードになる。XML宣言だけでなく、コメントなども入れないよう注意。
※※後方互換モード・・・web標準に準拠していないブラウザ独自解釈モード。（cssレイアウトで他のブラウザと著しく差がでる）