投稿 画像置換でグローバルナビゲーションを作ります。 は CodingMania に最初に表示されました。
]]><div id="area_nav" class="mod_globalnav"> <ul> <li class="current-menu-item"><a class="nav01" href="#">メニュー01</a></li> <li><a class="nav02" href="#">メニュー02</a></li> <li><a class="nav03" href="#">メニュー03</a></li> <li><a class="nav04" href="#">メニュー04</a></li> <li><a class="nav05" href="#">メニュー05</a></li> </ul> <!--mod_globalnav_end--></div>
/* mod_globalnav 画像置換
-----------------------------------------*/
.mod_globalnav{
height:45px;
}
.mod_globalnav ul{
margin:0 auto;
width:750px;
height:45px;
overflow:hidden;
position:relative;
}
.mod_globalnav ul li{
float:left;
width:150px;
height:45px;
overflow:hidden;
}
.mod_globalnav ul li a{
display:block;
height:45px;
text-indent: -9999px;
background-image: url('bg_globalnav.jpg');
background-repeat:no-repeat;
}
.mod_globalnav ul li a.nav01{background-position:0px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav01,
.mod_globalnav ul li a.nav01:hover{background-position:0px -45px;}
.mod_globalnav ul li a.nav02{background-position:-150px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav02,
.mod_globalnav ul li a.nav02:hover{background-position:-150px -45px;}
.mod_globalnav ul li a.nav03{background-position:-300px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav03,
.mod_globalnav ul li a.nav03:hover{background-position:-300px -45px;}
.mod_globalnav ul li a.nav04{background-position:-450px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav04,
.mod_globalnav ul li a.nav04:hover{background-position:-450px -45px;}
.mod_globalnav ul li a.nav05{background-position:-600px 0px; width:150px;}
.mod_globalnav ul li.current-menu-item a.nav05,
.mod_globalnav ul li a.nav05:hover{background-position:-600px -45px;}
投稿 画像置換でグローバルナビゲーションを作ります。 は CodingMania に最初に表示されました。
]]>投稿 jquery tile.jsでグリッドの高さを揃えます は CodingMania に最初に表示されました。
]]>
<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>
<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>
.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 に最初に表示されました。
]]>投稿 CSSの背景画像をjqueryで1xpづつ上に動かしてループします は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/move.js"></script>
$(function(){
//初期設定
$('#sp_move').css("background-position","0px 0px");
//背景画像の高幅
var bkimgH=2000;
//背景画像のポジション位置(高さ)
var posY=0;
var timerID=setInterval(function(){
//ポジション位置を1PXずつあげる
posY+=1;
if(posY>=bkimgH){posY=0}
$('#sp_move').css("background-position","0px "+posY+"px");
},10);
});
<div id="sp_move"> <img src="img/title.png" width="404" height="363" /> <!--sp_move_end--></div>
#sp_move{
width:404px;
height:363px;
overflow:hidden;/* IE67下部隙間対策 */
background:transparent url('img/Gradation.jpg') repeat scroll;
}
投稿 CSSの背景画像をjqueryで1xpづつ上に動かしてループします は CodingMania に最初に表示されました。
]]>投稿 箇条書きリストを入れ子にしてCSSで階層を表示 は CodingMania に最初に表示されました。
]]>
<div class="mod_List0002">
<ul>
<li>1階層の文章が入ります。
<ul><li>2階層の文章が入ります。</li>
<li>2階層の文章が入ります。</li>
<li>2階層の文章が入ります。</li>
<li>2階層の文章が入ります。
<ul><li>3階層の文章が入ります。</li>
<li>3階層の文章が入ります。</li>
<li>3階層の文章が入ります。</li>
<li>3階層の文章が入ります。
<ul><li>4階層の文章が入ります。</li>
<li>4階層の文章が入ります。</li>
<li>4階層の文章が入ります。</li>
<li>4階層の文章が入ります。
<ul><li>5階層の文章が入ります。
<ul><li>6階層の文章が入ります。
</li><!--6_end--></ul>
</li><!--5_end--></ul>
</li><!--4_end--></ul>
</li><!--3_end--></ul>
</li><!--2_end--></ul>
</li>
<li>1階層の文章が入ります。</li><!--1_end--></ul>
<!-- mod_List0002_end --></div>
.mod_List0002 ul li{
/* リストマーカー画像切れ防止。最低高さを確保 */
min-height:12px;
height:auto!important;
height:12px;
line-height:1;
margin:0;
padding:5px 0 0 15px;
background:transparent url('img/marker.gif') no-repeat left 0.5em scroll;
}
/* 2階層以降 */
.mod_List0002 ul li ul li{
background:transparent url('img/marker_middle.gif') no-repeat left -0.2em scroll;
margin-left:5px;
}
/* リスト最終行 */
.mod_List0002 ul li ul li:last-child {
background:transparent url('img/marker_last.gif') no-repeat left -0.2em scroll;
}
投稿 箇条書きリストを入れ子にしてCSSで階層を表示 は CodingMania に最初に表示されました。
]]>投稿 箇条書きリストを入れ子・階層にしてCSSで番号マーカーを表示 は CodingMania に最初に表示されました。
]]>
<div class="mod_List0001">
<ul>
<li>1階層の文章が入ります。
<ul><li>2階層の文章が入ります。
<ul><li>3階層の文章が入ります。
<ul><li>4階層の文章が入ります。
<ul><li>5階層の文章が入ります。
<ul><li>6階層の文章が入ります。
</li><!--6_end--></ul>
</li><!--5_end--></ul>
</li><!--4_end--></ul>
</li><!--3_end--></ul>
</li><!--2_end--></ul>
</li>
<li>1階層の文章が入ります。</li><!--1_end--></ul>
<!-- mod_List001_end --></div>
.mod_List0001 ul li{
/* リストマーカー画像切れ防止。最低高さを確保 */
min-height:12px;
height:auto!important;
height:12px;
margin:0 0 0em 0;
padding:0 0 0 15px;
background:transparent url('img/one.gif') no-repeat left 0.2em scroll;
}
/* 2階層目 */
.mod_List0001 ul li ul li{
background:transparent url('img/two.gif') no-repeat left 0.2em scroll;
}
/* 3階層目 */
.mod_List0001 ul li ul li ul li{
background:transparent url('img/three.gif') no-repeat left 0.2em scroll;
}
/* 4階層目 */
.mod_List0001 ul li ul li ul li ul li{
background:transparent url('img/four.gif') no-repeat left 0.2em scroll;
}
/* 5階層目 */
.mod_List0001 ul li ul li ul li ul li ul li{
background:transparent url('img/five.gif') no-repeat left 0.2em scroll;
}
/* 6階層目 */
.mod_List0001 ul li ul li ul li ul li ul li ul li{
background:transparent url('img/six.gif') no-repeat left 0.2em scroll;
}
投稿 箇条書きリストを入れ子・階層にしてCSSで番号マーカーを表示 は CodingMania に最初に表示されました。
]]>投稿 リンクするファイル・拡張子を区別してファイルアイコンを自動で表示 は CodingMania に最初に表示されました。
]]><p><a href="sample.pdf" target="_blank">PDFへリンク</a></p> <p><a href="sample.doc" target="_blank">Wordへリンク</a></p> <p><a href="sample.xls" target="_blank">Excelへリンク</a></p> <p><a href="sample.pps" target="_blank">PowerPintファイルへリンク</a></p> <p><a href="sample.zip" target="_blank">zipファイルへリンク</a></p> <p><a href="sample.exe" target="_blank">zipファイルへリンク</a></p>
a[href$=".pdf"] {
min-height:16px;
height:auto!important;
height:16px;
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
a[href$=".doc"] {
min-height:16px;
height:auto!important;
height:16px;
padding-right: 18px;
background: transparent url(icon_doc.gif) no-repeat center right;
}
a[href$=".xls"] {
min-height:16px;
height:auto!important;
height:16px;
padding-right: 18px;
background: transparent url(icon_xls.gif) no-repeat center right;
}
a[href$=".pps"] {
min-height:16px;
height:auto!important;
height:16px;
padding-right: 18px;
background: transparent url(icon_pps.gif) no-repeat center right;
}
a[href$=".zip"] {
min-height:16px;
height:auto!important;
height:16px;
padding-right: 18px;
background: transparent url(icon_zip.gif) no-repeat center right;
}
a[href$=".exe"] {
min-height:16px;
height:auto!important;
height:16px;
padding-right: 18px;
background: transparent url(icon_exe.gif) no-repeat center right;
}
投稿 リンクするファイル・拡張子を区別してファイルアイコンを自動で表示 は 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 に最初に表示されました。
]]>投稿 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 に最初に表示されました。
]]>投稿 定義リストで作る、用語とその説明 は CodingMania に最初に表示されました。
]]><div class="mod_List010"> <dl> <dt>定義リストは必要ですか？</dt> <dd>はい、必要です。それはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですね</dd> <dt>定義リストは必要ですか？</dt> <dd>はい、必要です。それはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですね</dd> <dt>定義リストは必要ですか？</dt> <dd>はい、必要です。それはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですねそれはですね</dd> </dl> <!--mod_List010_end--></div>
.mod_List010 dt{
min-height:21px;
height:auto!important;
height:21px;
margin:14px 0 0 0;
padding:0 0 8px 30px;
font-weight:bold;
font-size:110%;
background:transparent url('Q_icon.gif') no-repeat top left scroll;
}
.mod_List010 dd{
padding:10px;
border:solid 1px #999;
background-color:#FFFFCC;
}
投稿 定義リストで作る、用語とその説明 は CodingMania に最初に表示されました。
]]>