htmlとcssの基礎知識

• cssメリット

WEB標準に準拠 - 「SEO」「アクセシビリティ」「ユーザビリティ」
構成情報HTMLとデザインCSSの分離
メンテナンスが容易

• レンダリングエンジン

Trident	（Internet Explorer等
Gecko	Mozilla Firefox等
KHTML	Konqueror
WebKit	Safari、Google Chrome等
Presto	Opera

• 日本のブラウザシェア

http://lhsp.s206.xrea.com/misc/browser-share.html

• レンダリングモードはXHTMLソースコードの最初に記述するDoctypeスイッチングを選択して決定する。DTDは、XHTMLのメタデータが記述されている。

http://www.htmq.com/htmlkihon/302.shtml

• サーチエンジンシェア(あるサイトのアクセス解析より)

http://find.accessup.org/kensaku/access_history.html#graph

リンク

Zen Garden - ワンソース・マルチデザインサイト

http://www.csszengarden.com/tr/japanese/

ユーザビリティ

http://www.usability.gr.jp/
http://www.hcdnet.org/

---

HTML

• 要素の種類

ブロックレベル要素	widthとheightの値を持つ。指定がない場合、親要素を継承	p div table dl ul ol form address blockquote h1-h6 fieldset hr pre
インライン要素	widthとheightの値を持たない。ブロックレベル要素内の文中をマークアップする。ブロックレベル要素を子要素として持つことが出来ない	a abbr acronym b bdo big cite code dfn em i kbd label q smap small spam strong sub sup tt var
インラインブロック要素	widthとheightの値を持つ。文法的な使われ方はインライン要素	button img input object select

span要素	インライン要素。文中、CSSでデザインする<span>場所</span>を囲む。
コメント	<!-- -->

• 文字実体参照・数値文字参照

http://w3g.jp/others/data/letters

• sectionとarticleの違い

article	単体で完結出来る お知らせや新着情報
section	リンク先を見てみないことには分かいような物 コンテンツ類

CSS

コメント

/* */

• 記述場所

インライン	<p style="color: #ff00000;"> </p>
内部参照	<style type="tetxt/css"> p{ color: ff0000;}</style>
外部参照	<link rel="stylesheet" type="text/css" href="xxx.css" />
@importディレクティブ	@import url(xxx.css) all;　←css内に記述。cssを階層構造にしてまとめる物?

• セレクタ

http://weboook.blog22.fc2.com/blog-entry-287.html
http://www.htmq.com/csskihon/005.shtml

• スタイルシートの継承一覧

http://css.eweb-design.com/0108_bsc.html

• body要素に書いておくと良さそうなもの

http://www.designwalker.com/2007/02/css-body.html

• 詳細度(適応優先順位)

*	0
p	1
a:link	2
ul li	2
.con	10
#header	100
style=""	1000
#wrapper ul li.home	112
div#header	101

• カスケーディング

スタイルシートの種類

オーサー(Author)	コンテンツ作成者が作成したCSS
ユーザー(user)	コンテンツ利用者が意図して使用するCSS
ユーザーエージェント(User Agent)	ブラウザ自体が持っているCSS

優先順位

1	ユーザスタイルシート(!important宣言付き)	CSSファイル内に!important宣言があるもの
2	オーサースタイルシート(!important宣言付き)	CSSファイル内に!important宣言があるもの
3	オーサースタイルシート	サイト制作者がlinkタグやstyleタグなどで指定したもの
4	ユーザスタイルシート	ユーザー独自に作成したもの
5	デフォルトスタイルシート	ブラウザが標準で持っているもの

• ボックスモデル

ボックスモデル

http://www.geocities.jp/multi_column/float/02.html
http://www.dspt.net/stylesheet_css/001/010.html

マージンの相殺

垂直方向のマージン相殺	正正/値が大きい方 正負/マージンを足した値 負負/絶対値が大きい方
ボックス内にボックスがある場合のマージンの相殺	paddingとboderの値がない場合。絶対値が大きい方が採用
空要素に対するマージン相殺	paddingとboderの値がない場合。マージンを指定しても折りたたまれる

http://blog.webcreativepark.net/2008/07/09-001153.html
http://kohituji.konjiki.jp/tec/margin.html

• フォントサイズについて

bodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなる
CSS3で単位remは、ルートemの略。html要素にfont-size: 62.5%;を指定すると継承する?

http://redline.hippy.jp/lab/css/bodyfontsize625.php
http://parashuto.com/rriver/development/css3-re

• ボックスの配置方法（基準位置）を指定

http://www.htmq.com/style/position.shtml