4月
26
26
便利ã§ç°¡å˜ã€floatã®è§£é™¤ãŒå¿…è¦ã®ç„¡ã„便利ãªclearfixコード
floatを指定ã—ãŸã‚‰ã€float属性を解除ã™ã‚‹å¿…è¦ãŒã‚りã¾ã™ã€‚
通常ã€floatを解除ã™ã‚‹ãŸã‚ã«ä½™åˆ†ãªã‚³ãƒ¼ãƒ‰ãŒå¿…è¦ã«ãªã‚Šã¾ã™ãŒã€
ã“ã®clearfixコードを使ã†ã¨ã€ã‚‚ã£ã¨ç°¡å˜ã‚·ãƒ³ãƒ—ルã«floatを使ã†ã“ã¨ãŒå‡ºæ¥ã¾ã™ã€‚
便利ã§ç°¡å˜clearfixコード
è¦ç´ を横ã«ä¸¦ã¹ã‚‹å ´åˆã€floatを使ã£ã¦ä¸¦ã¹ã¦ã„ãã®ã§ã™ãŒã€
floatを使ã£ãŸè¦ç´ ã¯ã‚’れを囲むè¦ç´ ã‹ã‚‰é«˜ã•ãŒèªè˜ã•れãªã„ãŸã‚ã«ä»¥ä¸‹ã®ã‚ˆã†ãªç¾è±¡ãŒèµ·ã“ã£ã¦ã—ã¾ã„ã¾ã™ã€‚
ãã®ãŸã‚ã€ä¸€ç•ªå¤–å´ã®è¦ç´ ã«èƒŒæ™¯ã‚’指定ã—ãŸå ´åˆãªã©ã€
ã†ã¾ã背景ãŒè¡¨ç¤ºã•れãªã„ã¨ã„ã†ç¾è±¡ãŒèµ·ã“ã£ã¦ã—ã¾ã„ã¾ã™ã€‚
ãれを回é¿ã™ã‚‹ãŸã‚ã«ã€è¦ç´ ã®æœ€å¾Œã«clear属性をæŒã£ãŸè¦ç´ ã‚’é…ç½®ã—ã¦ã€
最後ã®è¦ç´ ã§floatを解除ã—ã¦ã€ä½ç½®ã‚’知らã›ãªã‘れã°ãªã‚Šã¾ã›ã‚“ã§ã—ãŸã€‚
ã“ã®ã€æœ€å¾Œã«floatを解除ã™ã‚‹ã‚³ãƒ¼ãƒ‰ãŒå¿…è¦ãªãŸã‚ã€HTMLã¨ã—ã¦ä½™åˆ†ãªã‚³ãƒ¼ãƒ‰ãŒå¿…è¦ã§ã—ãŸãŒã€
今回紹介ã™ã‚‹clearfixを使ã†ã¨ã€ã“ã®ã‚³ãƒ¼ãƒ‰ã‚’書ã‹ãšã¨ã‚‚CSSã§ã“ã®ç¾è±¡ã‚’回é¿ã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã‚‹ã®ã§ã™ã€‚
SEO上もã€HTMLã®æ§‹æˆã¯å‡ºæ¥ã‚‹ã ã‘シンプルãªã»ã†ãŒã„ã„。
※SEO上ã¯å¾®ã€…ãŸã‚‹ã‚‚ã®ã§ã™ãŒã€HTMLã‚’ã§ãã‚‹ã ã‘è§£æžã—ã‚„ã™ãã—ã¦ãŠãæ–¹ãŒæ¤œç´¢ã‚¨ãƒ³ã‚¸ãƒ³ã«ã‚‚ã‚„ã•ã—ã„ページã«ãªã‚Šã¾ã™
ä½¿ã„æ–¹ã¯ç°¡å˜ã€ä»¥ä¸‹ã®ã‚³ãƒ¼ãƒ‰ã‚’コピーã—ã¦ä½¿ã†ã ã‘。
CSSファイルã§å®šç¾©ã—ã¦ãŠãã¨ã€ã„ã¤ã§ã‚‚ç°¡å˜ã«ä½¿ãˆã¾ã™ã€‚
ä½¿ã„æ–¹ã¯ã€ä¸€ç•ªå¤–å´ã®è¦ç´ (図ã®å ´åˆãƒ”ンクã®è¦ç´ )ã«.cfを指定ã™ã‚‹ã ã‘。
ã†ã‚Œã—ã„ã®ã¯IE6ã«ã‚‚対応ã—ã¦ã„ã‚‹ã¨ã“ã‚。
ç°¡å˜ã§ä¾¿åˆ©ãªclearfixを今ã™ã使ã£ã¦ã¿ã¾ã—ょã†ã€‚
利用例(デモページ)
A new micro clearfix hack
floatを使ã£ãŸè¦ç´ ã¯ã‚’れを囲むè¦ç´ ã‹ã‚‰é«˜ã•ãŒèªè˜ã•れãªã„ãŸã‚ã«ä»¥ä¸‹ã®ã‚ˆã†ãªç¾è±¡ãŒèµ·ã“ã£ã¦ã—ã¾ã„ã¾ã™ã€‚

