CSS3の数行で作る簡単な3カラムレイアウト

edo_m18

2011-07-20 12:42:15

License: MIT License

Fork: 34

Fav: 1

View: 69799

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"> 
		メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。
		メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。
		メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。
		メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。
		メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。
		メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。メインコンテンツテキスト。
	</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> 
	</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> 
	</div> 
</div>

CSS3の数行で作る簡単な3カラムレイアウト

記事解説はこちら http://css-eblog.com/csstechnique/css3-box-layout.html<h1>CSS3で3カラムレイアウトを作ってみた</h1> <div id="container"> <div id="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> </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> </div> </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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

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>

QR Code