投稿 サイドナビ、サイドメニューを画像で作る。 は CodingMania に最初に表示されました。
]]><div class="mod_Sidemenu002"> <h3><img src="Sidemenu_002title.jpg" width="200" height="40" alt="タイトル" /></h3> <ul> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> </ul> <!-- mod_Sidemenu002_end --></div>
.mod_Sidemenu002{
width:200px;
padding:10px;
background-color:#DDD;
}
.mod_Sidemenu002 h3{
}
.mod_Sidemenu002 ul{
border-top:solid 1px #CCC;
}
.mod_Sidemenu002 ul li{
height:40px;
overflow:hidden;
vertical-align:bottom; /* IE6で画像下の隙間削除 */
border-bottom:solid 1px #CCC;
}
.mod_Sidemenu002 ul li a{
display:block;
}
.mod_Sidemenu002 ul li a:link {text-decoration:none;}
.mod_Sidemenu002 ul li a:visited {text-decoration:none;}
.mod_Sidemenu002 ul li a:hover {margin-top:-40px;}
.mod_Sidemenu002 ul li a:active {margin-top:-40px;}
投稿 サイドナビ、サイドメニューを画像で作る。 は CodingMania に最初に表示されました。
]]>投稿 サイドナビ、サイドメニューをテキストで作る。 は CodingMania に最初に表示されました。
]]><div class="mod_Sidemenu001"> <h3>タイトル</h3> <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> <!-- mod_Sidemenu001_end --></div>
.mod_Sidemenu001{
width:200px;
padding:10px;
background-color:#DEDEDE;
}
.mod_Sidemenu001 h3{
padding:5px;
color:#FFF;
font-weight:bold;
font-size:1.4em;
background-color:#666;
}
.mod_Sidemenu001 ul{
border:solid 1px #CCC;
border-bottom:none;
}
.mod_Sidemenu001 ul li{
line-height:3.0;
border-bottom:solid 1px #CCC;
background-color:#FFF;
}
.mod_Sidemenu001 ul li.first{
border-top:solid 1px #CCC;
}
.mod_Sidemenu001 ul li a{
width:178px; /* IE6用 */
padding:0 0 0 20px;
display:block;
background:transparent url('Sidemenu_001.gif') no-repeat 5px 45% scroll;
}
.mod_Sidemenu001 ul li a:link {color:#666; text-decoration:none;}
.mod_Sidemenu001 ul li a:visited {color:#666; text-decoration:none;}
.mod_Sidemenu001 ul li a:hover {color:#666; background-color:#EEE;background-image: url('Sidemenu_001_over.gif');}
.mod_Sidemenu001 ul li a:active {color:#666; background-color:#EEE;background-image: url('Sidemenu_001_over.gif');}
投稿 サイドナビ、サイドメニューをテキストで作る。 は CodingMania に最初に表示されました。
]]>投稿 定義リストdl,dt,ddで新着リストを作る は CodingMania に最初に表示されました。
]]><div class="mod-news"> <div class="mod-news_title"> <h2><img src="press_release.gif" width="595" height="40" alt="ニュース" /></h2> <p class="mod-icon_itiran"><a href="#"><img src="ichiran.gif" width="42" height="22" alt="一覧" /></a></p> <!-- mod-news_title_end --></div> <div class="mod-news_inner"> <dl> <dt><strong>2011年02月24日</strong></dt> <dd><a href="#">記事のタイトルや詳細</a></dd> </dl> <dl> <dt><strong>2010年02月24日</strong></dt> <dd><a href="#">記事のタイトルや詳細</a></dd> </dl> <dl class="last"> <dt><strong>2010年02月24日</strong></dt> <dd><a href="#">記事のタイトルや詳細</a></dd> </dl> <!-- mod-news_inner_end --></div> <!-- mod-news_end --></div>
.mod-news{
width:595px;
padding:0 0 5px 0;
background:transparent url(news_bk_bottom.gif) no-repeat left bottom scroll;
}
.mod-news_title{
position: relative;
}
.mod-icon_itiran{
padding:0 0 0 5px;
position: absolute;
top:11px;
left:540px;
}
.mod-icon_itiran a:link {}
.mod-icon_itiran a:visited {}
.mod-icon_itiran a:hover {opacity:0.7;}
.mod-icon_itiran a:active {opacity:0.7;}
.mod-icon_itiran a:hover img{filter:alpha(opacity=70);}
.mod-news_inner{
padding:0 15px 10px 15px;
border-left: solid 1px #CCC;
border-right: solid 1px #CCC;
}
.mod-news_inner dl{
padding:10px 0 10px 0;
background:transparent url("line.gif") repeat-x left bottom scroll;
}
.mod-news_inner dl.last{
background:none;
padding-bottom:0px;
}
.mod-news_inner dd{
margin: 0 0 0 0px;
padding:0 0 0 10px;
background:transparent url('icon-link-a.gif') no-repeat 0px 6px scroll;
}
.mod-news_inner dd a:link {color:#1e2e53;}
.mod-news_inner dd a:visited {color:#1e2e53;}
.mod-news_inner dd a:hover {text-decoration:none; color:#FFF; background-color:#1e2e53;}
.mod-news_inner dd a:active {text-decoration:none; color:#FFF; background-color:#1e2e53;}
投稿 定義リストdl,dt,ddで新着リストを作る は CodingMania に最初に表示されました。
]]>投稿 CSSの背景画像と線を指定してボックスを装飾する は CodingMania に最初に表示されました。
]]><div class="mod_Midasi003"> <h2>Midasi_003：背景とボーダー付見出し</h2> <!-- mod_Midasi003_end --></div>
.mod_Midasi003{
width:698px;
padding:1px;
border:solid 1px #CCC;
}
.mod_Midasi003 h2{
padding:5px;
font-size:1.4em;
font-weight:bold;
line-height:1.7;
color:#666;
background:#EFEFEF url('Midasi_003.jpg') repeat-x bottom left scroll;
}
投稿 CSSの背景画像と線を指定してボックスを装飾する は CodingMania に最初に表示されました。
]]>投稿 CSSでテキストの先頭に画像を表示する は CodingMania に最初に表示されました。
]]><div class="mod_Midasi002"> <h2>Midasi_002：リストマークつき見出し</h2> <!-- mod_Midasi002_end --></div>
.mod_Midasi002{
}
.mod_Midasi002 h2{
min-height:23px;
height:auto!important;
height:23px;
padding:0 0 0 30px;
font-size:1.4em;
font-weight:bold;
line-height:23px;
color:#666;
background:transparent url('Midasi_002.gif') no-repeat 0 0 scroll;
}
投稿 CSSでテキストの先頭に画像を表示する は CodingMania に最初に表示されました。
]]>投稿 CSSの背景画像を指定してボックスの外枠を変える は CodingMania に最初に表示されました。
]]><div class="mod_Midasi001"> <h1>Midasi_001：外枠つき</h1> <!-- mod_Midasi001_end --></div>
.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 に最初に表示されました。
]]>投稿 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 に最初に表示されました。
]]>