ホーム > CSS > CSSの記述サンプル

CSSの記述サンプル

2009 年 10 月 26 日 iri コメントをどうぞ コメント
  1. CSSファイルの1行目に文字キャラを入れる
  2. リセットスタイルでブラウザ間のデフォルトの値を統一
  3. リンク、ホバーなどの文字色、飾りの設定
  4. クリアーフィックス
  5. pageで全体設定
  6. ヘッダーから入れていく

以下参考例

@charset “UTF-8″;

/*全体の設定*/

* {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: normal;
}
/*リンク画像の枠を消す、テキストのセンターに配置*/
img {
border-width: 0px;
vertical-align: middle;
}
body {
font: 0.75em/1.6em “Verdana”,”ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “Hiragino Kaku Gothic Pro W3″, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS P Gothic”, sans-serif;
color: #666666;
background: #FFF url(css/bg.gif) repeat-y center;
text-align: center;
}
table {
empty-cells:show;
border-collapse:collapse;
border-spacing:0;
}

/*標準のリンク*/
a:link {
color: #0000FF;
text-decoration: none;
}
a:visited {
color: #0000FF;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active {
color: #FF0000;
text-decoration: none;
}

/* 左右分けレイアウト*/
.clearfix {overflow: hidden}
.clearfix:after {content: “”; display: block; clear: both;  height: 1px; overflow: hidden}
* html .clearfix { height: 1em; overflow: visible}

/*レイアウト枠:全体の枠と横幅・背景色*/
#page {
margin: 0px auto;
width: 900px;
background: #FFFFFF;
padding:0;
}
/*ヘッダー*/
#header {
height: 100px;
position: relative;
background: url(css/head.jpg) no-repeat;
text-align: left;
}
#header h1 {
font-size: 24px;
line-height: 40px;
padding: 0px 20px;
}
#header p {
padding: 0px 20px;
line-height: 20px;
margin-bottom:10px;
}

/* ヘッダーメニュー—————–*/
#global-nav ul{width: 900px;height: 30px; background:#666666}
#global-nav li {float: left}
#global-nav li a { height: 30px; text-indent: -700em; background-repeat: no-repeat; display: block}
#global-nav li a:hover { background-position: 0px -30px}
/* ヘッダーメニュー個別 */
#menu01 a:link, #menu01 a:visited { background-image: url(css/menu_01.gif); width: 110px}
#menu02 a:link, #menu02 a:visited { background-image: url(css/menu_02.gif); width: 110px}
#menu03 a:link, #menu03 a:visited { background-image: url(css/menu_03.gif); width: 110px}
#menu04 a:link, #menu04 a:visited { background-image: url(css/menu_04.gif); width: 110px}
#menu05 a:link, #menu05 a:visited { background-image: url(css/menu_05.gif); width: 110px}
#navi li.on a:link, #navi li.on a:visited {  background-position: 0px -30px}

#assist-nav{
position: relative;
top: -100px;
text-align: right;
margin-right:10px
}
#assist-nav li{
display: inline;
}
* html #assist-nav {
margin-bottom: -20px;
}
*:first-child+html #assist-nav {
margin-bottom: -20px;
}

/*コンテンツ*/
#contents {
margin: 0px auto;
padding: 20px 20px 0px 20px;
position: relative;
text-align: left;
}

/*コンテンツ:本文*/
#main {
width: 640px;
border: 1px solid #CCCCCC;
float: right;
}
#main h2 {
margin: 20px 10px 5px 10px;
}
#main h3 {
margin: 20px 10px 5px 10px;
}
#main p {
margin: 5px 10px;
}
/*コンテンツ:サイドバー*/
#sidebar {
width: 180px;
float: left;
}
#sidebar h2{
font-size:18px;
line-height:20px;
padding: 4px;
background: #CCCCCC;
text-align:center;
}
/*コンテンツ:サイドバー・ローカルナビ*/
#local-nav {
padding: 4px;
background: #EEEEEE;
}
#local-nav li {
border-bottom: 1px solid #CCCCCC;
}
#local-nav a:link, #local-nav a:visited {
padding: 4px;
display: block;
}
#local-nav a:hover, #local-nav a:active {
padding: 4px;
background: #FFF;
display: block;
color: #666;
}
/*コンテンツ:サイドバー・補足リンク*/
#sub-assist {
padding: 4px;
background: #EEEEEE;
}
#sub-assist li {
border-bottom: 1px solid #CCCCCC;
}
#sub-assist a:link, #sub-assist a:visited {
padding: 4px;
background: #FFFFFF;
display: block;
color: #666666;
}
#sub-assist a:hover, #sub-assist a:active {
padding: 4px;
background: #CCCCCC;
display: block;
color: #000000;
}

/*コンテンツ:サイドバー・バナー*/
#banner {
}
#banner li {
margin-top: 4px;
}

/*ページトップへ戻るためのリンク*/

#up-link {
width: 900px;
margin: 0px auto;
clear:both;
}
#up-link a:link, #up-link a:visited {
display: block;
text-align:right;
padding:0px 20px ;
height:40px;
line-height:40px;
color: #666666;
text-decoration: none;
}
#up-link a:hover, #up-link a:active {
background: #E6E6E6;
text-decoration: none;
}

/*フッター*/
#footer {
padding: 5px 20px 10px 20px;
position: relative;
background: #EEEEEE;
text-align: left;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}
#foot-nav {
}
#footer a:link, #footer a:visited {
color: #666666;
margin:0px 5px;
}
#footer a:hover, #footer a:active {
color: #000000;
text-decoration:underline
}

#footdata{
margin:10px 5px 0px 5px;
}
#copyright{
font-size:90%;
margin:0px 5px;
}
#copyright a{
text-decoration:underline
}
——–*/

カテゴリー: CSS タグ:
  1. コメントはまだありません。
  1. トラックバックはまだありません。