CSS3の数行で作る簡単な3カラムレイアウト edo_m18 Follow 2011-07-20 12:42:15 License: MIT License Fork34 Fav1 View69799 記事解説はこちら http://css-eblog.com/csstechnique/css3-box-layout.html Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 29 lines CSS 56 lines 記事解説はこちら http://css-eblog.com/csstechnique/css3-box-layout.html CSS3の数行で作る簡単な3カラムレイアウト <h1>CSS3で3カラムレイアウトを作ってみた</h1> <div id="container"> <div id="mainContents"> メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 <!-- /#mainContents --></div> <div id="subContents1"> <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> <!-- /#subContents1 --></div> <div id="subContents2"> <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> <!-- /#subContents2 --></div> <!-- /#container --></div> CSS3の数行で作る簡単な3カラムレイアウト * { margin: 0; padding: 0; } body { font: 80%/1.5 "メイリオ", Verdana, sans-serif; margin: 0 auto; padding-top: 15px; width: 900px; } h1 { text-align: center; margin: 0 auto 5px; } ul { list-style: none; } #container { border: solid 5px #999; display: -moz-box; display: -webkit-box; width: 100%; } #container > div { padding: 15px; } #container #mainContents { background: #fac; border-left: solid 1px #333; border-right: solid 1px #333; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; -webkit-box-sizing: border-box; width: 500px; } #container #subContents1 { background-color: #acf; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-sizing: border-box; width: 200px; } #container #subContents2 { background-color: #caf; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; -webkit-box-sizing: border-box; width: 200px; } 記事解説はこちら http://css-eblog.com/csstechnique/css3-box-layout.html <h1>CSS3で3カラムレイアウトを作ってみた</h1> <div id="container"> <div id="mainContents"> メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。 <!-- /#mainContents --></div> <div id="subContents1"> <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> <!-- /#subContents1 --></div> <div id="subContents2"> <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> <!-- /#subContents2 --></div> <!-- /#container --></div> * { margin: 0; padding: 0; } body { font: 80%/1.5 "メイリオ", Verdana, sans-serif; margin: 0 auto; padding-top: 15px; width: 900px; } h1 { text-align: center; margin: 0 auto 5px; } ul { list-style: none; } #container { border: solid 5px #999; display: -moz-box; display: -webkit-box; width: 100%; } #container > div { padding: 15px; } #container #mainContents { background: #fac; border-left: solid 1px #333; border-right: solid 1px #333; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; -webkit-box-sizing: border-box; width: 500px; } #container #subContents1 { background-color: #acf; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; -webkit-box-sizing: border-box; width: 200px; } #container #subContents2 { background-color: #caf; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; -webkit-box-sizing: border-box; width: 200px; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? 記事解説はこちら http://css-eblog.com/csstechnique/css3-box-layout.html Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit http://jsdo.it/edo_m18/yujF CSS3の数行で作る簡単な3カラムレイアウト Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/yujF/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/edo_m18/yujF" title="CSS3の数行で作る簡単な3カラムレイアウト">CSS3の数行で作る簡単な3カラムレイアウト - jsdo.it - share JavaScript, HTML5 and CSS</a></p> 3column CSS3 Layout レイアウト Tweet twitter Tags 3column CSS3 Layout css レイアウト Favorite by jose: CSS3 Forked sort new page view favorite forked forked: CSS3の数行で作る簡単な3カラムレイアウト.. ayuka.nakaha.. 00 9views 2/29/56 3column CSS3 Layout レイアウト forked: CSS3の数行で作る簡単な3カラムレイアウト.. yuko.k6336 00 14views 2/29/56 3column CSS3 Layout レイアウト forked: CSS3の数行で作る簡単な3カラムレイアウト.. Shoichi.Akaz.. 00 27views 2/29/56 3column CSS3 Layout レイアウト forked: CSS3の数行で作る簡単な3カラムレイアウト.. wechiba 00 30views 2/29/56 3column CSS3 Layout レイアウト 1 2 3 4 5 6 7 8 9 10NEXT>>