WEBデザインの勉強
WEBデザインの勉強をしながら、作成したものや、調べた内容を載せていきます。
2013-01-06T01:17:05+09:00
cafemocha
忍者ブログ
cafemocha7.gjgd.net://entry/11
2013-02-08T01:04:28+09:00
2013-02-08T01:04:28+09:00
【jquery】ブロック状に繰り返し画像が開くslider(coinslider)
サンプルはこちら
１．zipファイルダウンロードします
ダウンロード(coin-slider)
２．下記２つを取得します
coin-slider.min.js
coin-slider-styles.css
３．画像を配置します、画像の指定
<div id="coin">
<img src="images/a1.jpg" alt="" />
<img src="images/a2.jpg" alt="" />
<img src="images/a3.jpg" alt="" />
<img src="images/a4.jpg" alt="" />
<img src="images/a5.jpg" alt="" />
</div>
４．ｊｓとcssコード
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/coin-slider-styles.css" />
<script>$(document).ready(function() {
$('#coin').coinslider({ hoverPause: false });
});
< /script>
５．coin-slider.min.js の書換え （最後の行の、最後の方）
width:100,
height:190,
spw:15,
sph:5,
delay:3000,
sDelay:20,
opacity:0.7,
titleSpeed:500,
effect:'rain',navigation:true,links:true,hoverPause:true};})(jQuery);
]]>
cafemocha
cafemocha7.gjgd.net://entry/10
2013-01-31T00:45:16+09:00
2013-01-31T00:45:16+09:00
【jquery】jQuery Easing Pluginの使い方(jQuery Cycle Plugin)
jQuery Easing Plugin 取得
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$('#scrolldown').cycle({
fx: 'scrollDown',
easing: 'easeOutBounce',
delay: -2000
});
</script>
<!-- 【画像の配置】 -->
<div id="cycle">
<img src="./images/image1.jpg" width="100" height="100" alt="" />
<img src="./images/image2.jpg" width="100" height="100" alt="" />
<img src="./images/image3.jpg" width="100" height="100" alt="" />
</div>
＞＞＞＞＞＞＞＞＞＞
#%E:115%#サンプル【６】#%E:224%#
]]>
cafemocha
cafemocha7.gjgd.net://entry/9
2013-01-31T00:13:13+09:00
2013-01-31T00:13:13+09:00
【jquery】jQuery Cycle Pluginの使い方
jQuery Cycle Plugin 取得
※jQuery必須⇒こちらから
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#cycle').cycle();
});
</script>
<!-- 【画像の配置】 -->
<div id="cycle">
<img src="./images/image1.jpg" width="100" height="100" alt="" />
<img src="./images/image2.jpg" width="100" height="100" alt="" />
<img src="./images/image3.jpg" width="100" height="100" alt="" />
</div>
＞＞＞＞＞＞＞＞＞＞
#%E:1%#サンプル
]]>
cafemocha
cafemocha7.gjgd.net://entry/8
2013-01-31T00:07:17+09:00
2013-01-31T00:07:17+09:00
【jquery】jQueryを使うには
#%E:154%#jQuery公式サイト の ダウンロードページ#%E:224%#
ファイルをダウンロードし、自分のブログや、レンタルサーバに配置します
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
#%E:155%#リンクを指定するだけの方法
CDN（Contents Delivery Network）、コンテンツデリバリーネットワークを使う方法
Google Ajax API CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
※SSL（https://）でも可能
]]>
cafemocha
cafemocha7.gjgd.net://entry/7
2013-01-18T01:52:27+09:00
2013-01-18T01:52:27+09:00
カラーピッカー(Color Picker)
http://www.intelliance.fr/jquery/color_picker/
]]>
cafemocha
cafemocha7.gjgd.net://entry/6
2013-01-17T03:01:35+09:00
2013-01-17T03:01:35+09:00
【javascript】アンカーをクリックし画像の表示／非表示を切り替える
２．画像表示
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../common/js/jquery-1.7.1.min.js"></script>
<style>
#box{
display:none;
}
</style>
<script type="text/javascript">
<!--
var i=0;
function disp(){
if(i%2==0)
document.getElementById("box").style.display="block";
else
document.getElementById("box").style.display="none";
i++;
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="javascript:disp();">クリック表示/非表示</a>
<div id="box">
<img src="./t01.jpg">
</div>
</body>
</html>
]]>
cafemocha
cafemocha7.gjgd.net://entry/5
2013-01-17T02:30:46+09:00
2013-01-17T02:30:46+09:00
ハイパーリンクの色指定
a { color: #555555; }
初期表示
a:link{ color: #FF0000; }
未訪問であるハイパーリンクの色指定
a:visited{ color: #FF0000; }
訪問済みであるハイパーリンクの色指定
a:hover{ color: #FF0000; }
マウスポイント時のハイパーリンクの色指定
a:active{ color: #FF0000; }
選択中であるハイパーリンクの色指定
a:focus{ color: #FF0000; }
フォーカス時(テキストエリア等)のハイパーリンクの色指定
]]>
cafemocha
cafemocha7.gjgd.net://entry/4
2013-01-10T15:19:46+09:00
2013-01-10T15:19:46+09:00
SEO対策テスト
http://seocheki.net/
チェックしたいURLを入力してあげれば良いだけ。
※SEO対策っていうけど、お金かけないと、単語によっては、トップにはいけないのは常識
]]>
cafemocha
cafemocha7.gjgd.net://entry/3
2013-01-09T23:47:11+09:00
2013-01-09T23:47:11+09:00
ニュースティッカーjQueryプラグイン
いろいろ探してみましたが、
http://develo.org/2011/06/24/0352.html
こちらの方のニュースティッカーは、非常にわかりやすく、サンプルを書いてくださってました。
ありがたいです。
・CSS
・JSファイル
jquery-1.7.1.min.js
ticker.js
・HTML
-----------
cssソース
-----------
/* CSS Document */
* {
margin: 0;
padding: 0;
}
/* news */
div.ticker {
margin: 0px 0px 0px 0px;
width: 350px;
position: relative;
overflow: hidden;
border: 0px solid #369;
}
@media screen and (min-width: 321px) {
div.ticker {
width: 440px;
}
}
@media screen and (max-width: 320px) {
div.ticker {
width: 280px;
}
}
div.topics {
width: 350px;
height: 25px;
}
div.ticker ul {
height: 1.6em;
}
div.ticker ul li {
float: left;
display: inline;
clear: both;
text-align: left;
list-style-type: none;
position: relative;
line-height: 1.6em;
margin-bottom: -1.6em;
}
div#longitudinally ul li,
div#fade ul li {
left: 10px;
}
-----------
jsソース
-----------
１．jQueryをダウンロード http://jquery.com/ jquery-1.7.1.min.js
２．ticker.js を http://develo.org/2011/06/24/0352.html からダウンロードしました。
<script type="text/javascript">
$(function(){
$("#move1 li").newsTicker({type:"move1",speed1:2000,speed2:70});
});
</script>
-----------
HTMLソース
-----------
<div class="topics">
<div class="ticker" id="move1">
<ul>
<li>11111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
</ul>
</div>
</div>
]]>
cafemocha
cafemocha7.gjgd.net://entry/2
2013-01-07T18:45:00+09:00
2013-01-07T18:45:00+09:00
WinMergeファイルやフォルダの比較をする
WinMerge 2.12.4 - 最新安定版（2013/01/07現在）
WinMergeは、Windows用の比較、マージツールです。
]]>
cafemocha
