カテゴリー別アーカイブ: スタイルシート

スタイルシートの優先順位

スタイルシートを修正(というか追加)していた。修正の仕方は、上書き。
同じ条件なんだけど、最後に特定のクラスがかかってくると、そっちを優先させるみたいな。
しかし、上手く上書きが反映されていない。

優先順位について調べてみた。

CSSの優先順位(@WEB工房きくちゃん)ありがとうございます!

優先順位ってポイント制なんですね。
普段何気に、しっかりとセレクタを書けば上書きできる、みたいなことを覚えていたんですけど、それってポイントが増えたからそっちが優先されたんですね。

元のスタイルシートは、 #が2回かけられていて、なかなか上書きできないわけだ。

max-widthをIE6でも使用したい。

max-widthって便利だなぁと思っていたら、IE6ではビョコーンと飛び出ている。そうか  😯

解決方法としては、minmax.jsというjavascriptを仕込む方法がとても簡単でした。

参照:min-width、min-height、max-width、max-heightをIE6でも実装する方法(@CSS Lecture

(以下2010.08.23追記)

minmax.js、IE8だとエラーが出ます。実装してませんというようなエラーです。
下記の記事を参照して、minmax.jsの記述を変更して直しました。

minmax.jsのIE8対応(エラー修正)(@アラクネ@技術備忘録) ありがとうございました。

minmax.jsのIE8対応(エラー修正) より抜粋)
36行目あたりにtry・catchを以下のように記述します。

try {
em.style.setExpression(’width’, ‘minmax_checkFont()’);
document.body.insertBefore(em, document.body.firstChild);
}
catch(err){}

divの高さに対して真ん中にテキストを置きたいの

divって高さを指定したら、高さを持って、vertical-align:middle;で真ん中に行くだろうと思ったら、高さをもてないんだってね。

先輩U氏に相談したら、

line-heightに高さを指定したらいけるって。

つまり、

<div class=”test”>これを真ん中にもってきたいの</div>

というソースに対して

.test{
ツꀀツꀀツꀀツꀀ height: 30px;
ツꀀツꀀツꀀ font-size: 12px;
ツꀀツꀀツꀀ line-height: 30px;
}

という風に書くの。

そうすると、うまく行きましたわ。

firefoxでcenterが適応されない件

といっても、GoogleMapが入らなかったらちゃんとcenterに来るというパターン。しかも、firefoxのみ。
深く調べる時間も気力もないです。
仕方がないので、margin-left: auto; margin-right:auto;で対応してみる。

「Firefoxでcenterにならない」ということを調べていて、とてもよくわかった記事がありましたので、メモメモ。

ありがとうございます。

CSSのtext-align:center;は<div>には通用しない (@スイナシア

ss魔法の言葉まとめ

会社の先輩にもらった、魔法の言葉集。別に魔法の言葉じゃないけど、合言葉なので。

・divその1でdivその2(float: left;)とdivその3(float: right;)のとき、divその1が下までいかない。

#bodyDIV:after {
ツꀀcontent:”.”;
ツꀀdisplay:block;
ツꀀheight:0;
ツꀀclear:both;
ツꀀvisibility:hidden;
}

 注意)divその1にあたるものには、widthを入れること。

・divその1でdivその2を入れているとき、divその1のwidthは正確に入っているのに広がっちゃう。(IE6のみ?)

divその2をinlineにしよう。

とりあえず、今日はここまで。

listでナビゲーションを作成時に余白が出るのを回避する。

<ul>
<li><a href=”#”><img src=””></a></li>
<li><a href=”#”><img src=””></a></li>
<li><a href=”#”><img src=””></a></li>
</ul>

というソースで、画像を使ったナビゲーションを作る場合、<li></li>で予期しない余白が入る。
これの回避方法をメモしておきます。

ツꀀ横型

ul.navi {
ツꀀpadding: 0px;
ツꀀmargin: 0px;
}
ul.navi li {
ツꀀdisplay: inline;
ツꀀlist-style-type: none;
ツꀀfloat: left;
}

という風に、float:leftを入れます。
次の要素にclear:both;を入れることも忘れずに。

縦型

ul.navi {
ツꀀmargin: 0px;
ツꀀpadding: 0px;
}
ul.navi li {
ツꀀdisplay: block;
ツꀀlist-style-type: none;
ツꀀfont-size: 1px;
ツꀀline-height: 100%;
}

という風に、font-sizeを小さくし、line-height:100%にします。

line-height:0px;

にする方法もあるようですが、検証していません。