まずはhead付近で書く事 | [旧] WEB向上中

[旧] WEB向上中

webデザイナーとして日々奮闘する中、色々と忘れず頑張っていければと、web周りの技術や情報をメモっています。

htmlを書く際は、頭に宣言をする必要があります。

簡単に説明すると、このページは html か xhtml どちらで書かれているかと、その規約をどれだけ厳格に守っているかを宣言します。

脱初心と言う事で、基本的に xhtml のcssでのコーディングにのみ焦点を当てて説明します。

その上でhtmlファイルの一番冒頭で必要な宣言は以下の通りです。

1. 完璧にXHTMLを守ってます宣言。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. できるだけXHTMLを守っていますが、ちょっとぐらいのミスは許してください宣言。(ただしフレームは絶対使いません。)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


この2つの使い分けで表記します。
本当は、<?xml version="1.0" encoding="Shift_JIS"?>という表記もド頭にいるのですが、それを書くとIE6で解釈を誤解し表示崩れの原因となります。ですので、ファイルの保存形式をUTF-8かUTF-16の文字コードを使用したときはこの記述の省略が許されているので、基本的にはUTF-8で制作します。

上の宣言で理想は1.ですが、初心者の方は基本2.で宣言しましょう。ちょっと間違っても許してねと言う宣言なので。(例えばリンクを外部ウィンドウを開くことをXHTMLでは認めていないので、1.の宣言で外部ウィンドウを開いては駄目です。)

以上を踏まえての基本的な形です。
<!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" lang="ja" xml:lang="ja"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>タイトル文</title>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<meta name="description" content="説明文" />
<link rel="stylesheet" type="text/css" href="スタイルシートへのパス" media="all" />
</head>
<body>
</body>
</html>
何か意味不明なものもあるかもしれませんが、気にせずに。(笑)
外部cssはlinkタグの部分に読み込ませます。
javaScriptも使う場合はlinkタグの下あたりに
<script type="text/javascript" src="javaScriptへのパス"></script>
と追記して下さい。

最後にUTF-8についてですが、charsetでutf-8を宣言し、保存をUTF-8とすればいいのですが、保存時にはBOM付きではない保存をして下さい。(たまにそれが原因でトラブル時があります。)
ちなみにメモ帳では必ずBOM付きになってしまいますので、別のテキストエディタ を利用しましょう。

ブラウザでは宣言に反する書き方をしてもちゃんと表示されたりしちゃいます。(実際そんなページも多いです。)
ですがきちんと宣言し、その通りに表記していた方が、将来的にもよろしいと思います。(検索ロボットの動きもそちらに向かうはずですし・・・たぶん)

ブログなどの機能を利用する一般の方ならともかく、脱初心者を掲げる方にはぜひとも美しい構造のページを製作して欲しいと願います。

っとちょっと出来るヤツっぽく書きながらも、ブログの機能に頼り汚い構造のままあげちゃったりしています。( ̄_ ̄ i)