アットウィキロゴ
mnk375 @ ウィキ
アットウィキロゴ
mnk375 @ ウィキ
ページ一覧

ソースコードサンプル　ボックス 

green box
---------------------------------------------------------------------------------------------------------
<HTML>---------------------------------------------------------------------------------------------------
<div class="clearfix">
	<div class="greenbox">
			<h3>コンテンツのタイトル</h3>
		<p class="box_inner">本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。
		本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。</p>
	</div>
		<div class="greenbox_center">
			<h3>コンテンツのタイトル</h3>
		<p class="box_inner">本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。
		本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。</p>
	</div>
		<div class="greenbox">
			<h3>コンテンツのタイトル</h3>
		<p class="box_inner">本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。
		本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。</p>
	</div>
</div><!--clearfix-->
---------------------------------------------------------------------------------------------------------
<CSS>
#content .greenbox {
	width:200px;
	background-color:#6fb36f;
	border:#008c45 solid 5px;
	padding:10px;
	float:left;
	margin-bottom:40px;
	color:white;
}
 
#content .greenbox_center {
	width:200px;
	background-color:#6fb36f;
	border:#008c45 solid 5px;
	padding:10px;
	float:left;
	margin:0px 5px 40px 5px;
	color:white;
}
 
#content h3 {
	font-size:1em;
	color:white;
	border-bottom:dotted 1px black;
	margin:0;
	margin-bottom:15px;
	padding-bottom:3px;
	color:white;
}
 
#content p.box_inner {
	margin:0px;
}
---------------------------------------------------------------------------------------------------------
 
Black line Box
<HTML>--------------------------------------------------------------------------------------------------
	<div id="bw_box_all" class="clearfix">
	<div class="bw_box">
			<img src="img/webdesining.gif" width="177" height="40" class="wd" />
		<p class="box_inner">本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。
		本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。</p>
		<img src="img/link_webdesigning.gif" width="200" height="26" class="wd_link" />
	</div>
		<div class="bw_box">
			<img src="img/webdesining.gif" width="177" height="40" class="wd" />
		<p class="box_inner">本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。
		本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。</p>
		<img src="img/link_webdesigning.gif" width="200" height="26" class="wd_link" />
	</div>
		<div class="bw_box_right">
			<img src="img/webdesining.gif" width="177" height="40" class="wd" />
		<p class="box_inner">本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。
		本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。本文を記述します。</p>
		<img src="img/link_webdesigning.gif" width="200" height="26" class="wd_link" />
	</div>
</div><!--clearfix-->
<img src="img/page.gif" width="700" height="25">
<!--bwbox-->
---------------------------------------------------------------------------------------------------------
<CSS>
#content #bw_box_all {
	width:658px;
	padding:20px;
	border-top:1px solid black;
	border-right:1px solid black;
	border-left:1px solid black;
	margin-bottom:0px;
}
 
#content #bw_box_all .bw_box {
	width:200px;
	background-color:white;
	background-image:url(../img/line_bg.gif);
	background-repeat:repeat-y;
	background-position:right top;
	padding-right:10px;
	padding-left:10px;
	float:left;
	margin-bottom:0px;
}
 
#content #bw_box_all .bw_box_right {
	width:200px;
	background-color:white;
	padding-left:5px;
	float:left;
	margin:0px 5px 0px 5px;
}
 
#content #bw_box_all .wd {
	margin-bottom:10px;
}
 
#content #bw_box_all .wd_link {
	margin-top:10px;
}
---------------------------------------------------------------------------------------------------------
「ソースコードサンプル　ボックス」をウィキ内検索
最終更新：2012年03月31日 11:53