技術のご紹介

このブログを購読する

IT開発センターBlog

【コーディングTips】伸びないdiv要素を解決 float解除のClearFix

DATE 2011.04.20

CATEGORY 技術Tips

TAGS , ,

こんにちは、IT開発センター 川崎です。

今日は、CSSレイアウトに関してよくある問題を解決してみましょう。
まずは以下の図をご覧いただけますでしょうか。

ClearFix

一般的によく見かけるレイアウトだとは思いますが、このようなレイアウトを組む際、divタグを使用してコーディングする場合は、どうしてもCSSでFLOAT属性を使用することとなります。
その際のHTMLソースの一例として、以下のように記述します。


<div style="border:1px solid #ccc; padding:10px; width:200px">

<div style="float:left; border:1px solid #fcc; width:90px;">Box1</div>

<div style="float:right; border:1px solid #ccf; width:90px;">Box2</div>

</div>

※例の為、外部CSSを使用せずスタイルを直接記述しております。

基本の記述は上記の方法で、正しく表示されるはずなのですが、子要素がFLOATを行った場合実際ブラウザでは以下の様に表示されてしまいます。

ClearFix



親要素の縦が延びず、子要素を囲んでくれません。
[検証ブラウザ：Internet Explorer8、Firefox4、Safari5、Opera9、Chrome10]

ここで活用するのがClearFixです。
after要素を使用してFLOATを解除することができます。

方法は以下の通りです。

1.CSS内へ以下の記述を行います。

.cfx:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.cfx {
min-height: 1px;
}

* html .cfx {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

2.伸びないdiv要素にClassを当てる

<div style="border:1px solid #ccc; padding:10px; width:200px" class="cfx">

<div style="float:left; border:1px solid #fcc; width:90px;">Box1</div>

<div style="float:right; border:1px solid #ccf; width:90px;">Box2</div>

</div>

以下の図のようにClassを当てただけで、綺麗に囲むことができます。
もちろん、親要素の高さを指定していないので、子要素の高さによって可変します。

ClearFix

このClearFixは上記の検証ブラウザだけではなく、
IE6、IE7、それ以前のIEやMacIEなどでも対応しております。

この方法があれば、無理な<br clear="all" />などの、正しくない記述で無理なFloat解除を行う必要もなくなります。

いろいろ方法がある中の一つとして、ClearFixを紹介させていただきました。

PAGE TOP

【コーディングTips】基礎編 – ブラウザスタイルの初期化 -

DATE 2011.01.26

CATEGORY 技術Tips

TAGS , , ,

こんにちは、IT開発センターの小山です。

今回はWeb制作する際のCSS（スタイルシート）について基礎的なことをご紹介したいと思います。
まず始めに、ブラウザにはそれぞれ独自の余白や文字のサイズが設定されています。
Web制作時は、最初に各ブラウザでの独自設定を統一するために、固有で設定されている値を初期化する必要があります。

一番基本的で単純なやり方が「*（ユニバーサルセレクタ）」を使った方法です。

* {
     margin:0;
     padding:0;
}

と記述します。

一見、これは便利ですがこれだと全てのセレクタに対しての指定となるので意図しない値まで初期化してしまう場合があります。

Web制作者であれば試行錯誤を繰り返してこのスタイルの初期化設定を行うケースが多いですが、初めて制作される方にも比較的簡単にできる方法をご紹介いたします。

・YUI Reset CSSを使う方法
YUI（Yahoo! UI Library）：http://developer.yahoo.com/yui/reset/

html {
	color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form,
 fieldset, legend, input, button, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {
	border:0;
}
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
	font-style:inherit;
	font-weight:inherit;
}
del, ins {
	text-decoration:none;
}
li {
	list-style:none;
}
caption, th {
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal;
}
q:before, q:after {
	content:'';
}
abbr, acronym {
	border:0;
	font-variant:normal;
}
sup {
	vertical-align:baseline;
}
sub {
	vertical-align:baseline;
}
legend {
	color:#000;
}
input, button, textarea, select, optgroup, option {
	font-family:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit;
}
input, button, textarea, select {
*font-size:100%;
}

上記のスタイルをCSSに追加するだけでブラウザ固有の余白や文字サイズを初期化することができます。とても簡単ですね。

今回ご紹介したブラウザ独自のスタイルの初期化と前回私がご紹介したIE*.jsと合わせてお使い頂ければよりスムーズにWeb制作を行うことができるはずです。
ぜひ合わせてご覧ください。

PAGE TOP

【コーディングTips】ブラウザ対応を効率的にする”IE*.js”

DATE 2010.12.24

CATEGORY 技術Tips

TAGS , , ,

こんにちは、IT開発センターの小山です。
今日はクリスマス・イヴですね。
明日の準備がある方も無い方も少しの時間、技術Tipsにお付き合いください。

まずはこちらの画像をご覧下さい。レイアウトが崩れていますね。
Web制作をする者であれば誰もが初めに頭を悩ませる「カラム落ち」と呼ばれる現象です。
これは横幅の計算違いや回り込みの指定などによって起こるものなのですが、ブラウザの違いによっても起こります。

これによりWeb制作者は様々なブラウザでテストを繰り返して同じようにサイトが表示されるようにしなければなりません。

今ご覧になっている記事もきちんとブラウザチェックを経て公開されています。
このブラウザへの対応で一番頭を悩ませ、手間が掛かるのが5、6、7、8とバージョンの多いInternet explorer（以下IEと表記）への対応です。特にIE6への対応はとても頭を悩ませます。

そこで今回紹介するのがGoogleのjavascriptライブラリで提供されている「IE7～9.js」です。これを使えばこのようにずっと楽にIEへの対応ができるようになります。実装も簡単で下記のコードをHTMLの内に埋め込むだけで使えます。
（詳しくは参考URLをご覧下さい）

<head>
<!--[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]-->
</head>

特に最新版の「IE9.js」使った場合の恩恵として嬉しいのがボックスサイズの計算法の統一化です。IE6以下ではボックスの計算方法が違うので毎回その都度、計算し別のスタイルシートに記述したり最悪の場合ハックという方法を使わなければなりません。ですが「IE9.js」を使うことによりソースの複雑化や手間を省き効率化を図ることができます。この他にもこれらライブラリを使うことで透過PNGや未対応セレクタにも対応してくれます。至れり尽くせりですね。

ここで注意点があります。これらライブラリは擬似的に対応しているように見せかけているものなので全てのブラウザバージョンの問題を解決してくれるわけではありません。使用しても問題が修正ができない場合は個別に対応が必要になります。ですが使用しないよりもブラウザごとの表示に関する対応が大幅に軽減されるはずなので「IE7～9.js」それぞれをテストし、自分のコーディングスタイルに合ったものを使ってみていただければと思います。CSSコーディングに慣れない方にもオススメのライブラリです。

参考URL：http://code.google.com/p/ie7-js/

PAGE TOP