
CSS ãŠã‚ŒãŠã‚Œ Advent Calendar 2012 – 05日目
横幅ã„ã£ã±ã„ã«åºƒã’よã†ã¨ã—ã¦width:100%を指定ã—ãŸã‚‰æ¨ªã‚¹ã‚¯ãƒãƒ¼ãƒ«ãƒãƒ¼ãŒå‡ºã¡ã‚ƒã£ãŸã€ã¨ã„ã†çµŒé¨“ã‚りã¾ã›ã‚“ã‹ï¼Ÿã€€ãã®åŽŸå› ã¨ä»•組ã¿ã€å›žé¿ç–ã«ã¤ã„ã¦ãŠè©±ã—ã—ã¾ã™ã€‚
ã‚りã¨FAQãªæ„Ÿã˜ã€‚ã“ã‚Œã¯æ˜¯éžè¦šãˆã¦ãŠã„ã¦ã‚‚らã„ãŸã„ã§ã™ã€‚ã¨ã„ã†ã‹çŸ¥ã£ã¦ãŠã„ã¦ãã ã•ã„。
ã¯ã¿å‡ºã—ãŸä¾‹
position:absoluteãªã„ã—position:fixedを使ã£ãŸéš›ã«ã“ã†ãªã£ã¡ã‚ƒã†äº‹ãŒå¤šã„ã¨æ€ã„ã¾ã™ã€‚
上部ã‹ã‚‰å‡ºã¦ããŸãƒ¡ãƒƒã‚»ãƒ¼ã‚¸æ¬„ã€æ¨ªã«ã¯ã¿å‡ºã¦ã¾ã™ã。
ã§ã‚‚指定ã¯ã¡ã‚ƒã‚“ã¨width:100%ã§ã™ã€‚「幅ã„ã£ã±ã„ã€ã‚’指定ã—ã¦ã„ã‚‹ã®ã«ã€ã©ã†ã—ã¦ã¯ã¿å‡ºã¦ã—ã¾ã£ãŸã‚“ã§ã—ょã†ã‹ã€‚
「幅ã€ãŒæ„味ã™ã‚‹ã¨ã“ã‚
実ã¯CSSã®ä»•様ãŒå®šã‚ã‚‹ã¨ã“ã‚ã®ã€Œå¹…ã€ã¨ã„ã†ã®ãŒã€æˆ‘々ãŒè¦–覚的ã«èªçŸ¥ã—ã¦ã„る「幅ã€ã¨ç•°ãªã£ã¦ã„ã‚‹ã®ãŒåŽŸå› ã§ã™ã€‚
ボックスモデル
CSSã§ã¯ã“ã‚“ãªã‚‚ã®ã‚’定ã‚ã¦ã„ã¾ã™ã€‚

ã„ã‚ゆるボックスモデルã¨ã„ã†ã‚„ã¤ã§ã™ã€‚
普通ã€äººãŒé ˜åŸŸã‚’見ã¦ã€Œå¹…ã€ã¨èªè˜ã™ã‚‹ã®ã¯ã€æž ç·š (Border) ã¾ã§ã§ã™ã€‚

ã¨ã“ã‚ãŒã“ã®ãƒœãƒƒã‚¯ã‚¹ãƒ¢ãƒ‡ãƒ«ã§ã¯ã€å¹…ã¨é«˜ã•ã¨ã„ã†ã®ã¯å†…容 (Content) ã«å¯¾ã—ã¦ã®æŒ‡å®šã«ãªã‚Šã¾ã™ã€‚

