| { } 内末尾の「;」や半角スペースはなくても良い。 |
| リンク指定（クリック前） |
a:link { text-decoration:underline; color:#0000ff; } |
| リンク指定（クリック後） |
a:visited { text-decoration:underline; color:#990000; } |
| リンク指定１（オンマウス時） |
a:hover { text-decoration:none; color:#ffffff; background-color:#0000ff; } |
| リンク指定２（オンマウス時） |
a:hover { color:#ff0000; position:relative; top:1px; left:1px; } |
サンプルは用意できていませんが、アンダーラインの有無、文字の色、背景色、オンマウスで動かすなど色々と変化できます。
「position」以外は判りにくいですが、画像にも適用できます。
|
| 背景色指定 |
{ background-color:yellow; } |
| 背景色指定 |
{ background-color:#ffff99; } |
背景色の見本
|
| 背景画像指定 |
{ background-image:url(********.jpg); } |
| 背景画像繰り返し方向指定 |
{ background-repeat:repeat-x; } |
| 背景画像繰り返し方向指定 |
{ background-repeat:repeat-y; } |
| 背景画像繰り返さない指定 |
{ background-repeat:no-repeat; } |
| 背景画像固定 |
{ background-attachment:fixed; } |
| 背景画像表示位置指定 |
{ background-position:top center; } |
| 背景画像表示位置指定 |
{ background-position:right bottom; } |
背景をまとめて指定
NEW！ |
{ background:#ffffff url(*****.jpg) right bottom no-repeat fixed; }
まとめて書く場合はタグの属性のように「半角スペース」で区切ります。書き順は気にしなくても良さそうです。 |
/* 文字の大きさ、行ピッチ、文字の色 */
|
| フォントサイズ指定 |
{ font-size:15px; } |
| 行ピッチ指定 |
{ line-height:150%; } |
| 行ピッチ指定 |
{ line-height:20px; } |
| 文字色指定 |
{ color:blue; } |
| 文字色指定 |
{ color:#0000ff; } |
/* 書体は、半角全角・大文字小文字・スペースなど指定どおりに記述しないと表示されないので、コピペをお勧めする
スタイルシートでは「'」「"」は使わないことになっていますが、この書体だけは使います。 */ |
| 書体指定 |
{ font-family:'MS UI Gothic'; } |
| 書体指定 |
{ font-family:'ＭＳ Ｐ明朝'; } |
| 書体指定 |
{ font-family:'HG丸ｺﾞｼｯｸM-PRO'; } |
| 書体指定 |
{ font-family:'HGｺﾞｼｯｸE'; } |
書体をまとめて指定
NEW！ |
{ font:italic bold 18px/150% 'HGｺﾞｼｯｸE'; }
サイズと書体は必ず指定しないとダメです。また、書き順があるようなので、真似てください。 |
/* 境界線 solid：直線、double：二重線、inset：くぼんで見える、outset：浮き上がって見える */
|
| 境界線太さ・色指定 |
{ border:1px solid gray; } |
| 境界線太さ・色指定 |
{ border:1px solid #666666; } |
| 境界線太さ・色・辺指定 |
{ border-left:1px solid red; } |
| 境界線太さ・色・辺指定 |
{ border-bottom:1px solid #ff0000; } |
|
/* 太さは上・右・下・左の順で、半角スペースで区切る */ |
| 境界線４辺別々太さ指定 |
{ border-style:solid; border-width:1px 8px 15px 30px; } |
|
| 境界線からのマージン指定 |
{ padding-top:30px; padding-bottom:0px; padding-left:20px; padding-right:10px; } |
| 水平線（hr）指定 |
{ border:1px solid red; width:300px; background-color:blue; height:6px; } |
| ページ全体マージン0指定 |
body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; } |
| ページ全体マージン0指定 |
body { margin:0px; } |
/* スクロールバーはもっと詳細に指定できますが、下記で充分だと思います。 */
|
| スクロールバー色指定 |
body { scrollbar-base-color:#ff0000; } |
| スクロールバー色指定 |
body { scrollbar-base-color:red; } |
| 左スクロールバー非表示 |
body { overflow-y: hidden; } |
| 下スクロールバー非表示 |
body { overflow-x: hidden; } |
|
|
| /* （特殊）Windows IE5.5以上のみ */ |
| 縦書きにする |
{ writing-mode:tb-rl; } |
|