ãã®ãŸã‚ã€ä¸€ç•ªå¤–å´ã®è¦ç´ ã«èƒŒæ™¯ã‚’指定ã—ãŸå ´åˆãªã©ã€
ã†ã¾ã背景ãŒè¡¨ç¤ºã•れãªã„ã¨ã„ã†ç¾è±¡ãŒèµ·ã“ã£ã¦ã—ã¾ã„ã¾ã™ã€‚
ãれを回é¿ã™ã‚‹ãŸã‚ã«ã€è¦ç´ ã®æœ€å¾Œã«clear属性をæŒã£ãŸè¦ç´ ã‚’é…ç½®ã—ã¦ã€
最後ã®è¦ç´ ã§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
↓サーãƒãƒ¼ã‚’借りるãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰


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

↓ãƒãƒƒãƒˆã‚·ãƒ§ãƒƒãƒ—ã‚’å§‹ã‚ã‚‹ãªã‚‰â†“
サーãƒãƒ¼ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰




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


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


人気ã®è¨˜äº‹
- ãªãœã‹å‰é¢ã«è¡¨ç¤ºã•れãªã„?position:relative,absoluteã¨z-indexã§ã®é‡ãªã‚Šé †ã®é–¢ä¿‚ - 118,518 views
- 当サイトã«ã¤ã„㦠- 113,214 views
- 自分ã®ãƒ‘ソコンã®ãƒãƒ¼ã‚«ãƒ«ç’°å¢ƒã§ãƒ›ãƒ¼ãƒ ページを作るã€è¦‹ã‚‹ - 84,007 views
- ã“れã¯ä½¿ãˆã‚‹ï¼ãƒžã‚¦ã‚¹ã‚’ç”»åƒã®ä¸Šã«æŒã£ã¦ãã‚‹ã¨æ˜Žã‚‹ããªã‚‹å‡¦ç†ã‚’CSSã ã‘ã§å®Ÿè£…。 - 13,943 views
- SEOã«çµ¶å¯¾ã‚„ã£ã¦ã¯ã„ã‘ãªã„。フレームセットã®ãƒ›ãƒ¼ãƒ ページ。 - 12,158 views
- フリーダイアルã®ãƒã‚´ãƒžãƒ¼ã‚¯ã®ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ - 11,615 views
- ã“れãŒã‚れã°ã¨ã£ã¦ã‚‚便利。ホームページを作るãŸã‚ã®ã‚½ãƒ•ト。 - 9,444 views
- FFFTPã§.htaccessãŒè¡¨ç¤ºã•れãªã„ã®ã‚’表示ã•ã›ã‚‹æ–¹æ³• - 8,628 views
- 点線を使ã£ãŸä¸‹ç·šã‚’引ã„ã¦ãƒŽãƒ¼ãƒˆã®ã‚ˆã†ã«ãƒ‡ã‚¶ã‚¤ãƒ³ã™ã‚‹CSS - 7,937 views
- HTMLãƒ†ãƒ¼ãƒ–ãƒ«ã‚¿ã‚°ã®æ¦‚è¦ãã®ï¼’。ヘッダーã€ãƒœãƒ‡ã‚£ã€ãƒ•ッターã®ï¼“è¦ç´ 。 - 7,747 views