W3C準拠したコーディングのやり方をザックリと説明

LINEで送る
Pocket

W3Cに準拠したhtmlコーディングできる人ってどれぐらいいますか?

ぜひとも自分の書いたコーディングをチェックしてみてください。

Another HTML-lint gateway

ここに自分の書いたコードをコピペしてチェックボタンをクリックすると採点してくれます。

コピペする前に以下の点を確認してください。

DOCTYPE宣言はしていますか?

DOCTYPE宣言をしていない場合は、html4.0 Transitionalを基にチェックされていきます。

なのでDOCTYPE宣言は必ずしてください。

2カラムだと僕は以下のようなコードがデフォルトですね。CSSも載せておきます。参考までに。

html

[html]
<?xml version="1.0" encoding="UTF-8"?>
<!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="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトルは分かりやすく短いものを</title>
<meta name="Keywords" content="キーワードはカンマ区切りで15個程度,,,,,,,,,,,,,,,,,,,,," />
<meta name="Description" content="サイト説明文は100文字以下で簡潔に" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="ja" />
<link rel="start" href="index.html" />
<link rev="made" href="mailto:sample@sample.co.jp" />
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,tv" />
<link rel="stylesheet" type="text/css" href="css/2column.css" media="screen,tv" />
</head>
<body>
<div id="Wrapper">
<div id="Header">
<p>Header</p>
</div><!–END #Header–>
<div id="Container">
<div id="Side">
<p>Side</p>
</div><!–END #Side–>
<div id="Main">
<p>Main</p>
</div><!–END #Main–>
</div><!–END #Container–>
<div id="Footer">
<p>Footer</p>
</div><!–END #Footer–>
</div><!–END #Wrapper–>
</body>
</html>
[/html]

css

[css]
/* 表示領域センター揃え */
div#Wrapper {
width:800px;
margin:0 auto;
font-size:16px !important;/*文字サイズはわざと変えています*/
color:#FFF;
}

/* 各コンテンツ表示領域設定 */
div#Header {
height:40px;
background:#F63;
}
div#Container {
clear:both;
height:400px;
margin:10px 0;
background:#CCC;/* ズレが生じたりすることがある場合は背景色を使って浮遊解除できているかチェックしましょう */
}
div#Main {
width:630px;
float:right;
background:#6C9;
height:400px;
}
div#Side {
width:160px;
margin-right:10px;
float:left;
background:#96C;
height:400px;
}
div#Footer {
overflow:hidden;
height:25px;
background:#06F;
}
[/css]

これを実行すると以下の画像のような表示になります。

基本的にはxhtml1.0でのコーディングです。文字コードはUTF-8。これは絶対です。
必要なCSSは全てimport文で読ませるため、import.cssだけをhtmlに記述。

リンク:import.cssって何?それによるメリットは?html毎に指定しちゃダメなの?

html5はまだあまり使っていません。対応させるのが少し手間がかかってしまうので…

body内の説明

Wrapperで全体を括ります。
Headerには、keyImgなどの情報を入れていきます。
Containerは、SideとMainの浮遊(Float)を解除させるために記述。
Sideは、サイドバーのことですね。主にリンクやバナー等が入るとこです。
Mainは、ブログで言う記事にあたる部分です。
FooterはCopyRightとかを書くとこです。

ざっくり説明しましたが、このコードを基にコーディングするとW3Cに準拠したコーディングを行うことができるかと思います。

なぜ2カラムのソースでMainとSideをContainerで囲ったのか。いらないんじゃないの?

確かに無くても大丈夫です。
Containerを付加したのはFloatしたものをContainerでclearできるので都合がいいからです。
正直この点については賛否両論だと思いますが、あったほうがソースもいじりやすくなると自分自身感じています。

3カラムだとどうなるの?

仕組みは2カラムと一緒です。Floatさせる要素が1つ増えるだけですね。
それに伴い、htmlのソースが一部追記されます。(2カラムから追加された行はハイライトで表示しています)

html

[html highlight=”22,31-34″]
<?xml version="1.0" encoding="UTF-8"?>
<!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="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトルは分かりやすく短いものを</title>
<meta name="Keywords" content="キーワードはカンマ区切りで15個程度,,,,,,,,,,,,,,,,,,,,," />
<meta name="Description" content="サイト説明文は100文字以下で簡潔に" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="ja" />
<link rel="start" href="index.html" />
<link rev="made" href="mailto:sample@sample.co.jp" />
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,tv" />
<link rel="stylesheet" type="text/css" href="css/3column.css" media="screen,tv" />
</head>
<body>
<div id="Wrapper">
<div id="Header">
<p>Header</p>
</div><!–END #Header–>
<div id="ContainerWrap">
<div id="Container">
<div id="Side">
<p>Side</p>
</div><!–END #Side–>
<div id="Main">
<p>Main</p>
</div><!–END #Main–>
</div><!–END #Container–>
<div id="Side2">
<p>Side2</p>
</div><!–END #Side2–>
</div><!–END #ContainerWrap–>
<div id="Footer">
<p>Footer</p>
</div><!–END #Footer–>
</div><!–END #Wrapper–>
</body>
</html>
[/html]

css

[css highlight=”14-18,21,39-45″]
/* 表示領域センター揃え */
div#Wrapper {
width:800px;
margin:0 auto;
font-size:16px !important;/*文字サイズはわざと変えています*/
color:#FFF;
}

/* 各コンテンツ表示領域設定 */
div#Header {
height:40px;
background:#F63;
}
div#ContainerWrap {
overflow:hidden;
margin:10px 0;
background:#00F;/* ズレが生じたりすることがある場合は背景色を使って浮遊解除できているかチェックしましょう */
}
div#Container {
clear:both;
float:left;
width:650px;
height:400px;
background:#CCC;/* ズレが生じたりすることがある場合は背景色を使って浮遊解除できているかチェックしましょう */
}
div#Main {
width:500px;
float:right;
background:#6C9;
height:400px;
}
div#Side {
width:140px;
float:left;
margin-right:10px;
background:#96C;
height:400px;
}
div#Side2 {
width:140px;
margin-left:10px;
float:right;
background:#CC9;
height:400px;
}
div#Footer {
clear:both;
height:25px;
background:#06F;
}
[/css]

これを実行すると以下の様な画面になります。

少し複雑ですが、3カラムになっている部分の中でMainとSideの括りでFloat。ContainerとSide2の括りでFloatされているだけです。
この仕組みが理解できればサイトを作成することが可能です。ブログのカスタマイズ等も出来てくるかと思います。

実際にソースを触ってみるとわかると思いますので2カラムと3カラムのファイルをzipで置いておきますのでご自由にお使いください。
2カラムと3カラムのサイト作成における基本.zip

追記:
CSSについての記事もありますので、参考にしてください。
CSSを記述するとき、どんな記述方法をしていますか?

関連記事

ピックアップ記事

  1. カメラのフラッシュを使用したほうが綺麗な写真が撮れると思っていませんか? それは間違い…
  2. 100%売上を上げる
    まだまだ体力のないショップ様にとって、どんな商品を仕入れるか、またはどんな商品を企画して作る…

ココロザシ運営サービス

合同会社ココロザシ

空港ラウンジ.com

OMIYA!

ネトビジ!

オデ速!

ノマド的節約術

オススメサービス

Feedly

follow us in feedly

ピックアップ記事

  1. 最近「安いものが以前に比べて、高いものが売れるようになった」ような情報をチラホラ聞くことが多…
  2. 楽天SEO
    今回は、楽天でSEOするための重要な要素である商品レビュー数を増やすための方法を考えてみたいと思…
ページ上部へ戻る