締切済み

clearfixの記述の仕方

2012/10/01 16:12

サイトでclearfixを使わないと親要素の高さがなくなってしまうのは分かったのですが clearfixをどこにどのように記述したらいいのかが今ひとつ分かりませんもし、お分かりの方いましたらご教授下さい。以下の記述を探したのですがこれをどこかに記述すれば親要素の高さがでるのでしょうか？ /* モダンブラウザ（Firefox Opera Safari）対策 */ .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; } /* Win版IE7とMac版IE5対策 */ .clearfix{ display:inline-block; } /* Win版IE5および6対策 */ /* Hides from IE-mac \*/ * html .clearfix{ height:1px; } .clearfix{ display:block; } /* End hide from IE-mac */

ryuujinn11
お礼率26% (47/178)

ホームページ作成ソフト
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

DrFell
ベストアンサー率55% (305/551)

2012/10/03 06:14 回答No.3

clearfixの使い方は、html側の親要素に「class="clearfix"」を加えるだけです。 clearfixは、あまり推奨できません。それよりもｃｓｓのclearfixを親要素のクラス名（id名）に変えるだけで同じ効果があります。それなら、デザインの為に新たなクラス名を付加しなくてもいいです。 #1/#2さんはフロート嫌いのようですが、フロートによる段組も適材適所で問題ありません。絶対配置も万能ではありませんし、好みや状況に応じて使われることをお勧めします。ｃｓｓはhtmlと対応して表現されますので、ｃｓｓだけ出されても適切なアドバイスはできないことが多いです。今回はよく使われるパターンとしての回答です。多分間違っていないとは思いますが、より詳しく聞きたい場合は親要素子要素などといってないで、問題が再現できるhtml+cssを見せていただくと、的確なアドバイスが受けられると思います。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/02 08:53 回答No.2

clearが必要になるのは、ブロックの配置をfloatで行うからです。floatで行うと、デザインを変えようとしたときにHTMLまで変えなければなりません。そもそも文書構造を無視したHTMLを書かなければなりません。これは好ましくありません。 →Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 ) ★floatを使う場合、最後のfooterあたりにclear:both;をいれると良いでしょう。 ★絶対配置だと右にも左にも自由に配置できます。簡単に・・transitinalはさすがに時代遅れなので・・　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。1999年勧告HTML4.01strict ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 <div class="header"></div class="section"><div class="aside"><div class="footer">は、それぞれ<header><section><aside><footer>にすることで、HTMLに変更できます。意味はHTML5に従っています。 →HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) →DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) タブは＿に、:は：に置換してあるので戻すこと。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★リキッドデザインなので、そのままスマホも幅広(1900pxとか)にも対応してます。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http：//www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> ＿<title>株式会社なんたらかんたら</title> ＿<meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css">  ＿</style> </head> <body> <div class="article"> ＿<div class="header"> ＿＿<h1>株式会社なんたらかんたら</h1> ＿＿<div class="nav"> ＿＿＿<h2><img src="./images/logo.jpg" width="189" height="28" alt="ナビゲーション" /></h2> ＿＿＿<ul> ＿＿＿＿<li>HOME</li> ＿＿＿＿<li>企業理念</li> ＿＿＿＿<li>会社概要</li> ＿＿＿＿<li>事業内容</li> ＿＿＿＿<li>アクセス</li> ＿＿＿＿<li>お問合せ</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<div class="section"> ＿＿＿<h3>プレスリリース</h3> ＿＿＿<p>clearが必要になるのは、ブロックの配置をfloatで行うからです。floatで行うと、デザインを変えようとしたときにHTMLまで変えなければなりません。</p> ＿＿＿<p>テキストテキスト</p> ＿＿＿<p>テキストテキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>テキスト</h3> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>テキスト</h3> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>運営サイト</h3> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<address> ＿＿＿<span class="zip">〒100-0001</span>東京都★★区★★★0-00-00<br /> ＿＿＿株式会社▲▲東京支社内<br /> ＿＿＿<span class="telephone">TEL 03-****-**** <span class="fax">FAX 03-****-****</span></span> ＿＿</address> ＿</div> </div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/02 08:49 回答No.1

