Page: 1/2 >>
float解除の方法
2009.09.08 Tuesday | category:CSS スタイルシート
フロート解除する際、単純に
.cl{ clear: both;} として、
<br class="cl" /> などと書いていました。
厳密に言うと間違った書き方なのだそうです。
(clear: both;はブロック要素でしか使うべきではないため)
かといってブロック要素に指定すると、高さが入ってしまったりして、
レイアウトが狂ってしまいます。
そこで、こんな指定方法が紹介されていました。
.clear{ clear: both; visibility: hidden; height: 0;}
<div class="clear">ここでクリアー</div>
参考サイト
http://www.materialpot.com/content/archive_33.htm
.cl{ clear: both;} として、
<br class="cl" /> などと書いていました。
厳密に言うと間違った書き方なのだそうです。
(clear: both;はブロック要素でしか使うべきではないため)
かといってブロック要素に指定すると、高さが入ってしまったりして、
レイアウトが狂ってしまいます。
そこで、こんな指定方法が紹介されていました。
.clear{ clear: both; visibility: hidden; height: 0;}
<div class="clear">ここでクリアー</div>
参考サイト
http://www.materialpot.com/content/archive_33.htm
18:52 | comments(0) | - | - | -
min-height と min-width がIEで利かない
2009.08.28 Friday | category:CSS スタイルシート
min-height と min-widthがIEではききません。
このバグ回避方法としては
★★ {
min-height:100px;
height:auto !important;
height:100px;
}
とするとよいようです。
参考サイト:http://css.studiomohawk.com/12/min-height-min-width-ie-bug-fix/
このバグ回避方法としては
★★ {
min-height:100px;
height:auto !important;
height:100px;
}
とするとよいようです。
参考サイト:http://css.studiomohawk.com/12/min-height-min-width-ie-bug-fix/
15:40 | comments(0) | - | - | -
<ol>で、マーカーが同じになってしまったり、下付きになるバグ
2009.07.31 Friday | category:CSS スタイルシート
<ol>
<li>テキスト<テキストテキストテキストテキスト</li>
<li>テキスト<テキストテキストテキストテキスト</li>
<li>テキスト<テキストテキストテキストテキスト</li>
・
・
・
</ol>
としたとき、マーカーの数値がずっと「1」のままだったり、
「1」の数字が「テキスト」の左下に来てしまうバグがありました。
CSSを色々触りましたが、・・・理由はわかりませんが、
olとliのwidth指定を外したところ、うまくいきました。
<li>テキスト<テキストテキストテキストテキスト</li>
<li>テキスト<テキストテキストテキストテキスト</li>
<li>テキスト<テキストテキストテキストテキスト</li>
・
・
・
</ol>
としたとき、マーカーの数値がずっと「1」のままだったり、
「1」の数字が「テキスト」の左下に来てしまうバグがありました。
CSSを色々触りましたが、・・・理由はわかりませんが、
olとliのwidth指定を外したところ、うまくいきました。
14:07 | comments(0) | - | - | -
幅広のページを、切らないでプリントさせるCSS
2009.01.16 Friday | category:CSS スタイルシート
ページを幅750pxくらいで作れればよいのですが、最近は幅広のページを作成する機会も増えてきました。そのままだとIEでは、プリントで右端が切れてしまいます。
IEで、切れないように縮小させてプリントさせるCSSサンプルです。
HTMLファイル
CSSファイル
スタイルシートの「ZOOM」を使います。
IEのみ有効です。
IEで、切れないように縮小させてプリントさせるCSSサンプルです。
HTMLファイル
<html>
<head>
<title>テスト</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body style="margin:0px 0px 0px 0px;">
<div style="width:950px;height:1000px;border:1px solid #000000;">プリントしたときに、縮小して全体を入れるためのCSS</div>
</body>
</html>
CSSファイル
@media print{
body{ zoom: 70%; }
スタイルシートの「ZOOM」を使います。
IEのみ有効です。
12:56 | comments(0) | - | - | -
firefox、safariなどでも対応できる半透明CSS
2008.09.22 Monday | category:CSS スタイルシート
filter: alpha(opacity=90);
opacity: 0.9;
参考:http://weblibrary.s224.xrea.com/weblog/css/cat15/iefirefoxoperanetscapesafarics.html
16:10 | comments(0) | - | - | -
floatすると背景が表示されなくなる
2008.02.18 Monday | category:CSS スタイルシート
親ボックスに背景を適応して、親ボックスに背景が適応されていることが確認されたのにもかかわらず、内包する子ボックスに対してfloatを適応した場合、Firefoxでは親ボックスの背景が表示されません。
対応方法
1親ボックスに高さ指定
2親ボックスの次のボックスにclear:both;を指定
1はうまくいきましたが、2はできませんでした…
参考サイト
http://blog.webcreativepark.net/2007/01/08-005218.html
対応方法
1親ボックスに高さ指定
2親ボックスの次のボックスにclear:both;を指定
1はうまくいきましたが、2はできませんでした…
参考サイト
http://blog.webcreativepark.net/2007/01/08-005218.html
18:47 | comments(0) | - | - | -
外部スタイルシートが読み込めない原因いろいろ
2007.11.06 Tuesday | category:CSS スタイルシート
外部スタイルシートの読み込みがうまくいかない場合、
以下のことを確認してください。
■外部スタイルシートへのパスの記述が正しいか
■文字コードが正しいか
⇒htmlのほうがshift-jisなのに、CSSをEUCにしているなど、文字コードが異なると読み込めないことがあります。
■インポートしすぎていないか
⇒@importで読み込めるスタイルシートは確か21か31か…
それ以上読み込もうとすると、あふれた分のCSSは読み込まれません。
■属性名を数字から始めていないか
⇒ID属性名などは英字から始めなくてはなりません。
#2007_product
.2007_campaign
などとすると読み込めません。
以下のことを確認してください。
■外部スタイルシートへのパスの記述が正しいか
■文字コードが正しいか
⇒htmlのほうがshift-jisなのに、CSSをEUCにしているなど、文字コードが異なると読み込めないことがあります。
■インポートしすぎていないか
⇒@importで読み込めるスタイルシートは確か21か31か…
それ以上読み込もうとすると、あふれた分のCSSは読み込まれません。
■属性名を数字から始めていないか
⇒ID属性名などは英字から始めなくてはなりません。
#2007_product
.2007_campaign
などとすると読み込めません。
17:01 | comments(0) | - | - | -
print.css 印刷用CSSの作成方法
2007.03.30 Friday | category:CSS スタイルシート
head内に
<link rel="stylesheet" href="common.css" type="text/css" media="screen,tv" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
と記述。
→common.cssはWEB上適用されるCSS
→print.cssは印刷時用に適用されるCSS
common.cssの中身は
@media screen{
/*この中にCSSを記述*/
}
print.cssの中身は
@media print{
/*この中にCSSを記述*/
}
WEBでは表示されているけれども、印刷用には表示したくない時は、
.side {
display:none;
}
とすればよい。
ただしMac IEで「@media type { 〜 } で括られた範囲内のスタイル指定が全て無視される。」というバグがあるため、MacIEで、適用されません。
CSSが適用されないので、MacIE用にもう一枚用意するか、MacIEをサービス対象外とするしかありません。
<link rel="stylesheet" href="common.css" type="text/css" media="screen,tv" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
と記述。
→common.cssはWEB上適用されるCSS
→print.cssは印刷時用に適用されるCSS
common.cssの中身は
@media screen{
/*この中にCSSを記述*/
}
print.cssの中身は
@media print{
/*この中にCSSを記述*/
}
WEBでは表示されているけれども、印刷用には表示したくない時は、
.side {
display:none;
}
とすればよい。
ただしMac IEで「@media type { 〜 } で括られた範囲内のスタイル指定が全て無視される。」というバグがあるため、MacIEで、適用されません。
CSSが適用されないので、MacIE用にもう一枚用意するか、MacIEをサービス対象外とするしかありません。
12:18 | comments(0) | - | - | -
ナビゲーションをul、liで作成する時
2007.03.03 Saturday | category:CSS スタイルシート
ナビゲーションをリストタグで作る時、いつもつっかえるので、メモ。
ちなみに自分のサイトのナビゲーションバーを作った時のもの。
ul.menu {
margin:0px 0px 0px 16px;
_margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
_position:relative;left:16px; //margin,paddingでの指定では、winIEでは折り返してしまったため
list-style-type:none;
list-style-position:inside;
width:581px; //幅を指定しないとmacIEで改行してしまったので
}
ul.menu li {
margin:0px 15px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
float:left;
}
ulの上の階層のdiv等にもwidthを指定しないとmacIEで改行してしまう。
ちなみに自分のサイトのナビゲーションバーを作った時のもの。
ul.menu {
margin:0px 0px 0px 16px;
_margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
_position:relative;left:16px; //margin,paddingでの指定では、winIEでは折り返してしまったため
list-style-type:none;
list-style-position:inside;
width:581px; //幅を指定しないとmacIEで改行してしまったので
}
ul.menu li {
margin:0px 15px 0px 0px;
padding:0px 0px 0px 0px;
width:100px;
float:left;
}
ulの上の階層のdiv等にもwidthを指定しないとmacIEで改行してしまう。
20:24 | comments(1) | - | - | -
⇒ Tadashi (03/13)
⇒ yo5kg (06/06)
⇒ jumbo (04/25)
⇒ ぐみ (12/11)
⇒ eguti (06/04)
⇒ ビジログ (03/09)
⇒ nana (02/02)
⇒ TOM (01/22)
⇒ pon (11/09)
⇒ pon (11/09)