ウェブ標準（XHTML＋CSS）のページ

CSS、XHTML、ウェブ標準のページです。

スタイルシートは、ウェブページのレイアウトを定義する技術です。
2004年6月制定のWeb JIS、ウェブコンテンツをCSSとHTMLに分離し、構造化することが重要な要件に要件になっています。内容と文書構造はhtmlが、視覚表現（デザイン）はスタイルシートが担当することになりました。
xhtmlとCSSの利点は次のようです。

メンテナンスがしやすいです。背景色、フォントなどのレイアウトを、数千ページのサイトでも一挙に変更できます。
ウェブアクセシビリティが向上します。
SEO対策にもなります。

桑原政則オンラインでは、次のようにしています。（2005年5月）

文字は拡大できるように%で相対指定する。
h1、h2などの見出し要素を使用する。
読み飛ばし機能「本文へ」を設定する。
表組みをレイアウトのために使用しない。
画像には、表題か代替テキストを入れる。

CSS(Cascading Style Sheets)はスタイルシート言語の代表です。

なお、タグは今後のことを考えて、小文字を使います。

ABC順索引

/* */: /* */は、　/* ▼共通 */のようにコメントする。
"MS　ゴシック": スペースを含む場合には、引用符で囲む。
#aaa｛｝: htmlの<div id="aaa">に対応する。
.bbb｛｝は<div class="bbb> に対応する。
@import: 別ファイルとして用意したスタイルシートを取り込むこと; <style type ="text/css" media="all" >
@import "./sample.css";
</style>
border: { border:2px solid #999 } ：枠線の太さ2px、実線、濃いグレー
br: break 改行。<br />で閉じる。
class: 頭に「.」をつける。.bbb｛｝
普通名詞のようなもの。idは固有名詞。
color: 前景色（文字色）
container: ページのコンテンツ全体を入れる入れ物
html：　<body><div id="container"> ................</div></body>; css：　#container { margin-left: auto; margin-right: auto; padding: 0px; width:490px; background:#fff; }
margin-left: auto; margin-right: autoでボックスが中央揃えになる。
CSS: HTMLは構造言語、CSSは表現言語
CSS HACK: ブラウザのバグを回避するようにコードを工夫して記述すること
CSSの3要素: ボックスモデル： #によるグルーピング
フロート（まわりこみ）： float:left
いろいろなブラウザへの対処
dl: definition list。定義リスト＝用語リスト
dt：definition term <dt>＝用語
dd：definition description 　<dd>＝用語の説明
div: division　ページコンテンツをグループ化すること。改行のあるブロック要素を囲むむタグ。→span
html → <div id="container">
css → #container{
         background:#fff
         margin:20px 30px
         border:2px
         padding:20px
         }
em: 1em親要素の文字サイズ。0.75emはそれより小さい。
float: 左に寄せる。
{ width:50%; float: left }

h1にテキストを回り込ませる
h1{ float:left; width:200pt }

テーブルをテキスト左に回り込ませる。
table {float: left;}

囲みのテキストを左に置く
body:<p class="textfloat">あああああああ</a>
css : .textfloat {float: left; width:50%; }

画像をテキストの右に置く
img {
float: left;
margin-right: 20px;
margin-bottom: 10px; }

画像をテキストの左右に置く
html：; <p><img src="popfrogx2_1.gif"...id="f1" /></p>
<p><img src="popfrogx2_2.gif"...id="f2" /></p>

CSS：
#f1 { float: left; margin-right: 20px; margin-bottom: 10px; }
#f2 { float: right; margin-left: 20px; margin-bottom: 10px; }
floatの解除: html  : <p class="clearfloat">
css:     img {float:left;}.
          .clearfloat {clear:left;}

font: ＝字体、文字サイズ、スタイル（太字、下線など）; { font: 9pt/12pt } ：文字サイズ9pt、行間12pt
{ font: "MSゴシック", Osaka, sans-serif } ：Windowsのの場合はMSゴシックを、Macの場合はOsakaを、それがない場合は sans-serifを用いる。sans-serifは指定したフォントがない場合のもちいるゴシック系フォント。
font-family 　: フォントの種類。文字サイズの変更が可能なようにem、%表示でおこなう。
font-weight: 太さ
HTMLソース: シンプルに記述するサイトがふえてきている。流れはウェブ標準へ。それにはテーブルによるレイアウトをやめてcssデザインにすること。
hr: horizon。区切り線
hover: マウスをその上に乗せた時の色; A:hover { color: red; }
id: 頭に#（ハッシュ）をつける。　html：<div id="aaa">
IEでフォントサイズの変更を可能にする方法: フォントサイズをピクセル指定していても、変更を可能にする方法。　[ツールメニュー]―[インターネットオプション]―[全般タブ]―[ユーザー補助]―［Webページで指定されたフォントサイズを使用しない：チェック］
margin: 外白。cf. paddingは内余白; { margin: 20px 30px } ：上下余白が20px、左右余白が30px
padding: 内余白。cf. margin
pre: プリフォーマット。<pre>…</pre>
print.css: body {
margin-left: 2cm;
color: #000000;
background: #ffffff;
line-height: 1.8;
font-size: 10pt;
font-family: "ＭＳ明朝",serif;
}
.banner { display: none }
h1 { font-size: 16pt }
h2 { font-size: 14pt }
h3 { font-size: 12pt }
h4 { font-size: 11p}

