コーダー日誌

諸々解説とか※クリックタップすると開閉

• モーダルウィンドウ／ライトボックス風

• Colorbox [plug-in] [jQuery]

  • 説明モーダルウィンドウで（ライトボックス風に）画像などを表示するjQueryプラグイン

• fancybox [plug-in] [jQuery]

  • 説明モーダルウィンドウで（ライトボックス風に）画像などを表示するjQueryプラグイン

• モーダルウィンドウ [jQuery] [js]

  • 説明モーダルウィンドウを実現するjQueryコード
• indexに戻る

• カルーセルスライダー／スライドショー

• carouFredSel [plug-in] [jQuery]

  • 説明スライドショーのように画像などを特定領域内で差し替えて表示するカルーセルスライダーのjqueryプラグイン

• Tiny Carousel [plug-in] [jQuery]

  • 説明スライドショーのように画像などを特定領域内で差し替えて表示するカルーセルスライダーのjqueryプラグイン
• indexに戻る

• スクロール関連

• jquery-mousewheel [plug-in][jQuery]

  • 説明マウスホイールイベントを取得するjQueryプラグイン（ほかのプラグインと組み合わせて使うことが多い）

• jQueryでスムーススクロール [jQuery]

  • 説明プラグインを使わずにjQueryを使ってスムーズにスクロールさせるコード

• スクロールすると表示→最上部にスクロールするリンクボタン [jQuery][js]

  • 説明スクロールすると表示され、クリックするとページの最上部にスクロールするリンクボタンを設置するコード
• indexに戻る

• 画像関連

• 角丸ボタン→立体化 [CSS3]

  

  • 説明

    立体的な角丸ボタンの作り方

  • 主なcss

    border-radius／radial-gradient／box-shadow

• indexに戻る

• アニメーション／エフェクト／イージング関連

• jQuery Easing Plugin [plug-in] [jQuery]

  • 説明jQueryのエフェクト動作を加速／減速させるイージングの種類を追加するプラグイン

• jquery.easie.js [plug-in] [jQuery] [CSS3]

  • 説明jQueryのエフェクト動作を加速／減速させるイージングの種類を追加するプラグイン

• CSS3によるアニメーション（簡単な例） [CSS3]

  • 説明CSS3による簡単なアニメーション表現について
  • 主なcsstransition／animation
• indexに戻る

• Flash／動画／音声関連

• 音声ファイル（サウンドファイル）の埋め込み [HTML5] [js] [jQuery]

  • 説明HTML5でwebページに音声ファイルを埋め込む方法（oldIEに対応する方法についても）
  • 主なhtml5audio

• 動画ファイルの埋め込みの埋め込み [HTML5] [js] [jQuery]

  • 説明HTML5でwebページに動画ファイルを埋め込む方法（oldIEに対応する方法についても）
  • 主なhtml5video

• html5media [HTML5] [plug-in] [js]

  • 説明IE6/7/8でもHTML5のvideoタグとaudioタグを利用できるようにするjsプラグイン

• Flowplayer [HTML5] [plug-in] [jQuery] [js]

  • 説明動画をwebページに埋め込むjQueryプラグイン
• indexに戻る

• SNS／feed関連、その他の埋め込み

• ツイートボタン（twitterウィジェット） [js]

  • 説明Twitter社が提供しているウィジェットを使って、ツイートボタンを埋め込む方法。基本、コードをコピペするだけで設置可。

• 埋め込みタイムライン（twitterウィジェット） [js]

  • 説明Twitter社が提供しているウィジェットを使って、タイムラインを埋め込む方法。基本、コードをコピペするだけで設置可。

• 埋め込みツイート（twitterウィジェット） [HTML]

  • 説明Twitter社が提供しているウィジェットを使って、ツイートを埋め込む方法。コードをコピペするだけで設置可。

• facebook いいねボタン・シェアボタン [js]

  • 説明facebookいいねボタン・シェアボタンを埋め込む方法。

• facebook Page Plugin [js]

  • 説明facebook Page Pluginを埋め込む方法（Like Boxは終了しました）。

• LINEで送る　その他のSNSボタン[js]

  • 説明web情報をLINEユーザへシェアできる「LINEで送る」ボタンなどその他のSNSボタンを埋め込むためのコード。基本、コードをコピペするだけで設置可。

• jquery.xdomainajax.jsを使ったRSS Feedの埋め込み [plug-in] [jQuery]

  • 説明クロスドメインのhtmlファイルなどを抽出できるプラグインを使ったRSS Feedを埋め込む方法（Google Feed APIの提供は終了されます）。

• Google Map API [jQuery] [js]

  • 説明google Mapの埋め込みについて
• indexに戻る

• 入力フォーム関連

• jQuery Validation Pluginと入力フォームの諸々について [plug-in] [jQuery] [js]

  • 説明入力フォームのバリデートをしてくれるjQueryプラグインのご紹介と入力フォームの諸問題について

• 入力補助（プレースホルダー） [HTML5] [plug-in] [jQuery] [js]

  • 説明（値が空の）入力フォームにあらかじめ文字などを表示しておき、ユーザがフォーカスすると消えるようするjsコードやプラグイン（ah-placeholder.js）など
  • 主なhtml5placeholder属性

• IE8以下のlabelの不具合対応 [jQuery] [js]

  • 説明※IE以外のブラウザおよびIE9以降は関係ないです。

• 文字数カウント [jQuery] [js]

  • 説明リアルタイムで文字数をカウントするjQuery

• セレクトボックスを装飾する [HTML5] [CSS3] [plug-in] [jQuery] [js]

  • 説明セレクトボックス（プルダウンメニュー）を装飾するとしてCSS3を使う方法をご紹介。
  • 主なcssappearanceプロパティ

• Chosen [plug-in] [jQuery] [js]

  • 説明セレクトボックスの不便なあれやこれやを解決するjQueryプラグイン
• indexに戻る

• 背景／レイアウト関連

• フレキシブルレイアウト（フレキシブルボックス）［旧］[CSS3]

  • 説明簡単に分割レイアウトを実現できる
  • 主なcssdisplay:box

• フレキシブルレイアウト（フレキシブルボックス）［新］[CSS3]

  • 説明簡単に分割レイアウトを実現できる
  • 主なcssdisplay:flex

• 複数背景指定 [CSS3]

  • 説明ひとつの要素に対して複数の背景を指定する
  • 主なcssbackground-image ほか、背景用cssプロパティ

• ランダム背景 [js]

  • 説明アクセスするたびに、背景画像をランダムに変えるjs。
• indexに戻る

• その他

• インジケーター2種 [HTML5]

  

  • 説明

    二つのインジケーターの使い方

  • 主なhtml5

    meter／progress

• 自動リロード [jQuery] [js]

  • 説明webページを一定間隔で自動リロード→手動に切り替えるjs

• アコーディオン [jQuery] [js]

  • 説明slideToggleを使ったアコーディオン。その他もろもろ小技など。

• タブ切替え [jQuery] [js]

  • 説明fadeToggleを使ったタブ切替え。その他もろもろ小技など。

• リンクまわりの小技（URL取得と文字列操作） [jQuery] [js]

  • 説明メニューのリンク先に飛ぶと対応するメニューの装飾が変わったり、タブ内のアンカーにジャンプさせたり

• ツールチップ [jQuery] [js]

  • 説明ツールチップ（ふきだし）を表示させるjqueryコードなど
• indexに戻る