1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. ページ全般
ページ全般 |  background |  margin |  スクロールバー |  リンクの下線 | 
ページ全般
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="○○.css">
<title>○○</title>
</head>
<body>

内容

</body>
</html>
■○○.css
/* この外部cssの文字コードを指定 */
@charset "shift_jis";

body{
内容
}

・参考
body {
color:#393939;
background-color:#ffffff;
font-size: 80%;
font:Verdana,Arial,Osaka,"ヒラギノ角ゴ Pro W3","MS Pゴシック";
font-family:Verdana,Arial,Osaka,"ヒラギノ角ゴ Pro W3","MS Pゴシック";
line-height:125%
}

idで指定用、ページ内一回使用(#を付ける)
#info{
内容
}

a img { border: none; /* 画像の枠線を消す */ color: #ffffff; /* バージョンが低いブラウザ用に枠線を消す */ background: transparent; /* 透明にして背景が見えるようにする */ }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>○○</title>
<style type="text/css">
<!--
body {
background-color: #ffffff;
}
-->
</style>
</head>
<body>

内容

</body>
</html>
background 色、画像、並び方、スクロール、位置を指定
body {
background: #ffff99 url(ima/00.gif) repeat-y fixed right top;
}
background-color  色を指定
body {
background-color: gray;
}
background-image  画像を指定
body {
background-image: url(image/00.gif);
}
background-repeat  背景画像の並び方を指定
body {
background-image: url(image/00.gif);
background-repeat: repeat-y;
}
background-repeat
repeat-x  横方向に並べる
repeat-y  縦方向に並べる
no-repeat  1つだけ表示
repeat  敷き詰める(デフォルト)
background-repeat  ウィンドウに対して背景画像の固定表示を指定
body {
background-image: url(image/00.gif);
background-attachment: fixed;
}
background-attachment
fixed  固定する - スクロールさせない
scroll  固定しない - スクロールさせる(デフォルト)
background-position  横方向と縦方向の位置を指定
body {
background-image: url(image/00.gif);
background-repeat: no-repeat;
background-position: center;
}
横方向 left(左) center(中央) right(右)
縦方向 top(上) center(中央) bottom(下)
background-position: right bottom;  /*右下に表示*/
background-position: center center;  /*中央に表示*/
background-position: 100px 40px;  /*左から100px、上から40pxの位置に表示*/
background-position: 30% 60%;  /*左から30%、上から60%の位置に表示*/
background-position: 100px;  /*左から100px、上から50%の位置に表示*/
background-position: 50%;  /*左から50%、上から50%の位置に表示*/
margin マージン(余白)を指定
body {
margin: 5px 10px 15px 20px;
}
数値+単位(px、他)か %(割合)、auto(自動)で指定
margin: 2px;  /*[上下左右] を指定*/
margin: 2px 4px;  /*[上下] と [左右] を指定*/
margin: 2px 4px 6px;  /*[上] と [左右] と [下] を指定*/
margin: 2px 4px 6px 8px;  /*[上] と [右] と [下] と [左] を指定*/
・マージンを個別に指定
body {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
スクロールバーを消す
body {
overflow: hidden;
}
・overflow の縦と横を個別指定
body {
width: 200px;
height: 100px;
overflow-x: scroll; /*横方向の指定*/
overflow-y: scroll; /*縦方向の指定*/ }
スクロールバーの色を変える
body {
scrollbar-base-color: #ffefb9;
}
body {
scrollbar-face-color: #ffefb9;
scrollbar-track-color: #ffdf6b;
scrollbar-arrow-color: #ffefb9;
scrollbar-highlight-color: #555555;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffefb9;
scrollbar-darkshadow-color: #ffffff;
}
リンクの下線
a:link { color: #000000; } /*通常(未アクセス)の色*/
a:visited { color: #000000; } /*アクセス済みの色*/
a:hover { color: #000000; } /*ポイント時の色*/
a:active { color: #000000; } /*アクティブ時の色*/
("text-decoration:none" の部分が下線を消す指定)
a:link { color: #0000aa;
      text-decoration: none; }
a:visited { color: #9500c0;
      text-decoration: none; }
a:hover { color: #ff0000;
      text-decoration: underline; }