head区間に下を埋め込む。
<link href="stylesheet/print.css" rel="stylesheet" type="text/css" media="print">
scope: 表内での方向性の指示
src: source
span: 文字列の一部分にスタイルを適用。改行なしのインライン要素を囲むタグ。→div; <span style="color:red;">あいうえお</span>
Web Developerのインストール: →infoaxia
Web標準: 「Web標準」の制作手法に変更すると、作業が簡単になって制作時間の短縮にもつながる。さらに様々な環境（テキストブラウザや音声ブラウザなど）でも、情報内容が適切に受け取れるようにもなる。Web標準は制作者とユーザーの双方にとって有益である。
width: borderやpaddingはふくまない

XHTML＝Extended HTML: HTMLの作法でXMLを使えるようにしたもの。HTML4.01の上位バージョンはXHTML1.0
ソースの1行目に、　
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
のように記述されている。ここに「XHTML」がある。
XHTMLにも、1.0、1.1、2.0といったバージョンが存在する。
XHTMLの記述法

要素名、属性名はすべて小文字で記述する。<a href="index.html">では、 aが「要素名」、hrefが「属性名」。これらをすべて小文字で記述。
属性値は必ず引用符で囲む。<img src="logo.gif" width="30" height="100">では、 30や100などの「属性値」を必ず「引用符」（"）で囲む。
空要素は<要素名 />のように記述する。通常は、「開始タグ」と「終了タグ」で囲んでタグ付けしますが、　　　何も囲まずに「ここに挿入」というニュアンスで使われるので「空」なのです。空要素は、<hr />や<br />のように記述する。<img>も空要素ですので、 <img src="logo.gif" width="30" height="100" />のように記述する。この際、「/」の前に半角スペースを入れておく。これを入れないとブラウザによっては「hr/なんていうタグはありません」と拒否することがある。


XML: extended markup language

日本語索引

値 value: h1 {color : red}の redのこと。→セレクタ {プロパティ:値}

ウェブアーキテクト

ウェブアクセシビリティ専門家誰でも使えるサイトにする人
ライター文章を書く人
エディター編集する人
マークアップエディター html文書をつくる人
グラフィックデザイナー写真・画像を作成処理する人
デザイナー CSSによりページをデザインする人
SEO専門家検索エンジンに適した仕組みを作る人

ウェブ世界の波

usability → accessibllity → seo → web標準。見栄え重視からアクセシビリティへ
1996年から企業がウェブを公開しはじめた。
2000年Jacob Nielsen "WEb Usability"により「使いやすさ、わかりやすさ」を重視するようになった。usability
2001年「米リハ法508」の16項目が社会の規範となる。accessibility

空要素

<hr>や<br>のように単語などを囲まないで単独で使うタグ。通常は「開始タグ」と「終了タグ」で囲んでタグ付けするが、何も囲まずに「ここに挿入」というニュアンスで使われるので「空」といわれる。

構造とデザインの分離

HTMLで見出しやリストを指定（マークアップ、構造化）して、見出しやリストの中身（スタイル、フォントの種類や色）はCSSでおこなう。構造はhtmlで、デザインはcssで。

<h1>大見出し</h1>で構造を記す。h1のデザインについてはcssが担当する。これにより音声読みあげソフトは、構造を示すタグh1によって見出し1であることを認識する。
cf. 今まで
<font size="+2"><b>大見出し</b></font>

文書のメンテナンスを容易にし、また表現に一貫性を持たせる手段です。多くのワープロソフトでも、スタイルシート機能によって「見出し」「箇条書き」などの表現方法を別途定義し、それを本文に適用することができるようになっています。

文書のコンテンツや論理構造と表現のルールを分離することで、さまざまなメリットが生まれる。
文書全体にコンセプトに基づく一貫したデザインを適用できる
文書のスタイルを一括管理でき、メンテナンスの効率が大幅に向上する
出力メディアごとに異なるスタイルを設定できる
スタイル専用の言語を使うことで、きめ細かな表現を設定できる
HTMLが本来の役割に徹することですっきりし、作者、ユーザーともに利用しやすいものになる