clearが必要になるのは、ブロックの配置をfloatで行うからです。floatで行うと、デザインを変えようとしたときにHTMLまで変えなければなりません。そもそも文書構造を無視したHTMLを書かなければなりません。これは好ましくありません。 →Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 ) ★floatを使う場合、最後のfooterあたりにclear:both;をいれると良いでしょう。 ★絶対配置だと右にも左にも自由に配置できます。簡単に・・transitinalはさすがに時代遅れなので・・　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。1999年勧告HTML4.01strict ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 <div class="header"></div class="section"><div class="aside"><div class="footer">は、それぞれ<header><section><aside><footer>にすることで、HTMLに変更できます。意味はHTML5に従っています。 →HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) →DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) タブは＿に、:は：に置換してあるので戻すこと。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★リキッドデザインなので、そのままスマホも幅広(1900pxとか)にも対応してます。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http：//www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> ＿<title>株式会社なんたらかんたら</title> ＿<meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css">  ＿</style> </head> <body> <div class="article"> ＿<div class="header"> ＿＿<h1>株式会社なんたらかんたら</h1> ＿＿<div class="nav"> ＿＿＿<h2><img src="./images/logo.jpg" width="189" height="28" alt="ナビゲーション" /></h2> ＿＿＿<ul> ＿＿＿＿<li>HOME</li> ＿＿＿＿<li>企業理念</li> ＿＿＿＿<li>会社概要</li> ＿＿＿＿<li>事業内容</li> ＿＿＿＿<li>アクセス</li> ＿＿＿＿<li>お問合せ</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<div class="section"> ＿＿＿<h3>プレスリリース</h3> ＿＿＿<p>clearが必要になるのは、ブロックの配置をfloatで行うからです。floatで行うと、デザインを変えようとしたときにHTMLまで変えなければなりません。</p> ＿＿＿<p>テキストテキスト</p> ＿＿＿<p>テキストテキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>テキスト</h3> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>テキスト</h3> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>運営サイト</h3> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿＿<p>テキスト</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<address> ＿＿＿<span class="zip">〒100-0001</span>東京都★★区★★★0-00-00<br /> ＿＿＿株式会社アルファビジネス東京支社内<br /> ＿＿＿<span class="telephone">TEL 03-6301-4281 <span class="fax">FAX 03-6301-8420</span></span> ＿＿</address> ＿</div> </div> </body> </html>

clearfixの記述の仕方

みんなの回答

関連するQ&A

clearfixについて

Firefoxでfloat設定したら背景が表示されない

CSS Validatorでエラーの出ないclearfixハックとは

ヤバいパソコンが壊れたかも！？事前に知っておきたい3つの兆候と対策

回り込み解除（clearfixとの違いは！？）

Firefoxでbackground-repeatが表示されない

【CSS】clearとvisibilityについて

clearfix の後marginが効かない

IE8で印刷時に背景が出ない（Floatを内包する要素）

IE7でclearfixが効かない？

clearfixの存在意義

IE6での表示がうまくいかず困っています

CSS　リスト　外枠から文字と画像がはみ出る　clearfix

家のネットワークを最適にできますか？：知っておくべきポイント

背景色を行ごとに変えるには？

float の clearfixで謎の空間が出現

横並びリスト　ブラウザ縮小カラム落ち

ナビゲーションバーの表示について（横幅）

ナビゲーションバーのfloatを解除できない。

ブロック要素の幅を中身の幅に合わせるには？

MTでのCSSハックが分かりません

背景色について

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

clearfixの記述の仕方

みんなの回答

関連するQ&A

clearfixについて

Firefoxでfloat設定したら背景が表示されない

CSS Validatorでエラーの出ないclearfixハックとは

ヤバいパソコンが壊れたかも！？事前に知っておきたい3つの兆候と対策

回り込み解除（clearfixとの違いは！？）

Firefoxでbackground-repeatが表示されない

【CSS】clearとvisibilityについて

clearfix の後marginが効かない

IE8で印刷時に背景が出ない（Floatを内包する要素）

IE7でclearfixが効かない？

clearfixの存在意義

IE6での表示がうまくいかず困っています

CSS リスト 外枠から文字と画像がはみ出る clearfix

家のネットワークを最適にできますか？：知っておくべきポイント

背景色を行ごとに変えるには？

float の clearfixで謎の空間が出現

横並びリスト ブラウザ縮小 カラム落ち

ナビゲーションバーの表示について（横幅）

ナビゲーションバーのfloatを解除できない。

ブロック要素の幅を中身の幅に合わせるには？

MTでのCSSハックが分かりません

背景色について

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

CSS　リスト　外枠から文字と画像がはみ出る　clearfix

横並びリスト　ブラウザ縮小カラム落ち