投稿 floatを使ってコンテンツを2列にする は 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>
.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 に最初に表示されました。
]]>投稿 floatを使ってコンテンツを3列にする は 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>
.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 に最初に表示されました。
]]>投稿 背景画像で作る可変する角丸ボックス は 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>
.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 に最初に表示されました。
]]>