【CSS】ページにスクロールバーを必ず表示するテクニック

サイトの内容がパソコンの1画面に入りきらない場合、スクロールバーが表示されます。

もし縦に短いページと縦に長いページが混在しているサイトの場合、スクロールバーが表示される分だけコンテンツが左に移動し、ページを移動するたびにコンテンツがずれることになります。

これを防ぐには下記のCSSをhtml要素に追加します。

html {
	margin-bottom:1px;
	height:100%;
}

html要素に1pxマージンを足し、必ずスクロールバーが表示されるようにすることでページごとのズレを防ぎます。

まぁ、極端に縦に短いページと長いページが混在していない限り、そんなに使うことはないと思います。

【CSS】要素を親要素の上下中央に表示する方法

要素を親要素の上下中央に表示したい、ということはサイトを作っていてよくあると思います。

たとえば、テキストと画像が横並びになっていて、テキストの分量が増えても画像を上下中央に表示したい、という場合など。

そんなときの方法を紹介します。まずはHTMLから。

<div>
	
	<p>こちらの分量が増えても、buttonを中央に表示したい</p>
	<p><img src="button.gif" alt="ボタンの画像" ></p>
	
</div>

次に、CSS

p{
	display: table-cell;
	vertical-align: middle;
	 display:inline; //IE6,7対策
	 zoom:1; //IE6,7対策
}

display:table-cellで自動的に横並びになるので、floatなどは不要です。

なお、上記のCSSでdisplay:inline;とzoom:1;の前に全角スペースがあるのは、IE6、IE7だけに反映させるためのCSSハックです。

【CSS】IE7で親要素のpaddingが子要素にもついてしまう時の対処

親要素にheight:1%を指定すると解決したと思います(うろ覚え)。

parent{
	padding:500px;	
	height:1%
}

【CSS】CSSテクニック IE6対策その①

コーディングでハマる罠っていうのは大体同じようなことだと思います。

まぁ95%以上の確率で、コーディング時の問題はIE6、IE7、IE8で起こると思います。

今回はコーダー最大の敵、というかコーダーおよびJavascriptプログラマー曰く「ほんと消えてなくなってほしい」代表のIE6くんの基本的な対策を紹介します。

●loat要素のmargin2倍問題
IE6ではfloatを指定した要素にmarginも指定すると、そのmarginの値は2倍で表示されます。これを防ぐにはdisplay:inline;を指定する

.sample{
	float:left;
	margin-top:100px;
	display:inline;
}

●min-height問題
IE6はmin-heightが反映されません。しかし、IE6は要素の大きさが親要素よりも大きいと自動で親要素も大きくしてしまうので、単純にheightだけを指定すればOK。

.sample{
	min-height:500px;
	 height:500px; //heightの前に半角スペースがあるので、IE6だけに反映される
}

●position:relative問題
IE6ではposition:relativeをそのまま指定するとダメ。どうだめになるのかは未検証ですが、zoom:1;を追加するようにしましょう。

.sample{
	position:relative;
	zoom:1;
}

●ネガティブマージン問題
marginをマイナスで指定すると、要素が逆方向に移動しますが、IE6ではposition:relative; zoom:1を追加します。

.sample{
	margin-top:-50px;
	position:relative;
	zoom:1;
}

●overfllow:hidden問題
overfllow:hiddenにはzoom:1;を追加します。

.sample{
	overfllow:hidden;
	zoom:1;
}

とりあえず基本としてはこんなところだと思います。

IE6、IE7、IE8に関しては、困ったら「zoom:1;を追加」で問題が解決することが多いと思います。

IE6などはズレても修正が簡単ですが、まれに、ごくごーくまれにFirefoxだけ、とかsafariだけちょっとズレた、なんてときは結構大変ですよね。本当にまれですけれども。

【CSS】シンプルなclearfixと reset.cssをまとめたファイル

私が使っている、シンプルなclearfixとrecet.cssをまとめたファイルを紹介します。

clearfixは様々なものが色々な人によって作られてきましたが、いまいちシンプルでないものや、稀に効果が反映されなかったりするものがあります。

そのため「最も良いものはないか?」と以前調べたりカスタマイズしたりして、最終的に落ち着いたものが下記です。


@charset "utf-8";

/*----------------------------------------------------------------
 * recet
----------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote,th,td {
	margin:0;
	padding:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
object,embed {
	vertical-align:top;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight:normal;
}
img,abbr,acronym,fieldset {
	border:0;
}

li {
	list-style-type:none;
}

/*----------------------------------------------------------------
 * clearfix(フロート要素を含む親要素に適用させる)
----------------------------------------------------------------*/

#sample:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow:hidden;
}

#sample{
	zoom:1;
	overflow:hidden;
}

clearfixにoverflow:hidden;を指定しているのは、Dreamweaver上で見るときにこの指定がないとレイアウトが崩れて表示されてしまうためです。
clearfixも、タグを指定する箇所が2つしかないので、スムーズに作業できると思います。

いま紹介していて思ったのですが、bodyなどにline-height:170%などを指定して行間空けると、たまーにFirefoxにおいて画像要素の上下に余白ができることがあるので、img要素にline-height:0;の指定を追加してもいいかも。。。

上記のファイルはこちらからダウンロードできます。ご自由に使用・改造・配布して頂いて結構です。

シンプルなclearfixと recet.cssをまとめたファイル

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ!

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん