Bonnie styles. - Webデザイン、CSSなど

少しまとめておきたかったので紹介します
今回はサンプルはありません。

headに記述するといいもの

<mata name="description" content="説明文" />

サイトの説明文を書きましょう

<meta name="keywords" content="単語,単語" />

サイトにまつわるキーワードを入れましょう。区切る場合は、カンマ,で区切ります (例) : Webdesign,CSS

<meta name="auther" content="作成者" />

作成者を入力します

<meta name="copyright" content="コピーライト" />

コピーライトを入力します

<meta name="robots" content="NOINDEX,NOFOLLOW" />

検索のロボットに収集されるかどうかです。NOを付けるとしなくなります。

H*の使い方

<h1>は1つだけ使う。何個も付けたい<h1>があるなら、それらを<h2>を使って大タイトルに<h1>を使う。
また、H1,H2,H3,H4,H5,H6とあるが、重要度はH1が一番高いです。

IDとCLASSの使い方

IDは1つのみしか指定できない。複数指定したい場合は、CLASSを使う。
IDは、HeaderやWrapなどに使おう。またページトップのリンクの時にも使える。
1つのDIVなどに複数のCLASSもつけられる。(例) <div class="one sample">あああ</div>　空白を開ける

IE6に困ったときはあるCSSを付け加えてみる

何かが表示されない・ずれているとか

zoom: 1
position: relative

Float時にマージンが多くとられる

display: inline

ややこしいけど便利なPositionプロパティ。

positionとは配置が変えられるプロパティです。
種類は4種類(static,relative,absolute,fixed)ありますが、staticは標準状態（何も起きない状態),absoluteとfixedの構成がほぼ同じなので absoluteとrelativeを紹介します。
position:relativeは、他のものに影響されずにBOXをTop,Right,Bottom,Leftに移動できる様にするプロパティ
position:absoluteは、そこ場所から完璧に別の場所にTop,Right,Bottom,Leftに移動できる様にするプロパティ
position:fixedは、absoluteの効果＋固定（スクロールしても移動しない）というプロパティ。IE6非対応です。

画像にボーダーとPadding

<img src="XX" style="border: 2px solid #000; padding: 1px" />

画像にボーダーを表示するだけではなくて、Padding:1pxを付けると余白ができるので少し印象が変わります。
画像に背景を指定するとそれが1px(*4)に表示されます。

font:26plus-zeichen » Say it fat
素敵なフォントです