404 Not Found. ページが見つかりませんでした。URLが変更されたか削除された可能性があります。The page you were looking for doesn't exist. You may have mistyped the address or the page may have moved.
どうもこんにちは。Toshikuraです。今回のTipsは【CSSのみで色んなサイズの画像を横並びにして縦横サイズを合わせる方法(レスポンシブも可)】です。jQueryをつかえば一瞬でできる内容ですが…CSSのみでも簡単に実装できますので、機会があればお試しください。 実装方法 実装方法はすこしだけ複雑です。この方法では横幅に%も使えますのでレスポンシブにも利用できます。まずはデモとコードをご確認ください。 正方形(180px*180px)の例 HTML <ul class="thumb"> <li><a href="#"><img src="img/1.jpg"></a></li> <li><a href="#"><img src="img/2.jpg"></a></li> <li><a href="#"><img src="img/3.jpg"></a></li> … </ul> .t
どうもこんばんは。Toshikuraです。今回のTipsは【簡単!チェックボックスやラジオボタンを装飾する方法】です。プラグインを使用しても良いのですが、ここでは設定の手間や容量が気になるので使用しません。実装方法はとても簡単ですのでぜひお試しください。 発展編 20. チェックボックスのデザイン 画像の準備 まずはチェックボックスに使用する画像を準備します。チェック時を上、非チェック時を下と垂直に並べます。基本は画像ボタンの作り方と同様です。 基本設定 – 背景画像へ設置 画像を準備したらチェックボックスを囲っているラベルに背景画像として設置します。その際基点を左上に設定し、リピートを無しにします。 HTML <label class="cbxbd"><input type="checkbox"/>Check 1</label> CSS .cbxbd{ background:url(im
jQuery 一定間隔で画像を切り替えるアニメーションの作り方 – setInterval replace image animate どうもこんばんは! 今日もjQueryのネタです。 一定間隔で画像を切り替えるアニメーション ・HTMLの記述 <div id="animateField"> <img src="/images/abcd1.png"> </div> ・JSの記述 $(function(){ var count = setInterval(changeImg, 2000);//2秒間隔 i = 1; function changeImg(){ $("#animateField").children("img").attr("src","/images/abcd" + i + ".png"); if(i <= 5){//6枚の画像を順に切り替え i++; } else{ i
どうもこんばんは! 今日のネタは…「スクロールに応じて動作するアニメーション」です。 そういったサイトも増え(むしろもう減った?) 目にする機会も増えたかと思います。 基本はこんなパラパラアニメを用意し スクロールによって画像の位置を変更する or 位置によって表示する画像を差し替える を実施するだけです。 パラパラアニメを用意するのが若干手間ですが それさえクリアできればけっこう簡単です。 …前置きはこれぐらいでデモとコード DEMO コード <script type="text/javascript"> $(document).ready(function(){ //#MovieContents内スクロール初期化 $(‘#MovieContents’).scrollTop(0,0); //#MovieContentsをスクロールでfunction実行 $(‘#MovieContents
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く