9/29 ☼　Illustratorカニを描く/CSS基礎続き

HTMLとXHTMLの記述上の違い

バージョンアップごとに複雑多様化するHTMLを、XML(メタ言語。メタ言語は言語を作る言語であって文書やデータを記述する言語ではない。)に基づいて書き直した実装の1つで、HTMLの後継仕様となる。
記述の内容に自由度のあったHTMLに比べると、書式が厳密になっている。

XHTMLでの記述

<?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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>タイトル</title>
<link href="css/base1.css" rel="stylesheet" type="text/css" media="screen, print" />
</head>

【XML宣言（必須）】

<?xml version="1.0" encoding="UTF-8"?>

【ドキュメントタイプ(DOCTYPE)宣言】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【名前空間（xmlns）と言語コード（xml:lang）を指定する】

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

【利用しているスタイルシート言語を宣言する】

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

【外部リンク】

<link href="basic.css" rel="stylesheet" type="text/css" media="screen, print" />

media="all"とすると携帯の表示等に問題がでるので、必ずmedia="screen, print"にする。

外部CSSファイル

【@charsetをCSSファイルの１行目に記述する】

@charset "UTF-8";

【１行空けて「リセットCSS」を記述する】

* {
　margin: 0;
　padding: 0;
　border: none;
　list-style-type: none;
　font-style: normal;
　font-weight: normal;
　font-size: 100%;
　text-align: left;
}

CSSの記述順序

color
font-family
font-size
font-style
font-weight
line-height（文字指定）
margin
padding（空間指定）
width（コンテントが入るエリア）
height（コンテントが入るエリア）
background-color（背景色）
background-image（背景画像）
border（枠線）

font-familyについて

シェアの少ないブラウザで表示するフォントから記述する。

font-family:
　　"Hiragino Kaku Gothic Pro",
　　"ヒラギノ 角ゴ Pro W3",
　　Meiryo,
　　"メイリオ",
　　Osaka,
　　"MS PGothic",
　　"ＭＳ Ｐゴシック",
　　sans-serif;