Home > css

css Archive

CSSで角丸を再現する時にIE6で起こる隙間を改善する方法

  • Posted by: 03
  • 2011年8月1日 1:09 PM
  • css
  • |
単純に、空DIVに対してCSSの指定font-size:0px;としてあげるだけ。 http://webnooboegaki.blog33.fc2.com/blog-entry-39.html
  • Comments (Close): 0
  • Trackbacks (Close): 0

tableのCSS

  • Posted by: 03
  • 2011年6月16日 2:11 PM
  • css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

/* tableの共通設定
----------------------------------------------------------- */
table	{
	border-collapse: collapse;	border-spacing: 0;
	width: 100%;
	margin-bottom: 30px;
}
th, td	{
	padding: 10px 20px;
	/*color: #1D5C79;*/
}
table	{
	border-collapse: collapse;	border-spacing: 0;
}
th	{
	text-align: left;
}
/* table0
----------------------------------------------------------- */
.table0	{
	border: 1px solid #DDD;
}
.table0 th	{
	background: #eee7db;
	border: 1px solid #DDD;
	color: #333;
}
.table0 td	{
	border: 1px solid #DDD;
	color: #333;
}
 
/* table1
----------------------------------------------------------- */
.table1 th	{
	border-bottom: 2px solid #1D5C79;
}
 
/* table2
----------------------------------------------------------- */
.table2 th	{
	border-bottom: 2px solid #1D5C79;
}
.table2 td	{
	border-bottom: 1px solid #DDD;
}
 
/* table3
----------------------------------------------------------- */
.table3 th	{
	border-right: 30px solid #FFF;
	border-bottom: 2px solid #1D5C79;
}
.table3 td	{
	border-right: 30px solid #FFF;
}
 
/* table4
----------------------------------------------------------- */
.table4 .odd	{
	background: #E5F2F8;
}
 
/* table5
----------------------------------------------------------- */
.table5	{
	border: 1px solid #1D5C79;
}
.table5 th	{
	border-bottom: 1px dotted #1D5C79;
}
 
/* table6
----------------------------------------------------------- */
.table6 th	{
	background: #A0C9DB;
	border-top: 2px solid #1D5C79;
	border-bottom: 1px solid #FFF;
}
.table6 td	{
	background: #E5F2F8;
	border-bottom: 1px solid #FFF;
}
 
/* table7
----------------------------------------------------------- */
.table7 th	{
	background: #CAE5F1 url(images/th.jpg) repeat-x;
	border-top: 2px solid #1D5C79;
	border-bottom: 1px solid #FFF;
}
.table7 td	{
	background: #F4FAFC url(images/td.jpg) repeat-x;
	border-bottom: 1px solid #FFF;
}
 
/* table8
----------------------------------------------------------- */
.table8	{
	background: url(images/bg_td.jpg) no-repeat bottom;
}
.table8 th	{
	background: url(images/bg_th.jpg) no-repeat;
	border-bottom: 1px solid #FFF;
}
.table8 th.topL	{
	background: url(images/bg_thl.jpg) no-repeat;
}
.table8 th.topR	{
	background: url(images/bg_thr.jpg) no-repeat top right;
}
.table8 td	{
	border-bottom: 1px solid #FFF;
}
 
/* table9
----------------------------------------------------------- */
.table9 th	{
	border-bottom: 1px solid #DDD;
}
.table9 td	{
	border-bottom: 1px solid #DDD;
}
 
/* table10
----------------------------------------------------------- */
.table10	{
	border: 1px solid #DDD;
}
.table10 th	{
	background: url(images/th_10.jpg) repeat-x bottom;
	border: 1px solid #DDD;
	color: #333;
}
.table10 td	{
	border: 1px solid #DDD;
	color: #333;
}
------------------------------------------------------------------------------------

ネットスケープでoverflow: hidden;でその下が表示されない

参考サイト

http://css-style.jp/notebook/xhtml_css/nobackground_a.html http://www.fsiki.com/jet/css-xhtml/css-float-problem.html 
1
2

.widget-area ul ul 
/*margin-left: 1.3em;*/コメントアウト

Google mapのふきだし修正

参考サイト：http://u-tamax.jp/2011/02/google-maps%E3%81%AE%E6%83%85%E5%A0%B1%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%8C%E5%B4%A9%E3%82%8C%E3%82%8B/ 参考サイト：http://d.hatena.ne.jp/bennylee/20100225/1267061562 cssの#content imgをコメントアウト 
1
2
3
4
5
6

/*#content img {
	margin: 0;
	height: auto;
	max-width: 540px;
	width: auto;
}*/

タブナビ

アクティブでロールオーバーするように設定する。 bodyにＩＤをつける http://oneday.ter.jp/wordpress/256.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
//ページのスラッグを取得
if( is_page() ){
$pageid=$post->ID;
//ページスラッグを取得
$pageSlug = get_page($pageid)->post_name;
$cssBodyID=' id="'.$pageSlug.'"';
}else{
$cat = get_the_category();
$catslug = $cat[0]->category_nicename;
$cssBodyID=' id="'.$catslug.'"';
}
?>
<body <?php echo $cssBodyID ;?>>
をヘッダーに入力。 ローカルではＯＫだったが、サーバー上で画面が表示されないエラーになった。 ヘッダーに 
1

<body <?php body_class(); ?>>

で自動的にclassがつくので、

店舗情報に.home

最新記事に.category-new

イベント情報に.category-event

クーポンに.page-template-customcoupon-php

をそれぞれ設定

こちら↓をスタイルシートに加えた。

1
2
3
4
5
6
7
8
9
10
11
12

.home li.tenpo a{
background-image: url(images/navi_ten_on.gif);
	}
.category-new li.new a{
background-image: url(images/navi_new_on.gif);
}
.category-event li.event a{
	background-image: url(images/navi_eve_on.gif);
}
.page-template-customcoupon-php li.coupon a{
background-image: url(images/navi_cou_on.gif);
}

ページごとに違うＣＳＳを読み込む

やりたいこと
3つのcssを読み込ませる
・base
・index
・common

baseは全ページ共通なのでstyle.cssへ記入。
index.cssはcustom_index_page.phpのとき、
common.cssはcustom_common_page.phpのときに読み込ませたい。

1
2
3
4
5
6
7
8
9

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link href="<?php bloginfo(‘template_directory’); ?>/index.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo(‘template_directory’); ?>/common.css" rel="stylesheet" type="text/css" />
<?php if ( is_page_template('custom_common_page.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/common.css" />
<?php } ?>
<?php if ( is_page_template('custom_index_page.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/index.css" />
<?php } ?>

ブラウザごとに異なるリストの表示

参考サイト： marginとpaddingがわかりやすく解説してあります。
http://www.tagindex.com/stylesheet/list/margin_padding.html

下記のように設定するとブラウザ間に差がないようです。 

1
2
3
4

ul {
margin: 0 0 0 1em;
padding: 0;
}

ホーム > css

Pages
Recent Entries
Categories
Archives
Tag Cloud
Search
Feeds
Meta

Return to page top