css - Archive
IE6(7も？)限定で、
ページを表示するときに、
なにかしら、レスポンスが遅かったり？
CSSの読むタイミングとかの問題で、
404errorのページが読まれている。
作ったページに、
原因不明の変な崩れがでてると思ったら、
そのサーバーデフォルトの404errorのhead内インラインCSSが、
読み込まれていることが判明。
サーバーはチカッパだったんだが、
dtとかddとかタグにcssかけてあって、
そこの背景色とかパディングとかもろもろ作ったページ内で継承してるんですよね。
作ったページに何か問題が...
ありそうなんだけど、これといった原因は特定できませんでした。
というかIEかサーバーの問題かなとも思う。
対応は、
htaccessで、headにCSSがない、簡単な404のページを設置。
「CSSに変数があればいいのにな」
なんて思って調べたらあるんです！
ちょっとうれしくなりました。
CSSがなかったら、僕は飯が食えないんじゃないかって言うぐらいに、
CSS様には大変お世話に...。
CSSは本来、変数が必要ないような書き方もできますが、
実際問題、変数があったらいいなと思う場面はあるかと思います。
もっというと、変数使って計算ができたらいいのにと思います。
if文とかもね。
そうなると、もうscriptの領域。
そうなっちゃってもいいような気がしますが。
と、ここで終わりたかったんですが、マニアックなことに、気づいた。
これまた感動。
CSSで実装する、
縦と横方向のセンタリング。
忘れそうなので、メモっときます。
自分で考えたわけではないんと思うんだけど、
どこからひっぱってきたのが忘れた。
すみません。
縦横幅決めの場合のみです。
#container {
position:absolute;
width: 200px;
height: 150px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -100px;
}
最近色んなところで、
デフォルト用CSSをみんな書いているので、
自分のも書いてみます。
１回自分で用意しておくと、すごい楽ですよ。
* {margin: 0;padding: 0;}
■これで、全部のmargin paddingをリセット。これがないと話にならない。
body {
font-family:verdana,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Osaka','ＭＳ Ｐゴシック',sans-serif;
font-size: 80%;
color: #333;
line-height: 1.4;
text-align: center;
background: #fff;
}
■横文字は、MSゴシだと、ちょいダサなので、verdanaを指定。
■font-sizeは、いまいち、よい設定がわかりません。
■colorは#000だとちょいきつい。
■line-heightは、em,%指定はしないほうがいいって。
■text-alignは、センタリング用。時々でなくなったり。
■bgも指定してあげるべし。
a {
color: #00f;
}
a:visited {
color: #009;
}
a:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
■あんまり良いとは思わないけど、
どうせ、そのままのサイズじゃ使い物にならないので。
ul,ol,li,dl,dt,dd {
list-style: none;
}
img {
border: 0;
vertical-align: bottom;
}
■htmlで、border="0"は書かないための指定と、
IEの画像の下の余白対策。
a img {
overflow: hidden;
}
■主に画像置換したさいの、リンクの枠線（点線）が延びる現象回避。
p {
margin: 0 0 1em 0;
}
■これが無難っぽい。
.clfx {
zoom:1;
min-height: 1px;
}
.clfx:after{
content:".";
display: block;
clear:both;
height: 1px;
line-height: 1px;
margin-top: -1px;
visibility:hidden;
}
■clearfixはすごい楽。
でも、参考にしたCSSが不完全だったのか、
微妙に崩れたりして、CSS直したりしたあげく、今はこの形。
.clr{
clear: both;
}
■よく使うので書いている。
あとは、
大きめのサイト作るときは、
.aligncenter
.alignright
.floatleft
.floatright
なんかも書くこともあります。
あんまCSSの意味をなしてないけどもね。
