4月
26

便利ã§ç°¡å˜ã€floatã®è§£é™¤ãŒå¿…è¦ã®ç„¡ã„便利ãªclearfixコード

By admin  //  CSS, HTML, 便利  //  No Comments

ホームページã®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã®ä¸Šã§ã€floatを使ã†ã“ã¨ãŒå¤šã„ã§ã™ãŒã€
floatを指定ã—ãŸã‚‰ã€float属性を解除ã™ã‚‹å¿…è¦ãŒã‚りã¾ã™ã€‚
通常ã€floatを解除ã™ã‚‹ãŸã‚ã«ä½™åˆ†ãªã‚³ãƒ¼ãƒ‰ãŒå¿…è¦ã«ãªã‚Šã¾ã™ãŒã€
ã“ã®clearfixコードを使ã†ã¨ã€ã‚‚ã£ã¨ç°¡å˜ã‚·ãƒ³ãƒ—ルã«floatを使ã†ã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚

便利ã§ç°¡å˜clearfixコード

è¦ç´ ã‚’横ã«ä¸¦ã¹ã‚‹å ´åˆã€floatを使ã£ã¦ä¸¦ã¹ã¦ã„ãã®ã§ã™ãŒã€
floatを使ã£ãŸè¦ç´ ã¯ã‚’れを囲むè¦ç´ ã‹ã‚‰é«˜ã•ãŒèªè­˜ã•れãªã„ãŸã‚ã«ä»¥ä¸‹ã®ã‚ˆã†ãªç¾è±¡ãŒèµ·ã“ã£ã¦ã—ã¾ã„ã¾ã™ã€‚
floatã®å•題
ãã®ãŸã‚ã€ä¸€ç•ªå¤–å´ã®è¦ç´ ã«èƒŒæ™¯ã‚’指定ã—ãŸå ´åˆãªã©ã€
ã†ã¾ã背景ãŒè¡¨ç¤ºã•れãªã„ã¨ã„ã†ç¾è±¡ãŒèµ·ã“ã£ã¦ã—ã¾ã„ã¾ã™ã€‚
ãれを回é¿ã™ã‚‹ãŸã‚ã«ã€è¦ç´ ã®æœ€å¾Œã«clear属性をæŒã£ãŸè¦ç´ ã‚’é…ç½®ã—ã¦ã€
最後ã®è¦ç´ ã§floatを解除ã—ã¦ã€ä½ç½®ã‚’知らã›ãªã‘れã°ãªã‚Šã¾ã›ã‚“ã§ã—ãŸã€‚
floatã®è§£é™¤
ã“ã®ã€æœ€å¾Œã«floatを解除ã™ã‚‹ã‚³ãƒ¼ãƒ‰ãŒå¿…è¦ãªãŸã‚ã€HTMLã¨ã—ã¦ä½™åˆ†ãªã‚³ãƒ¼ãƒ‰ãŒå¿…è¦ã§ã—ãŸãŒã€
今回紹介ã™ã‚‹clearfixを使ã†ã¨ã€ã“ã®ã‚³ãƒ¼ãƒ‰ã‚’書ã‹ãšã¨ã‚‚CSSã§ã“ã®ç¾è±¡ã‚’回é¿ã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã‚‹ã®ã§ã™ã€‚
SEO上もã€HTMLã®æ§‹æˆã¯å‡ºæ¥ã‚‹ã ã‘シンプルãªã»ã†ãŒã„ã„。
※SEO上ã¯å¾®ã€…ãŸã‚‹ã‚‚ã®ã§ã™ãŒã€HTMLã‚’ã§ãã‚‹ã ã‘è§£æžã—ã‚„ã™ãã—ã¦ãŠãæ–¹ãŒæ¤œç´¢ã‚¨ãƒ³ã‚¸ãƒ³ã«ã‚‚ã‚„ã•ã—ã„ページã«ãªã‚Šã¾ã™
ä½¿ã„æ–¹ã¯ç°¡å˜ã€ä»¥ä¸‹ã®ã‚³ãƒ¼ãƒ‰ã‚’コピーã—ã¦ä½¿ã†ã ã‘。
CSSファイルã§å®šç¾©ã—ã¦ãŠãã¨ã€ã„ã¤ã§ã‚‚ç°¡å˜ã«ä½¿ãˆã¾ã™ã€‚

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

ä½¿ã„æ–¹ã¯ã€ä¸€ç•ªå¤–å´ã®è¦ç´ ï¼ˆå›³ã®å ´åˆãƒ”ンクã®è¦ç´ ï¼‰ã«.cfを指定ã™ã‚‹ã ã‘。
ã†ã‚Œã—ã„ã®ã¯IE6ã«ã‚‚対応ã—ã¦ã„ã‚‹ã¨ã“ã‚。
ç°¡å˜ã§ä¾¿åˆ©ãªclearfixを今ã™ã使ã£ã¦ã¿ã¾ã—ょã†ã€‚

利用例(デモページ)
<div class="cf">
<div class="section">Float</div>
<div class="section">Float</div>
</div>

A new micro clearfix hack





Leave a comment

↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


↓ドメインをã¨ã‚‹ãªã‚‰â†“
ドメインã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“

人気ã®è¨˜äº‹