投稿 CSSでリストの間にだけ線を引く。 は CodingMania に最初に表示されました。
]]><p>【縦バージョン】</p> <div class="mod_style01"> <ul> <li><a href="#">サイトマップ</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">お問い合わせ</a></li> </ul> <!--mod_mod_style01_end--></div> <p> </p> <p>【横バージョン】</p> <div class="mod_style02"> <ul> <li><a href="#">サイトマップ</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">お問い合わせ</a></li> </ul> <!--mod_style02_end--></div>
/* mod_style01
-----------------------------------------*/
.mod_style01{
width:300px;
}
.mod_style01 ul{
zoom: 1;
overflow: hidden;
}
.mod_style01 ul li{
margin-top: -1px;
padding: 5px;
border-top: 1px solid #666666;
}
/* mod_style02
-----------------------------------------*/
.mod_style02 ul {
/*float: right;*/
zoom: 1;
overflow: hidden;
}
.mod_style02 ul li {
display: inline;
margin: 0 0 0 -1px;
padding: 0 6px 0 6px;
border-left: solid 1px #666;
}
投稿 CSSでリストの間にだけ線を引く。 は CodingMania に最初に表示されました。
]]>投稿 CSSの背景色を使ってマウスオーバー時、画像に枠をつける。 は CodingMania に最初に表示されました。
]]><div class="mod_Rollover001"> <p><a href="#"><img src="photoimage.jpg" width="220" height="124"></a></p> <!--mod_Rollover001_end--></div>
.mod_Rollover001 a{
width:220px;
height:124px;
padding:9px;
display:block;
border:1px solid #999;
background:#FFF;
}
.mod_Rollover001 a:link {}
.mod_Rollover001 a:visited {}
.mod_Rollover001 a:hover {background:#666;}
.mod_Rollover001 a:active {background:#666;}
投稿 CSSの背景色を使ってマウスオーバー時、画像に枠をつける。 は CodingMania に最初に表示されました。
]]>投稿 定義リストで作る、用語とその説明[質問と答え] は CodingMania に最初に表示されました。
]]><div class="mod_qalist"> <dl> <dt><strong>質問はこちらでよろしいでしょうか？</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd> </dl> <dl> <dt><strong>質問はこちらでよろしいでしょうか？</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd> </dl> <dl> <dt><strong>質問はこちらでよろしいでしょうか？<br /> 改行しました。<br /> さらに改行しました。</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。</dd> </dl> <dl> <dt><strong>質問はこちらでよろしいでしょうか？</strong></dt> <dd>はい、お答えいたします。はい、お答えいたします。はい、お答えいたします。<br /> 改行しましたよ。</dd> </dl> <!-- mod_qalist_end --></div>
.mod_qalist dl{
padding:5px;
border-bottom:solid 1px #819744;
}
.mod_qalist dt{
min-height:50px;
height:auto!important;
height:50px;
margin:20px 0 0 0;
padding:0 0 0 60px;
font-weight:bold;
background:transparent url('q.jpg') no-repeat top left scroll;
}
.mod_qalist dd{
min-height:50px;
height:auto!important;
height:50px;
margin:10px 0 0 20px;
padding:0 0 0 60px;
background:transparent url('a.jpg') no-repeat top left scroll;
}
投稿 定義リストで作る、用語とその説明[質問と答え] は 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 に最初に表示されました。
]]>