新人webコーダーの覚え書き » CSS

css positionの使い方

kazu — Thu, 13 Jan 2011 03:06:43 +0000

cssのpositionの私なりの使い方。

親boxに

position:relative;

配置したい物体に、

position:absolute;
width:90px;
height:20px;
right:10px;
bottom:15px;

rightやbottomは、親boxからの距離。
これで簡単配置♪

google chrome のpositionについて

kazu — Thu, 13 Jan 2011 03:02:34 +0000

多分、私しかはまっていないだろうけど・・・。
google chromeで、positinを使用した時、大幅にずれた。
tableのtrタグを親boxにした為。これが、ブロックレベル要素ではないから、はみ出しちゃってた。
ここに、display:block;　を入れて解決！

zoom:100%;

kazu — Wed, 12 Jan 2011 08:30:32 +0000

IE7などで、paddingやmarginの指定が倍になってしまう時、ｃｓｓにzoom:100%;を入れると、解決する！
なぜかは、不明。とりあえずメモ。

IE7バグ　勝手に隙間が出来てしまう。

kazu — Tue, 11 Jan 2011 09:09:40 +0000

IE7で、floatをかけた次のBOXで、clearをかけてなおかつpadding指定をすると、間が出来るらしい。
paddingを指定しなくても、出来た。15ｐｘくらい空いた。ちなもに、IE5.5も同じ状態。
で、解決策は、普通に次のBOXにmargin-top=”-●●ｐｘ”って入れたら、消えました。
どうして間が出来るかと、直し方が定かではないので・・・。一応メモ書き！

CSSナビゲーション

kazu — Thu, 06 Jan 2011 01:21:46 +0000

CSSでナビゲーションを作る時、連続して作ると、paddingで間を取ると、ロールオーバー時に下の画像がpadding分、移動してしまう。
(topとbottom)
その場合、親boxでの上下の間は、marginで取る。

z-indexの使い方

kazu — Thu, 06 Jan 2011 01:16:48 +0000

position: relative;
(relative=通常表示される位置からの相対的な位置に配置。この後の続くボックスは、このボックスが通常に表示されているものとして配置)
と一緒に使用する。
z-index:●;
●は数字が大きいほど上にくる。

これで、重ねて表示が可能。

リストの２行目を詰めずに空ける方法

kazu — Mon, 27 Sep 2010 07:29:15 +0000

リストで、一番頭に画像や・を入れる時、２行目を詰めずに、空ける方法。
スタイルシートは、

.indent{
    padding-left: 1em; /*1em（1文字）分、右に動かす*/
    text-indent: -1em; /*最初の行だけ1em（1文字）分、左に動かす*/
}

htmlは、

class="indent"

印刷用スタイルシート

kazu — Mon, 27 Sep 2010 07:02:37 +0000

marginでづらした画像が、印刷するとき、邪魔なので、取ってしまう。
スタイルシートに

@media print{
	/* 印刷用スタイル */
	.printnon{
		visibility:hidden;
	}
}

これで、htmlに

class="printnon"

でOK。