ã“ã®èªè˜ã®å·®ãŒå•題ã«ãªã‚Šã¾ã™ã€‚
å¹…ã¯widthã ã‘ã˜ã‚ƒãªã‹ã£ãŸ
ã¤ã¾ã‚ŠContentã®éƒ¨åˆ†ãŒãã£ã¡ã‚Šæ¨ªã„ã£ã±ã„100%ã«åºƒãŒã£ã¦ã€ã•らã«Padding分ã®å¹…ã‚‚åŠ ã‚ã£ã¦ã„ãŸã®ã§ã™ã€‚ã•ã‚‰ã«æŒ‡å®šãŒã‚れã°Border分ã€Margin分も広ãŒã‚Šã¾ã™ã€‚
ã ã‹ã‚‰padding:8pxã¨ã—ãŸå ´åˆã€å·¦å³8pxãšã¤ã€åˆã‚ã›ã¦16px分余計ãªå¹…ãŒå‡ºæ¥ã¦ã—ã¾ã†ã‚ã‘ã§ã™ã€‚
回é¿ç–
ã¯ã¿å‡ºã•ã›ãªã„よã†ã«ã™ã‚‹ã«ã¯ã€äºŒã¤ã®ã‚„り方ãŒã‚りã¾ã™ã€‚
入れåã«ã™ã‚‹
width:100%ã®æŒ‡å®šã¨paddingã®æŒ‡å®šãŒå…±å˜ã—ã¦ã„ã‚‹ã®ãŒå•題ã§ã—ãŸã€‚
ãã“ã§width:100%ã§æ¨ªã„ã£ã±ã„ã«åºƒã’ãŸè¦ç´ ã®ä¸ã§ã€å¹…を指定ã—ãªã„ã§paddingã ã‘æŒ‡å®šã—ãŸåè¦ç´ ã‚’è¨ç½®ã—ã¾ã™ã€‚(ã“ã®å ´åˆã¯marginã«ç½®ãæ›ãˆãŸæ–¹ãŒç›´æ„Ÿçš„ã‹ã‚‚ã—れã¾ã›ã‚“。)
内å´ã®è¦ç´ ã¯å¹…を指定ã—ã¦ã„ãªã„ã®ã§ã€è‡ªå‹•çš„ã«width:autoã«ãªã‚Šã¾ã™ã€‚ã“ã®å ´åˆã¯Marginã¾ã§å«ã‚ãŸå¹…ãŒã„ã£ã±ã„ã«åºƒãŒã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚
外å´ã«width:autoを指定ã™ã‚‹ã€ã¨ã„ã†ã®ã¯ã†ã¾ãã„ãã¾ã›ã‚“。position:absoluteを指定ã—ã¦ã„る状態ã§ã¯ã€autoã¯æœ€å¤§ã§ã¯ãªã最å°å¹…ã«ãªã‚‹ãŸã‚ã§ã™ã€‚
ã“ã®ã‚„り方ã¯å¤ã„IEã§ã‚‚æ£ç¢ºã«è¡¨ç¾ã§ãã‚‹ã®ã§ã™ãŒã€ä½™åˆ†ãªè¦ç´ ãŒå¢—ãˆã¦ã—ã¾ã†ã®ãŒé›£ç‚¹ã§ã™ã€‚
box-sizingを使ã†
å…ˆã»ã©ã®ãƒœãƒƒã‚¯ã‚¹ãƒ¢ãƒ‡ãƒ«ã®èª¬æ˜Žã§ã‚µã‚¤ã‚ºã®å–り方ãŒäºŒé€šã‚Šã‚ã‚‹ã¨ã„ã†è©±ã‚’ã—ã¾ã—ãŸã€‚box-sizingã¨ã„ã†CSSプãƒãƒ‘ティを用ã„ã‚‹ã¨ã€ãã®äºŒé€šã‚Šã‚’指定ã™ã‚‹äº‹ãŒã§ãã¾ã™ã€‚
box-sizing:border-boxを指定ã™ã‚‹äº‹ã§ã€width(ã¨heightï¼‰ã§æŒ‡å®šã™ã‚‹ã‚µã‚¤ã‚ºãŒBorderã¾ã§å«ã‚ãŸã‚‚ã®ã‚’指ã™äº‹ã«ãªã‚Šã¾ã—ãŸã€‚

ã“ã®ã‚„り方ãŒä¸€ç•ªç¶ºéº—ã§ã™ã€‚
IEã¯8以é™ãŒå¯¾å¿œã—ã¦ã„ã¾ã™ã€‚7ã¯å¯¾å¿œã—ã¦ã„ã¾ã›ã‚“。6ã¯ã€å¯¾å¿œã¯ã—ã¦ã„ãªã„ã®ã§ã™ãŒã€æœ€åˆã‹ã‚‰border-boxã®æŒ™å‹•ã«ãªã£ã¦ã„ã¾ã™ã€‚(ä¸å…·åˆã§ã—ãŸã€‚) 末尾ã®å‚考リンクã®ã¨ã“ã‚ã«IE 7ã§å‹•ã‹ã›ã‚‹ã‚ˆã†ã«ã—ã¦ã„るページを紹介ã—ã¦ã„ã¾ã™ã€‚
ã‚ã¨Firefoxã§ã¯ãƒ™ãƒ³ãƒ€ãƒ¼ãƒ—レフィックスãŒå¿…è¦ã§ã™ã€‚(Ver.1.0ã®é ƒã‹ã‚‰ãšã£ã¨â€¦â€¦ã€‚)
ã‚ã¨ã‚ã¨ã€Androidç‰ã§ã¯ã¡ã‚ƒã‚“ã¨å‹•ãらã—ã„ã§ã™ã€‚ã£ã¦ã°ã£ã¡ã‚ƒãŒã‚†ã£ã¦ãŸã€‚
ボックスモデルã®è€ƒãˆæ–¹
ã“れã¯ä»•様ç–å®šã®æ§˜åを知る訳ã§ã¯ãªãã¦ã€ãŸã ã®å½“ã¦æŽ¨é‡ã§ã™ãŒâ€¦â€¦ã€‚
何故ã“ã®ã‚ˆã†ãªã€Œä¸è‡ªç„¶ã€ãªä»•様ã«ãªã£ã¦ã„ã‚‹ã‹ã¨ã„ã†ã¨ã€ãŠãらã見方を変ãˆã‚‹ã¨ã“ã®æ–¹ãŒå®Ÿã¯ã€Œè‡ªç„¶ã€ã ã‹ã‚‰ã ã¨æ€ã„ã¾ã™ã€‚
例ãˆã°ContentãŒç”»åƒã§ã‚ã£ãŸå ´åˆã‚’考ãˆã‚‹ã¨ã€ã“ã¡ã‚‰ã®æ–¹ãŒã—ã£ãりãã‚‹ã®ãŒã‚ã‹ã‚Šã¾ã™ã€‚
ç”»åƒã®å¹…ã¨é«˜ã•ã¯å¦‚何や
ç”»åƒã«æž 線を付ã‘ãŸã¨ã—ãŸã‚‰ã€ãã®æž ç·šã¯ç”»åƒã®å¤–å´ã«ä»˜ãã¹ãã§ã™ã‚ˆã。内å´ã«ä»˜ãã¨ç”»åƒã«ã‹ã¶ã£ã¦ã—ã¾ã„ã¾ã™ã€‚
ã“ã®ã¨ãå¹…ã¨é«˜ã•ã¯ã€ä½•を指定ã™ã‚‹ã¹ãã§ã—ょã†ã‹ã€‚100×100pxã®ç”»åƒã«5pxã®æž 線を付ã‘ãŸã¨ã—ã¦ã€imgã®ã‚¹ã‚¿ã‚¤ãƒ«widthã¨heightã«ä¸Žãˆã‚‹ã¹ã数値ã¯ä½•ã§ã—ょã†ã‹ã€‚

当然width:100px, height:100pxã§ã™ã‚ˆã。ãã—ã¦è¡¨ç¤ºã¯100pxã«ä¸¡ç«¯5pxãšã¤ã®æž ãŒä»˜ã„ã¦ã€åˆã‚ã›ã¦110px。ã“れãªã‚‰ã—ã£ãりæ¥ã¾ã›ã‚“ã‹ã€‚
Paddingã¯ä½™ç™½ã˜ã‚ƒãªã„
ã¾ãŸã€è¾žæ›¸ã§”padding”を引ã„ã¦ã¿ã‚‹ã¨ã€ä½™ç™½ã§ã¯ãªã「詰ã‚物ã€ã¨ã„ã†èªžã§è¡¨ã•れã¦ã„ã¾ã™ã€‚(”margin”ã ã¨æ¬„外ã®ä½™ç™½ã§ã™ã。)
ã¤ã¾ã‚Šå…ˆã»ã©ã®ä¾‹ã§ã„ãã¨ã€Paddingã¯ç”»åƒã¨æž ç·šã®é–“ã«è©°ã‚ãŸéš™é–“ã¨ã„ã†äº‹ã«ãªã‚Šã¾ã™ã€‚ã“れもã¾ãŸã€å¹…ã¨é«˜ã•ã«å«ã‚ã‚‹ã®ã¯ä¸è‡ªç„¶ã§ã™ã。
ã¨ã„ã†é¢¨ã«è§£é‡ˆã—ã¦ã„ã‚‹ã®ã§ã™ãŒã€ã„ã‹ãŒã§ã—ょã†ã‹ã€‚
ã¾ã‚分ã‹ã‚Šè¾›ã„ã‘ã©ã
è¦ç´ ã«ã‚ˆã£ã¦åˆæœŸå€¤ã‚’変ãˆã‚‹ã¨ã‹ã§ã‚‚良ã‹ã£ãŸã‚“ã˜ã‚ƒãªã„ã‹ãªãƒ¼ã¨ã‹æ€ã‚ãªã„ã§ã‚‚ãªã„ã§ã™ã€‚ã¯ã„。
å‚考
- CSS Basic User Interface Module Level 3 (CSS3 UI)
- 6.1. ‘box-sizing’ property … 仕様
- box-sizing – CSS | MDN … Mozillaã®ã€‚日本語。
- 実験室: ボックスサイズã®è§£é‡ˆã¯IE6ã®æ–¹ãŒã‚ã‹ã‚Šã‚„ã™ã„ã¨æ€ã† | Mach3.laBlog … 図解ã¨ã€IE 7ã§ã‚‚ã©ã†ã«ã‹ã™ã‚‹jQueryプラグイン。
- CSS basic box model … 仕様
- The various areas and edges of a typical box … ボックスモデルã®è§£èª¬å›³
- Box model – CSS | MDN … Mozillaã®ã€‚日本語。