最新版！あらゆるWebページを作成する時に使える、必要最小限をまとめたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 HTML5 Boilerplate -GitHub イラスト: Girls Design Materials HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider
シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装する超軽量のjQueryのプラグインを紹介します。 キーボード操作やスワイプ操作、そしてマニュアル操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 オープンソース ライセンスは「WTFPL」で、個人・商用問わずどんな風に使ってもOK。 超軽量 スクリプトは6KBで、超軽量です。 実装は簡単でクリーンなHTML 数分で実装でき、非常にシンプルでValidなHTML。 スライドの方向は多彩 通常の水平方向は左右どちらにも順向きで対応、垂直方向のスライドも可。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートし
![[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider](https://cdn-ak-scissors.b.st-hatena.com/image/square/08bc7be458afe18c7e32cf5b8ed94c85bcfb1cd0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120302-03.png)
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。 キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。 デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
WordPressでLightbox風の機能を実現するプラグインを試してみた。 | 迷走ジャングル
画像を多用した記事を書いていると、ページを遷移せずに画像を拡大表示させる機能は必須だなぁと強く感じます。 そこでLightboxなどのJavaScriptライブラリを利用するわけですが、WordPressではプラグイン化されたLightbox風ライブラリを導入することで、Lightbox風の機能を簡単に実現することが出来ます。なんて便利なんだWordPress！ そんなわけでLightBox風機能を導入すべく、いくつかプラグインを試してみました。 Lightbox風プラグインをいくつか試してみた。 早速WordPressのプラグイン検索で「Lightbox」や「Colorbox」と検索してみましたが、同じライブラリを利用したプラグインがたくさん出てきました。 全部試すか…！いや無理だ…。取り敢えず更新があまり止まっていない人気のありそうなプラグインをいくつか試してみることにします。 今
JQuery版LightboxをMT5.1に導入 - 今桐彰宏::LABO
MovableTypeで本文に画像を表示させようとすると、上のように画像そのものを本文に表示するか、右のように本文にはサムネイルを表示してクリックされたら元のサイズの画像を表示する方法があります。 試しに右のサムネイルをクリックしてみてください。 このサムネイルには別ウィンドウで画像を開くようにしてありますが、通常は画像のみが表示されてブラウザの戻るボタンでしかブログに戻れません。 これはイマイチ。 とは言え、できるだけ大きなサイズで見ていただきたい画像や、画像がたくさんある時は、サムネイルで表示しておいた方がページが見やすくなります。 そこで導入したのがLightbox。 画像をカッコ良く表示してくれるエフェクトのプラグインです。 以前にもprototype.jsベースのLightboxをこのブログにも導入していたことがありますけど、MT5にアップグレードしてテーマを新しいものに変えた時
jQuery プラグインの jquery.validate.js を使って入力チェック機能を仕込んでみた。 | アバダバー＠ブログ
アバダバー＠ブログ なにを勘違いしたか、会社辞めてWEB系フリーランスエンジニアになっちゃったキチガイの備忘録ブログ。ジョキアーモ！！ このエントリでは、私が WordPress + Contact Form 7 + jquery.validate.js という環境を構築中にハマったところがあったので備忘録を兼ねて書いておく。 なお、私が参考にしたサイトを張っておく。基本的なところは先達者が詳しく書いてくれているので先に一読されることをお勧めする。 jquery.validate.js 公式： http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化：Goodpic： http://www.goodpic.com/mt/ar
投稿に日付欄を追加してjQuery UIのDatepickerでカレンダーから入力する
「臨時休業のお知らせなどを投稿する時に、休業期間を指定すると営業日カレンダーに反映される」という案件の場合、WordPress では期間（日付）の管理にカスタムフィールドを使うことになるでしょう。でもこのカスタムフィールドは見栄えがアレだしクライアント様にお使いいただくには気が引ける。そんな時はオリジナルなメタボックスを追加すれば解決です。 そんなようなプラグインはいくつもありますが、この程度なら functions.php にちゃちゃっと書く方が自由で快適。ついでに日付なら「2010/01/28」なんて書式を気にせず簡単入力できるように jQuery UI の Datepicker を使いましょう。 さらに、投稿は「臨時休業のお知らせ」だけじゃないので、当該カテゴリ選択時のみメタボックスを表示するようにするとユーザビリティとしてはドヤ顔できるレベルかと思われます。 「営業日カレンダーに反
日本語ローカライズした jquery.validationEngine.jsでContact Form 7の入力値をチェックする
WordPress をお使いの方にはおなじみの All in One お問い合わせフォームプラグイン「Contact Form 7」には入力値チェックの機能が備わっています。備わっておるのですが、フォームの入力値チェックを行う jQuery プラグインなんかが巷に溢れており、Contact Form 7 でぜひそれを使いたいというニッチな要望もあるような気がします。 必要がないとか、苦労に見合う価値が認められないからニッチなのであり、ネットで探しても情報がありませんとなるのですが、wpxtreme では実用性はともかく面白そうだったりヒマだったらやってみる方針なので Contact Form 7 × 各種 jQuery フォームバリデーションプラグインインテグレーションプロジェクトを始めます。第1段は A jQuery inline form validation, because val
画面いっぱいの背景画像をスライドショウするjQueryプラグイン
2010年4月10日 画面サイズにフィットして伸縮する背景画像を、スライドショウするjQueryプラグインの紹介。 フルFlashサイトなどで見かける、画面サイズに合わせて画面いっぱいに画像が表示されるアレ。それにスライドショウ機能が付いたjQueryプラグインを、自分のサイトで使ってみました。 動作サンプル www.daichifive.com 自分のサイトで使ってみました。なんか、いいカンジでしょ？ちなみに、使用している写真は、足成さんでダウンロードしました。 追記 上記で紹介している僕のサイトのソースコードをまるまる流用する人が増えています。分からないからといって、CSSファイルやデザインまで全部パクるのはやめましょう。head内のアクセス解析用コードまでそのまま使う人が多いのもホント焦る。僕のGoogleAnalyticsの結果に知らないタイトルのページがたくさん入ってきてます。
JSONP×jQueryでヤフオクAPIを活用しよう (1/2)
ネットを使って自社製品を販売したいけど、本格的なECサイトを立ち上げるほどではない。なるべく低コストで済ませたい――そんなときにも使えるのが、おなじみの「Yahoo！ オークション（ヤフオク）」です。今や個人だけでなく、数多くの企業がヤフオク経由でさまざまな商品を販売しています。 せっかくヤフオクで商品を販売するなら、自社のWebサイトにも出品情報を表示したくなります。Yahoo!オークション用に提供されているAPIを使うと、オークションに出品中の商品の情報を取得して、他のWebサイトやアプリケーションに比較的簡単に利用できます。JavaScriptを使って、ヤフオクに出品中の商品情報を自社のWebサイトで表示する方法を紹介しましょう。 APIを使うための準備をしよう プログラムを作る前に、APIを利用するための準備をします。 1．アプリケーションIDの登録 Yahoo!デベロッパーネット
JavaScriptの動かないコード (中級編) "インターネットサイト を開けません。操作は中断されました。" - 主に言語とシステム開発に関して
連載目次へ クイズ…下記のコードが意図した動作をしないのは，どうしてですか。（制限時間１分） <body> <p> <script language="JavaScript"> document.body.innerHTML = "test"; alert(document.body.innerHTML); // "test"と表示 </script> </p> </body> 答え IEで上記のコードに出会うと，"test"とアラート表示された直後に， インターネットサイト を開けません。操作は中断されました。 のエラーダイアログが表示され，「Internet Explorer ではこのページは表示できません」のページに切り替わる。 IEでは，ページの読み込み途中に，documentオブジェクトに対してDOM操作をするのを控えた方がよい。 参照：Internet Explorer Pro
Bridge Word
This shop will be powered by Are you the store owner? Log in here
[JS]ブラウザの種類を検出して、CSSのセレクタで実装できるスクリプト | コリス
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Flipsblog.jp
WordPress jquery-colorboxを導入。
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
http://www.designwalker.com/2009/08/wp-jquery.html
RetujyOu.com is for sale | HugeDomains
