締切済み

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

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

clearfixの記述の仕方

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

カテゴリ
一覧

専門家に質問してみよう
専門家登録