■初心者のためのホームページ作成  スタイルシートで困った・・・・! 備忘録

☆ここは 管理人がホームページ作成で 使用したスタイルシートの備忘録です。 使えそうなものがあればお使い下さい。スタイルシートは 始めはちょっと難しいけど、ある程度なれてくると 素晴らしいと思うようになってきます。また、スタイルシートでメニュー等、動きがあるものを 作ることも出来ます。ホームページ作成に慣れてきたらデザインはスタイルシートへと移行していきましょう。わからなくても やっているうちに分かってきます。 ^^ 便利なスタイルシート見つけたらアップしていきます。。。

clearfix 要素の回り込みを解除
要素の回り込みについてですが 管理人はこのような便利なスタイル指定があるとはしりませんでしたので紹介します。
管理人もそうですが これがどのように便利かは 少しわかりにくいと思いますが リンクのリスト表示のレイアウトや どうしても 解除BOXをつくらなくてはならなくなりレイアウト上困ることがあります。そんな時に 威力をはっきします。お使い下さい。

要素をfloatさせた場合、回り込みを解除するのに、解除する位置で<br clear='all'>のようにbr要素を記述したり、
解除する位置の下にある要素にdiv.footer { clear:both; }のように
回り込みを解除するためのタグやスタイルを別途指定する必要がありました。

clearfixと呼ばれる手法を使って、回り込み解除のスタイルをクラス化しておくと、何度も使いまわせますし、記述もスマートです。(※必ずしもクラス化する必要はなく、各セレクタに直接記述してもOKです)
clearfixは、回り込みをする要素の親要素にあたるブロックに指定します。 以下の例では、親要素(div要素)にclearfixをクラス指定しています。 その子要素(p要素)をfloat:leftで左寄せし、それ以降のテキストを回り込ませています。
親要素にclearfixを指定しているので、親要素の次のブロックは回り込みません。
IEは、擬似要素:afterをサポートしていないので、 IE独自のプロパティzoomを併せて指定しておきます。

■ clearfixを使用しない従来の方法

<style type="text/css">
	p.photo {
		float:left;
		margin:0 10px 0 0;
	}
	br.clr {
		clear:both;
	}
</style>
<!-- 親要素 [start] -->
<div style="background:yellow;">
	<p class="photo"><img src="img/pic1-thumb.png" alt="写真"  /></p>
	<p>
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。 <br class="clr" /> </p> </div> <!-- 親要素 [end] // --> <p>ここは回り込みませんよ。</p>
上記の結果を見る
 



■ clearfix使用

<style type="text/css">
	.photo {
		float:left;
		margin:0 10px 0 0;
	}
	.clearfix:after {
		content:".";
		display:block;
		visibility:hidden;
		height:0.1px;
		font-size:0.1em;
		line-height:0;
		clear:both;
	}
	.clearfix {
		display:inline-block;
	}
	/* Hides from IE-mac \*/
	* html .clearfix {
		height:1%;
	}
	.clearfix {
		display:block;
	}
	/* End hide from IE-mac */
</style>

<!-- 親要素 [start] -->
<div class="clearfix" style="background:yellow;">
	<!-- 子要素 p + img -->
	<p class="photo"><img src="img/pic1-thumb.png" alt="写真" /></p>
	<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。
</p> </div> <!-- 親要素 [end] // --> <p>ここは回り込みませんよ。</p>
上記の結果を見る   詳しくはこちらをどうぞ http://f32.aaa.livedoor.jp/~azusa/index.php?t=css&p=hack