<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tile.js"></script>
<script type="text/javascript">
$(window).load(function() {
  $(".mod_grid3hBox_inner").tile(3);
});
</script>

HTMl

<div class="mod_grid3hBox">

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_grid3Box_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_grid3hBox_inner_end --></div>

<!-- mod_grid3hBox_end --></div>

CSS

.mod_grid3hBox{
	width:720px;
	margin-right:-20px;
}
.mod_grid3hBox_inner{
	width:220px;
	float:left;
	margin:0 20px 10px 0;
	background-color:#FFFFCC;
}
.mod_grid3hBox_inner h3{
	font-weight: bold;
	font-size: 1.4em;
	border-bottom:double 3px #000;
	margin:0 0 5px 0;
}
.mod_grid3hBox_inner p.mod_caption{
	color:#666;
	padding:0 0 5px 0;
}

投稿 jquery tile.jsでグリッドの高さを揃えます は CodingMania に最初に表示されました。

<div class="mod_Midasi001">
<h1>Midasi_001：外枠つき</h1>
<!-- mod_Midasi001_end --></div>

CSS

.mod_Midasi001{
	width:700px;
	padding:5px;
	background:transparent url('Midasi_001.gif') repeat scroll;
}
.mod_Midasi001 h1{
	padding: 5px;
	font-size:1.4em;
	font-weight:bold;
	color:#666;
	background-color:#FFF;
}

投稿 CSSの背景画像を指定してボックスの外枠を変える は CodingMania に最初に表示されました。

<div class="mod_Grid2Box ex-clearfix">

<div class="mod_Grid2Box_inner">
<h3>タイトル</h3>
<div class="mod_Grid2Box_inner_figure">
<img src="Grid_003.gif" width="150" height="132" alt="写真" />
<p class="mod_caption">キャプション</p>
<!-- mod_Grid2Box_inner_figure_end --></div>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid2Box_inner_end --></div>

<div class="mod_Grid2Box_inner">
<h3>タイトル</h3>
<div class="mod_Grid2Box_inner_figure">
<img src="Grid_003.gif" width="150" height="132" alt="写真" />
<p class="mod_caption">キャプション<br />
改行してみました。</p>
<!-- mod_Grid2Box_inner_figure_end --></div>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid2Box_inner_end --></div>

<!--mod_Grid2Box_end --></div>

CSS

.mod_Grid2Box{
	width:720px;
	margin-right:-20px;
}
.mod_Grid2Box_inner{
	width:340px;
	float:left;
	margin:0 20px 10px 0;
}
.mod_Grid2Box_inner_figure{
	width:150px;
	float:left;
	margin:0 20px 5px 0;
}
.mod_Grid2Box_inner h3{
	margin:0 0 5px 0;
	font-weight: bold;
	font-size: 1.4em;
	border-bottom:double 3px #000;
}
.mod_caption{
	color:#666;
}

投稿 floatを使ってコンテンツを2列にする は CodingMania に最初に表示されました。

<div class="mod_Grid3Box ex_clearfix">

<div class="mod_Grid3Box_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid3Box_inner_end --></div>

<div class="mod_Grid3Box_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid3Box_inner_end --></div>

<div class="mod_Grid3Box_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_Grid3Box_inner_end --></div>

<!-- mod_Grid3Box_end --></div>

CSS

.mod_Grid3Box{
	width:720px;
	margin-right:-20px;
}
.mod_Grid3Box_inner{
	width:220px;
	float:left;
	margin:0 20px 10px 0;
}
.mod_Grid3Box_inner h3{
	font-weight: bold;
	font-size: 1.4em;
	border-bottom:double 3px #000;
	margin:0 0 5px 0;
}
.mod_Grid3Box_inner p.mod_caption{
	color:#666;
	padding:0 0 5px 0;
}

投稿 floatを使ってコンテンツを3列にする は CodingMania に最初に表示されました。

<div class="mod_Banner002">
<ul>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_002.gif" width="200" height="120" alt="バナー" /></a></li>
</ul>
<!-- mod_Banner002_end --></div>

CSS

.mod_Banner002{
	width:200px;
	padding:10px;
	background-color:#EEE;
}
.mod_Banner002 ul{
	margin-bottom:-5px;
}
.mod_Banner002 li{
	width:200px;
	height:60px;
	vertical-align:bottom; /* IE6で画像下の隙間削除 */
	margin:0 0 5px 0;
	overflow:hidden;
}
.mod_Banner002 li a{
	display:block;
}
.mod_Banner002 li a:link    {}
.mod_Banner002 li a:visited {}
.mod_Banner002 li a:hover   {margin-top:-60px;}
.mod_Banner002 li a:active  {margin-top:-60px;}

投稿 liで作る画像縦並びのバナーリスト は CodingMania に最初に表示されました。

<div class="mod_Banner001">
<ul class="ex_clearfix">
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
</ul>
<!-- mod_Banner001_end --></div>

CSS

.mod_Banner001{
	width:700px;
	background-color:#EEE;
}
.mod_Banner001 ul{
	width:720px;
	margin-right:-20px;
}
.mod_Banner001 li{
	width:220px;
	height:60px;
	float:left;
	padding:0 20px 0px 0;
	margin:0 0 10px 0;
	overflow:hidden;
}
.mod_Banner001 li a{
	display:block;
}
.mod_Banner001 li a:link    {}
.mod_Banner001 li a:visited {}
.mod_Banner001 li a:hover   {margin-top:-60px;}
.mod_Banner001 li a:active  {margin-top:-60px;}

投稿 liで作る横並び（3列）のバナーリスト は CodingMania に最初に表示されました。

<div class="mod_Kadomaru001">
<span class="mod_Kadomaru001_topleft"></span>
<span class="mod_Kadomaru001_topright"></span>
<!-- ↓ここからコンテンツ -->
<h2>タイトル</h2>
<p>幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。</p> 
<!-- ↑ここまでコンテンツ -->
<span class="mod_Kadomaru001_bottomleft"></span>
<span class="mod_Kadomaru001_bottomright"></span>
<!-- mod_Kadomaru001_end --></div>

CSS

.mod_Kadomaru001{
	width:220px; /* 横幅 */
	padding:15px;
	position: relative;
	background-color: #DDD;
}
.mod_Kadomaru001 h2{
	font-weight:bold;
}

/* 上左画像 */
.mod_Kadomaru001_topleft{
	width:15px;
	height:15px;
	position: absolute;
	top:0;
	left:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat top left;
}
/* 上右画像 */
.mod_Kadomaru001_topright{
	width:15px;
	height:15px;
	position: absolute;
	top:0;
	right:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat top right;
}
/* 下左画像 */
.mod_Kadomaru001_bottomleft{
	width:15px;
	height:15px;
	position: absolute;
	bottom:0;
	left:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat bottom left;
}
/* 下右画像 */
.mod_Kadomaru001_bottomright{
	width:15px;
	height:15px;
	position: absolute;
	bottom:0;
	right:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat bottom right;
}

投稿 背景画像で作る可変する角丸ボックス は CodingMania に最初に表示されました。