季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に設置することができます。 MockupSlideshow
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
Captcha security check pondad.com is for sale Please prove you're not a robot View Price Processing
それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね！ それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像
リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 2013年08月22日- Menutron リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」。 メニューがリストで並んでいるよくあるサイト。ブラウザの幅をせまくすると・・・ selectボックスけいしきのナビゲーションに変換してくれます。自動でやってくれるのは便利です。 リストを縦に並べるだけだとなんだか使いにくいサイトになってしまいそうですが、Selectにするのはなかなかスマートかも。 関連エントリ タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 スマホでも多階層のメニューが作れるレスポンシブなjQueryプラグイン「slimMenu」 レスポンシブ対応でCSS3アニメーションを使った超クール
昨日のエントリーで書いたjQueryでのスクロール制御を応用して、 追尾型メニューリストを作ってみました。 Webページ画面の左だったり右だったりに配置してあるメニューリストを スクロールをしても位置を固定して画面上から消えないようにするもの。 縦に長くなってしまうサイトなどでは、 これがあるとユーザーにも親切な感じがします。（うっとおしく思う人もいるみたいですが。。。） 今回作るサンプルはサイトヘッダーが高さ「50px」の場合を基準にしています。 ※もちろんここの値はどんな形にでも変更可です。 まずは動作サンプルから。 動作サンプルを別枠で表示する iframe内をスクロールすると画面左のメニューリストが ヘッダーを過ぎた時（ページ上部から50pxを過ぎた時）に固定となり ページ内に留まります。（IE6では少々ガタつきますが、もうIE6は放っておきます…） そして、スクロール位置がヘッダ
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
実はこっそりjQueryの勉強をしていたことが少しだけある@web_shufuです。Twentytwelveテーマをカスタマイズして、メインナビゲーションメニューにアニメーションを取り入れたときの記録です。 1日目 メインナビゲーションのHTMLソースを確認 当サイトのヘッダー下部の黒いメインナビゲーションメニューバーは、こんなソースになっています。 <div class="menu-bar-container"> <ul id="menu-bar" class="nav-menu"> <li id="menu-item-731" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-731"><a href="https://webshufu.com/web-tool/">Web</a>
グローバルメニューでよく使われるドロップダウンメニューですが、 jQueryのanimateを使って動きに装飾を加えます。 HTMLソース <ul id="mainNav"> <li><a href="">Adobe</a> <ul class="subNav"> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a> <ul class="subNav"> <li><a href="#">Pentool</a></li> <li><a href="#">Peje</a></li> </ul> </li> </ul> </li> <li><a href="">Macromedia</a> <ul class="subNav"> <li><a href="#">Dreamweaber</a></li> <li><a
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
Why FlipClock.js? So why use this library when there are many others with the same name? Well, this library was created because the other solutions weren’t abstract enough to provide a deep level of customization without rewriting the code. (Besides the domain was available, who could pass it up?). Some libraries have a huge cascade of conditionals, while others simply hard-code too much into thei
Javascriptできれいなグラフがかけるライブラリ Highcharts JSサイトにグラフを表示したい！というときは、Highcharts JS はいかがでしょうか。 Highcharts JSは、javascriptで実装された、グラフを描画するための、ライブラリです。 棒グラフや、線グラフなどなど、いろいろなグラフを簡単にブラウザ表示することができます。 非営利目的であれば、Freeのようですよ。 http://www.highcharts.com/ ＜基本的な使い方＞ １.javaScriptを読み込む。 まずHighchartsとjQueryのjavaScriptを読み込みましょう。 <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js” type=“text/javascri
このドキュメントについて¶ この文書は @yubais が、ホワイトデーにお返しする相手がいなくて暇だったから書いたものです。 内容に関する責任は負いかねます。 ここに書いている内容は、以下の環境で動作をなんとなくチェックしています。 Highcharts 2.3.3, jQuery 1.8.2 Google Chrome 25.0, Firefox 19.0, Safari 6.0, Opera 12.14, Internet Explorer 10 (およびその互換モード) Windows 8, OS X 10.8 Mountain Lion, Ubuntu 12.04, Android 4.2
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
jQuery の jqPlot プラグインで作る円グラフ（パイチャート、Pie chart）。 jQuery の jqPlot プラグインで作る円グラフ jQueryのjqPlotプラグインで、円グラフ（パイチャート）を描く方法。 jQuery の jqPlot プラグインで作るデータラベル付き円グラフ jQueryのjqPlotプラグインで、データラベル付き円グラフ（パイチャート）を描く方法。 jQuery の jqPlot の円グラフにおいて、ラベルをデータラベルとして表示 jQueryのjqPlotプラグインで作る円グラフ（パイチャート）において、ラベルをデータラベルとして表示する方法。 jQuery の jqPlot の円グラフにおいて、値をデータラベルとして表示 jQueryのjqPlotプラグインで作る円グラフ（パイチャート）において、値をデータラベルとして表示する方法。 jQ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
