2011年05月13日
CSS3で背景とグラデーションを同時に設定する
CSS3で背景とグラデーションを同時に設定するときは、
background:背景,グラデーション
のように指定する。
以下の指定で、Firefox,Chrome,IE6-8確認。
.radiusBtn a{
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* CSS3 */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-moz-linear-gradient(top, #80C4AA, #008955); /* Firefox */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-webkit-gradient(linear, left top, left bottom, from(#80C4AA), to(#008955)); /* Safari,Chrome */
-pie-background: url("../images/common/whitearrow.gif") no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* IE678 */
behavior: url("/PIE.htc"); /* CSS3 PIE */
}
リンク要素でhoverのときに動きをつけたい場合
（グラデーションをベタに）：
.radiusBtn a:active, .radiusBtn a:hover {
background: #008955 url(../images/common/whitearrow.gif) no-repeat 7px 0;
-pie-background: #008955 url("../images/common/whitearrow.gif") no-repeat 7px 0;
}
IE6では別途リンク時の設定が必要。
* html .radiusBtn a:link, .radiusBtn a:visited {
color: #FFF;
text-decoration: none;
}
* html .radiusBtn a:active, .radiusBtn a:hover {
color: #FFF;
text-decoration: none;
}
background:背景,グラデーション
のように指定する。
以下の指定で、Firefox,Chrome,IE6-8確認。
.radiusBtn a{
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* CSS3 */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-moz-linear-gradient(top, #80C4AA, #008955); /* Firefox */
background: url(../images/common/whitearrow.gif) no-repeat 7px 0,-webkit-gradient(linear, left top, left bottom, from(#80C4AA), to(#008955)); /* Safari,Chrome */
-pie-background: url("../images/common/whitearrow.gif") no-repeat 7px 0,linear-gradient(#80C4AA, #008955); /* IE678 */
behavior: url("/PIE.htc"); /* CSS3 PIE */
}
リンク要素でhoverのときに動きをつけたい場合
（グラデーションをベタに）：
.radiusBtn a:active, .radiusBtn a:hover {
background: #008955 url(../images/common/whitearrow.gif) no-repeat 7px 0;
-pie-background: #008955 url("../images/common/whitearrow.gif") no-repeat 7px 0;
}
IE6では別途リンク時の設定が必要。
* html .radiusBtn a:link, .radiusBtn a:visited {
color: #FFF;
text-decoration: none;
}
* html .radiusBtn a:active, .radiusBtn a:hover {
color: #FFF;
text-decoration: none;
}
2011年03月09日
角丸のボーダーをCSSで表示
角丸のボーダーをCSSのみで表示する。
border-radius: 6px; /* CSS3 */
-moz-border-radius: 6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari,Chrome */
border: 1px solid #5BB43B;
角丸の半径を指定し、borderで形状を指定。
上のセットで、IE以外対応。
border-radius: 6px; /* CSS3 */
-moz-border-radius: 6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari,Chrome */
border: 1px solid #5BB43B;
角丸の半径を指定し、borderで形状を指定。
上のセットで、IE以外対応。
2011年01月13日
背景画像が途中できれる
今日はまったこと(覚え)。
一番下までスクロールすると、bodyに指定してある左のバーが10ピクセルくらい上できれてしまっています。
特にマージンなどもつけていないのに、なぜこの余白ができるのかわかりません。
構造は
<html>
<head>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen,print" />
<title>test</title>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="contentsContainer" class="clearfix">
<div id="mainColumn">
メインカラム
</div>
<div id="sideColumn">
サイドカラム
</div>
</div>
</body>
</html>
#mainColumn に
height: 1000px;
などを指定して、スクロールが必要な状態にしておきます。
#contentsContainerにoverflow:hidden;を設定すると、下まで伸びてきちんと表示できました。
でも、なぜここでoverflow: hidden;が必要なのか、いまいちわからない。。。
一番下までスクロールすると、bodyに指定してある左のバーが10ピクセルくらい上できれてしまっています。
特にマージンなどもつけていないのに、なぜこの余白ができるのかわかりません。
構造は
<html>
<head>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen,print" />
<title>test</title>
</head>
<body>
<div id="header">
ヘッダー
</div>
<div id="contentsContainer" class="clearfix">
<div id="mainColumn">
メインカラム
</div>
<div id="sideColumn">
サイドカラム
</div>
</div>
</body>
</html>
#mainColumn に
height: 1000px;
などを指定して、スクロールが必要な状態にしておきます。
#contentsContainerにoverflow:hidden;を設定すると、下まで伸びてきちんと表示できました。
でも、なぜここでoverflow: hidden;が必要なのか、いまいちわからない。。。
2010年12月15日
IE6の動作について
inline要素で背景画像があり、途中改行されるときに背景画像が正しくでないときの対策。
inline要素では、文字の区切りで途中改行されるが、電話番号など、途中改行してほしくない場合、その要素を途中改行されないブロックとして扱えるようにする。
例：
＜ul＞
＜li＞ああああああああ＜/li＞
＜li＞***-****-****＜/li＞
＜ul＞
これを、横に並べて表示する。
CSS:
li {
display: inline;
}
横幅が十分にある場合、
○ああああああああ ○***-****-****
のように表示される。背景画像も表示される。
（※○は背景画像。ここではリストマークとして使用）
が、横幅が決まっている場合、
○ああああああああ ***-
****-****
のように改行されてしまう。背景画像は、改行されたブロックについては表示されない。
ここで、zoom: 1を加えて
CSS:
li {
display: inline;
zoom: 1;
}
のように記述すると、途中改行されず、その要素は次の行に表示できる。
背景についても所望の位置に表示される。
○ああああああああ
○***-****-****
詳細については、こちらを参照。
なお、li要素を次の行でなく、inlineのままで表示したときに背景を表示する方法はこちらを参照。
inline要素では、文字の区切りで途中改行されるが、電話番号など、途中改行してほしくない場合、その要素を途中改行されないブロックとして扱えるようにする。
例：
＜ul＞
＜li＞ああああああああ＜/li＞
＜li＞***-****-****＜/li＞
＜ul＞
これを、横に並べて表示する。
CSS:
li {
display: inline;
}
横幅が十分にある場合、
○ああああああああ ○***-****-****
のように表示される。背景画像も表示される。
（※○は背景画像。ここではリストマークとして使用）
が、横幅が決まっている場合、
○ああああああああ ***-
****-****
のように改行されてしまう。背景画像は、改行されたブロックについては表示されない。
ここで、zoom: 1を加えて
CSS:
li {
display: inline;
zoom: 1;
}
のように記述すると、途中改行されず、その要素は次の行に表示できる。
背景についても所望の位置に表示される。
○ああああああああ
○***-****-****
詳細については、こちらを参照。
なお、li要素を次の行でなく、inlineのままで表示したときに背景を表示する方法はこちらを参照。
2010年11月26日
imodeでアンカーが効かない
今日、はまったこと。
携帯用のサイトを作成して、imode Simulatorで確認をしていたら、アンカーが効かない。
htmlに
<div id="page1">
あいうえお
</div>
のように書いてあると、通常は
<a href=#page1>
で
「あいうえお」
の位置に移動ができますが、imodeでは移動しない。
どうもドコモ端末のXHTMLでは仕様が違うようです。
こういうときは
<a name="page1" id="page1">
あいうえお
</a>
と書けばimodeでも動きます。
携帯用のサイトを作成して、imode Simulatorで確認をしていたら、アンカーが効かない。
htmlに
<div id="page1">
あいうえお
</div>
のように書いてあると、通常は
<a href=#page1>
で
「あいうえお」
の位置に移動ができますが、imodeでは移動しない。
どうもドコモ端末のXHTMLでは仕様が違うようです。
こういうときは
<a name="page1" id="page1">
あいうえお
</a>
と書けばimodeでも動きます。