コメント

/* と */ の間はコメントとして無視される。

/* コメント */

クラスセレクタ

「.」（ドット）ではじまるセレクタ。htmlファイルに「p class="style1"」のように記述することで、好きな場所だけに適用させることができる。

グルーピング

h1,h2{ color:red;}などのように、カンマをもちいて複数の属性を一度に指定すること

サイトのチェック

各種ブラウザでブラウズ
各種バリデータでのチェック
CSSを切った状態でブラウズ
画像をオフにしてブラウズ
JavaScriptをオフにしてブラウズ
音声ブラウザでブラウズ　
プリントアウト（各種ブラウザから）→モノクロ／カラー
ブラウザのフォントサイズを最大／最小にしてブラウズ
モニタサイズをVGA（800×600）にしてブラウズ

シンプルセレクタ

h1 { font-size: 24pt} 　のように要素名をセレクタに利用すること。<body>要素内には余計な記述をしなくてもシンプルセレクタは機能します。

スタイルシート言語の指定

CSSを用いる場合は、head区間に以下のようなmeta宣言を記述する。
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

スタイルシートの記述先

リンク、エンベッド、インライン

スタイルシートを外部ファイルで定義

head区間に下を挿入する。

代表的なスタイルプロパティ

テキストのスタイル：文字色　フォントのサイズ・スタイル、行揃え
ボックスのスタイル：border, margin, paddin　　背景色
サイズの単位

セレクタ ?selector

h1 {color ?: ?red}の h1のこと。 idや「.」

セレクタ{プロパティ:値}
スタイルシートは、セレクタ（h1）のプロパティ（color）を値（red）に設定すること。

セレクタのグループ化

カンマで区切る

H1,H2,H3{background-color:#e0e0e0}

ソースを見やすくするために

プロパティ、コロン、値の前後に、半角スペース、タブ、改行を入れる。

単位

相対指定
em　エム（文字の「高さ」）

フレーム

xhtml1.1では定義されていないので、使わない。

ブラウザスタイルの初期化

プロパティ property

h1 {color : red}のcolorのこと。→セレクタ {プロパティ:値}
複数の属性を指定するには、セミコロンを使う。
H1 {
color: red;
background: yellow
}

ページ内スタイルシート、エンベッド

<head>タグの中にスタイルを記述すろこと。
欠点。同じソースコードをページごとに記述するのは、リソースの無駄遣い。サイト単位での統一や、修正が生じたときに編集が面倒

ボックス

= margin+ border+ padding+ width
widthはボックス幅でない。

優先順位

important を指定すると、タグで style="color:blue" と指定するよりも優先度が強くなる。
H1 { color:red ! important; }

リニアライズ

CSSをオフにした状態をいう。リニアライズすることで、そのサイトが昔ながらのテーブルレイアウトか、CSSレイアウトかが判断できる。

リンクの下線の非表示

避けるべき事項。リンクテキストはリンクテキストらしく青い文字で下線を付けておくのが理想。リンク箇所は、ユーザーがマウスオーバーしたときに、クリック可能が領域に入ったことを知らせる役目を果たすことも重要です。

ロールオーバー

a:link 未訪問のリンク先
a:visited 訪問済みのリンク先
a:hover ロールオーバー時。hover ハバ
a:active マウスボタンを押したとき
順序が大切で、「LoVe and HAte」と覚える。

リンク集他

The XHTML Family 石川雅康。2001年9月
W3C(World Wide Web Consortium)

人

大藤幹: 　『詳解 HTML & XHTML & CSS辞典』　［著］大藤幹　1890円（税込み）
神崎正英　　: DOCS directory
境祐司: 『XHTMLマークアップ＆スタイルシート　リフォームデザインガイドブック』
サンプルデータのダウンロード
境祐司のブログ
鷹野雅弘: ＠＠
益子貴寛: CYBER@GARDEN
JavaScript、CSS、DHTMLを生かす手法とアイデア
 XHTML+CSS (r)evolution cssnite
cssnite7
Web制作現場の対立を解消する！ XHTML+CSSガイドライン作り

スタイルシート とほほ
CSSはじめの一歩HTML、CSS講座
CSS解説初歩からの解説
CSSリファレンスサンプル付き
CSSデザイン・オンラインオンラインで作成
EasyCSS　簡単にスタイルシートのソースコードを生成。フリーウェア
基礎からはじめるCSS まぐまぐ
初めてのホームページ講座CSSの解説
マークアップ言語としての XHTML 入門Mamoru Imanishi