【Tool】Google web fonts

■無料フォント　Google web font

　http://www.google.com/webfonts

■Google web fonts 利用方法

　http://www.atmarkit.co.jp/fwcr/design/tool/webfonts03/01.html

【CSS】

ブロック要素にスクロールを設定する

#content{
　overflow:auto;
　height:500px;
}

【CSS】ブラウザのデフォルトCSSをリセット

「デフォルトCSS」とは各ブラウザが持っている要素に対する初期値の事を指している。

【問題点】
　デフォルトCSSの初期値はブラウザによって差異がある事

【解決策】
　すべての設定の上書きを設定する

■例
*{
　margin:0px;
　padding:0px;
}

【CSS】backgroud-repeat 背景画像を繰り返し表示

背景画像を繰り返し表示するコントロール

・繰り返さない　background-repeat:no-repeat;
・横に繰り返し　background-repeat:repeat-x;
・縦に繰り返し　background-repeat:repeat-y;
・縦横に繰り返しbackground-repeat:repeat;


■例 画像を全体に表示
body{
　background-image:url('test.jpg');
　background-repeat:repeat;
}

【CSS】floatプロパティを使ったあとに回り込みを解除する

floatプロパティによる回り込みは解除しない限り、以降も適用されている
状態となってしまう。
floatプロパティは段組みレイアウトで利用する事が多々あるが、
これを解除しないとレイアウトの表示が崩れてしまう。

float:left を指定している場合、clear:left と記述する事で回り込みを解除できる。
float:right を指定している場合は、clear:right で解除が可能となる。
clear:both を指定すれば左右どちらの回り込みでも解除が可能となる。

【Tool】Webページ検証について（HTML・CSS）

■HTML検証

Markup Validation Service

■CSS検証

Validator CSS

【CSS】ナビゲーションメニュー

ul & li でナビゲーションメニューを作成する

■例 

<ul id="menu">の場合

#menu ul,#menu li{
　margin:0px;
　padding:0px;
　list-style;none;　 /*リスト表示の無効化*/
}


#menu li{
　float:left;　　　　/*文字を回り込ませる*/
　margin-right:1px;　/*メニューの文字間隔調整*/
}

■応用
縦軸メニューの場合、動きのあるメニュー表示にする
#menu a:hover{
　color:#333333;
　padding-left:2em;　/*メニュー左側を広げる*/
　border-bottom:solid 1px #333333;
}

【CSS】 読みやすい文字組を実現する

長文を作成する際、IE6等では特に長文時の読みづらさが目立つ
対策として以下いくつかの設定をする事で、
問題の解決を図ることができる

1. font-family:○○;　　書体を変更

2. font-size:○px;　　　文字の大きさ

3. letter-spacing:○px; 文字間隔の調整

4. line-height:○px;　　行間隔の調整

背景が白の場合、文字色を限りなく黒に近いグレー（#333333）にする

【CSS】list-style liの表示を無表示に変更する

通常のliタグを表記すると以下のようになる
===========================================

　
1. test

　
2. test2

===========================================

liで設定した頭文字を無効にする場合は

li{
　list-style:none;
}

【CSS】text-decoration リンクの下線を消す

リンクの下線を消したい場合は以下のプロパティを設定

text-decoration:none;

■例
a#menu:hover{
　text-decoration:none;
}

※マウスオーバー時にID menu のリンクの下線を非表示にする