投稿 ヘッダー上部固定でアンカーリンクがずれるのを解消する は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script>
//header
$(function() {
var marginTop = $(".mod_header").height();
$(window).on("scroll", function() {
if ($(this).scrollTop() > 0) {
$(".mod_header").addClass("fixed");
$("body").css("margin-top",marginTop+"px");
} else {
$(".mod_header").removeClass("fixed");
$("body").css("margin-top","0px");
}
});
});
//#pagelink
$(function() {
var H_nav = $(".mod_header").height();
function pagelink(heightnum) {
var headerH = heightnum;
$("a.anchorlink").click(function() {
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? "body" : href);
var position = target.offset().top - headerH;
$("html, body").animate({ scrollTop: position }, 500, "swing");
//return false;
});
/* outpagelink */
var url = $(location).attr("href");
if (url.indexOf("#") != -1) {
var url_sp = url.split("#");
var hash = "#" + url_sp[url_sp.length - 1];
var target = $(hash);
var position = target.offset().top - headerH;
$("html, body").animate({ scrollTop: position }, 500, "swing");
}
}
//条件が変わるようならココへ。
// if($("body").hasClass("spn")){
// pagelink(50);
// }else{
// pagelink(72);
// }
pagelink(H_nav);
});
<div class="mod_linklist"> <ul> <li><a class="anchorlink" href="#area01">エリア01<i class="fa fa-angle-down"></i></a></li> <li><a class="anchorlink" href="#area02">エリア02<i class="fa fa-angle-down"></i></a></li> <li><a class="anchorlink" href="#area03">エリア03<i class="fa fa-angle-down"></i></a></li> <li><a class="anchorlink" href="#area04">エリア04<i class="fa fa-angle-down"></i></a></li> <li><a class="anchorlink" href="#area05">エリア05<i class="fa fa-angle-down"></i></a></li> <li><a class="anchorlink" href="02.html#area03">【ページ02】エリア03<i class="fa fa-external-link"></i></a></li> </ul> </div> <section id="area01"> <h2>エリア01</h2> <p>私は昔どうもその反抗学というののために解りただ。初めてほかが指図院はどうぞこの相違ないませまでにつかからもらっですをは徹底知れなでしょて、それだけにもいただであり。新が云っんのは必ずしも場合にどうもですだた。いかに嘉納さんに記憶国家それほどごろごろへ断わろまし鼻その本何か持にというご尊重ありましないでと、この十一月はおれか理由考が云わて、三宅さんの事を教授の私がようやくご安心と行かて私主義のお相当で当てようにもしご誘惑を云いですたから、ついにもし影響を帰っますがいるた事を正さたたい。つまりまたご主義を立ち入り点はああ立派と当てでしから、その麦飯をは知れだがという個人が認めてくれるでまし。</p> </section>
投稿 ヘッダー上部固定でアンカーリンクがずれるのを解消する は CodingMania に最初に表示されました。
]]>投稿 マウスオーバーするとtransitionを使って右へ文字を寄せます は CodingMania に最初に表示されました。
]]><div class="mod_menulist"> <ul> <li><a href="#"><span>Before selecting lighting</span></a></li> <li><a href="#">Lighting basics</a></li> <li><a href="#">The light required for each room</a></li> <li><a href="#">The psychological impressions due to changes in light color(color temperature)</a></li> <li><a href="#">Applying the impact of light</a></li> <li><a href="#">The workings and differences of lights</a></li> <li><a href="#">Types of light sources</a></li> <li><a href="#">Features of principal light sources</a></li> <li><a href="#">Styles of lights</a></li> <li><a href="#">Types and features of principal lighting fixtures</a></li> </ul> <!-- / .mod_menulist --></div>
/* mod_menulist
-----------------------------------------*/
.mod_menulist{
margin:0 20px 0 20px!important;
}
.mod_menulist ul{
}
.mod_menulist ul li{
display:block;
line-height:1.3!important;
}
.mod_menulist ul li a{
display:table;
width:100%;
box-sizing:border-box;
padding:12px 12px 5px 12px!important;
-ms-transition:all 0.3s linear 0s;
-moz-transition:all 0.3s linear 0s;
-webkit-transition:all 0.3s linear 0s;
transition:all 0.3s linear 0s;
border-bottom:solid 1px #dfdfdf!important;
}
.mod_menulist ul li a:before{
font-family: 'FontAwesome';
content: "\f105";
font-size:18px!important;
color:#666666;
font-weight:bold;
display:table-cell;
vertical-align:middle;
line-height:1;
width:15px;
padding:0 14px 5px 12px!important;
}
.mod_menulist ul li a:hover{}
.mod_menulist ul li a:link {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:visited {color:#000; text-decoration:none!important;}
.mod_menulist ul li a:hover {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}
.mod_menulist ul li a:active {color:#00a0c6; background-color:#ebebeb; text-decoration:none!important; padding-left:18px!important;}
投稿 マウスオーバーするとtransitionを使って右へ文字を寄せます は CodingMania に最初に表示されました。
]]>投稿 マウスオーバーするとtransitionを使ってborderを太くします は CodingMania に最初に表示されました。
]]><div class="mod_btn"> <p><a href="#">会社概要へ</a></p> <!-- / .mod_btn --></div> <div class="mod_btn"> <p><a href="#">トップページへ戻る</a></p> <!-- / .mod_btn --></div> <div class="mod_btn mod_btn-center"> <p><a href="#">文字が長くなったりセンター位置にしてみたり</a></p> <!-- / .mod_btn --></div>
/* mod_btn
-----------------------------------------*/
.mod_btn{
margin:10px 0 10px 0;
}
.mod_btn-center{
text-align:center;
}
.mod_btn p{
border:solid 1px #E73582;
display:inline-block;
}
.mod_btn p a{
display:block;
padding:10px 10px 10px 10px;
color:#E73582;
font-size:13px;
-ms-transition:all 0.3s ease 0s;
-moz-transition:all 0.3s linear 0s;
-webkit-transition:all 0.3s linear 0s;
transition:all 0.3s linear 0s;
border:solid 3px #FFF;
}
.mod_btn p a:after{
font-family: 'FontAwesome';
content: "\f101";
display:inline-block;
padding:0 0 0 10px;
}
.mod_btn p a:link {color:#E73582; text-decoration:none;}
.mod_btn p a:visited {color:#E73582; text-decoration:none;}
.mod_btn p a:hover {color:#E73582; text-decoration:none; border:solid 3px #E73582;}
.mod_btn p a:active {color:#E73582; text-decoration:none; border:solid 3px #E73582;}
投稿 マウスオーバーするとtransitionを使ってborderを太くします は CodingMania に最初に表示されました。
]]>投稿 サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。 は 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/swapimage.js"></script>
$(function(){
$(".mod_thumbnail").each(function(){
var set = $(this);
var btn = set.find(".thumbnaillist li img");
var image = set.find(".mainimglist img");
// hover時
$(btn).hover(function(){
var imagesrc=$(this).attr("class");
$(image).attr("src","img/"+imagesrc+".jpg").fadeIn();
$(image).attr("alt",$(this).attr("title"));
});
});
});
<div class="mod_thumbnail"> <div class="thumbnaillist"> <ul class="ex_clearfix"> <li><a href="https://codingmania.net/" title="orange"><img class="image01" src="img/img01.jpg"></a></li> <li><a href="https://www.google.co.jp/" title="green"><img class="image02" src="img/img02.jpg"></a></li> <li><a href="http://www.yahoo.co.jp/" title="pink"><img class="image03" src="img/img03.jpg"></a></li> <li><a href="http://www.amazon.co.jp/" title="blue"><img class="image04" src="img/img04.jpg"></a></li> </ul> <!-- thumbnaillist_end --></div> <div class="mainimglist"> <img src="img/image01.jpg" alt="orange"> <!-- mainimglist_end --></div> <!-- mod_thumbnail_end --></div>
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
margin:10px 0 0 0;
}
.thumbnaillist ul{
}
.thumbnaillist li{
width:60px;
height:auto;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.thumbnaillist li img{
width:60px;
height:auto;
}
.thumbnaillist li a{
display:block;
}
.thumbnaillist li a:link {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover {opacity:0.8;}
.thumbnaillist li a:active {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
width:700px;
height:350px;
margin:0 0 0 0;
}
.mainimglist img{
}
/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}
.ex_clearfix {
min-height: 1px;
}
* html .ex_clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
投稿 サムネイル画像のマウスオーバーで画像を大きく表示、クリックするとリンク先とびます。 は CodingMania に最初に表示されました。
]]>投稿 擬似要素を使って長さに対応するボタンを作ります。 は CodingMania に最初に表示されました。
]]><p class="ex_linkbtn"> <a href="#"><span>Click!!</span></a> </p>
p.ex_linkbtn {
display: inline-block;
height: 34px;
font-size: 14px;
font-weight: bold;
}
p.ex_linkbtn a {
display:inline-block;
margin: 0 25px 0 10px;
background:transparent url('img/bg_middle.png') repeat-x left top;
height: 34px;
color: #EEE;
text-decoration:none;
}
p.ex_linkbtn a span{
display:inline-block;
padding:0 10px 0 0;
}
p.ex_linkbtn a:before, .ex_linkbtn a:after {
display: inline-block;
content: "";
height: 34px;
background-repeat: no-repeat;
vertical-align: middle;
}
p.ex_linkbtn a:before {
margin-left: -10px;
width : 10px;
height : 34px;
background:transparent url('img/bg_left.png') no-repeat left top;
}
p.ex_linkbtn a:after {
margin-right: -20px;
width : 20px;
height : 34px;
background:transparent url('img/bg_right.png') no-repeat left top;
}
/* hover */
p.ex_linkbtn a:hover {
background:transparent url('img/bg_middle_on.png') repeat-x left top;
}
p.ex_linkbtn a:hover:before {
background:transparent url('img/bg_left_on.png') no-repeat left top;
}
p.ex_linkbtn a:hover:after {
background:transparent url('img/bg_right_on.png') no-repeat left top;
}
投稿 擬似要素を使って長さに対応するボタンを作ります。 は CodingMania に最初に表示されました。
]]>投稿 サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は 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/swapimage.js"></script>
$(function(){
$(".mod_thumbnail").each(function(){
var set = $(this);
var btn = set.find(".thumbnaillist li a");
var image = set.find(".mainimglist img");
// hover時
$(btn).hover(function(){
$(image).attr("src",$(this).attr("href"));
$(image).attr("alt",$(this).attr("title"));
});
//クリック時
$(".thumbnaillist a").click(function(){
return false;
});
});
});
<div class="mod_thumbnail"> <div class="thumbnaillist"> <ul class="ex_clearfix"> <li><a href="img/image01.jpg" title="orange"><img src="img/thumbnail01.jpg" width="60" height="60"></a></li> <li><a href="img/image02.jpg" title="green"><img src="img/thumbnail02.jpg" width="60" height="60"></a></li> <li><a href="img/image03.jpg" title="pink"><img src="img/thumbnail03.jpg" width="60" height="60"></a></li> <li><a href="img/image04.jpg" title="blue"><img src="img/thumbnail04.jpg" width="60" height="60"></a></li> </ul> <!-- thumbnaillist_end --></div> <div class="mainimglist"> <img src="img/image01.jpg" alt="orange" width="700" height="350"> <!-- mainimglist_end --></div> <!-- mod_thumbnail_end --></div>
/* mod_thumbnail
--------------------------------------------*/
.mod_thumbnail{
margin:0 0 30px 0;
}
/* サムネイル画像表示（thumbnaillist）
-----------------------------------------*/
.thumbnaillist{
}
.thumbnaillist ul{
}
.thumbnaillist li{
width:60px;
height:60px;
float:left;
background:none;
padding:0 10px 0px 0;
margin:0 0 10px 0;
}
.thumbnaillist li a{
display:block;
}
.thumbnaillist li a:link {}
.thumbnaillist li a:visited {}
.thumbnaillist li a:hover {opacity:0.8;}
.thumbnaillist li a:active {opacity:0.8;}
/* IE用 ↓*/
.thumbnaillist li a:hover img {filter:alpha(opacity=80);}
/* メイン画像表示（mod_mainimglist）
-----------------------------------------*/
.mainimglist{
width:700px;
height:350px;
margin:20px 0 0 0;
}
.mainimglist img{
}
投稿 サムネイルの画像をマウスオーバーで拡大・切り替え・表示します！ は 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 に最初に表示されました。
]]>投稿 target=”_blank”の指定があるa要素に自動で別窓アイコンを表示します は CodingMania に最初に表示されました。
]]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/icon.js"></script>
$(function(){
$("a[target=_blank]").addClass("ex_blank");
$("a[target=_blank]:has(img)").removeClass("ex_blank");
});
<p>セロは一かも楽器のように出してやっな。<a href="#" target="_blank">別窓へのリンク</a>舌はセロキャベジたりおれをおくれて行っです。</p> <p><a target="_blank" href="http://www.yahoo.co.jp/"><img src="banner.gif" width="200" height="70" alt="Google" /></a></p>
a.ex_blank {
min-height:13px;
height:auto!important;
height:13px;
padding-right: 18px;
background: transparent url(icon_blank.gif) no-repeat center right;
}
投稿 target=”_blank”の指定があるa要素に自動で別窓アイコンを表示します は CodingMania に最初に表示されました。
]]>投稿 CSSでツールチップを表示します。 は CodingMania に最初に表示されました。
]]><p>ツールチップ表示の<a href="#" class="tooltip"><span>ここにツールチップテキストをいれる</span>デモリンクはここ</a>です。<br /> ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。<br /> ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。</p>
/* リンクスタイル設定 */
a.tooltip:link{color:#000;}
a.tooltip:visited{color:#000;}
a.tooltip:hover{color:#FFF; background-color:#690; text-decoration:none; position:relative;}
a.tooltip:active{color:#FFF; background-color:#690; text-decoration:none;}
/* ツールチップスタイル設定 */
a.tooltip span{
display:none;
}
a.tooltip:hover span{
display:block;
position:absolute;
top:25px;
left:20px;
white-space:nowrap;/* 折り返し無し */
color:#000;
text-decoration:none;
line-height:1.2;
border:#690 solid 2px;
background-color:#FFC;
padding:5px;
}
投稿 CSSでツールチップを表示します。 は CodingMania に最初に表示されました。
]]>