プラグインや使い方まとめ作成:2014/04/7更新:2014/11/01Web制作あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある!」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。アラート38.動画スライドショー1.カルーセル(横)右から左へ写真を移動させる、よく見かけるスライダー。レスポンシブ対応で自由にカスタマイズ、カルーセルスライダー。おなじみのFLEXSLIDERはフェードとスライドを選択できます。memocarilog2.フェードアウト軽量ならこれだと思います。モバイル表示での高速化を考えて、軽量であるResponsiveSlides.jsもおすすめです。スライド・フェードの早さはオプションで変更可。一応文字も同時にスライドさせることができます。Slider2もあります。divで囲んだdiv要素ごとにスライドさせるという便利なスライダー。文字も一緒にスライドできます。文字やアイコンに遅延効果。IE7に対応していたのが嬉しいですね。NxWorld5.異なるタイミングを設定できる目をひかせたいならFractionSliderだと思います。画像だけじゃなくて、複数の要素をタイミングをずらしながら見せることができます。ドロップダウンメニューレスポンシブでクロスブラウザー(IEは7以降)対応のドロップダウンメニューはFLEXNAVが良い感じでした。スマホにしたときの入れ子構造がとても分かりやすいです。Outは株式会社LIGさんのサイトっぽくナビを作れそうです。コリス8.スマホではドロップダウンレスポンシブ対応のドロップダウン対応メニュー。NavはIE6にも対応してます。Plugin9.スマホではセレクトメニューにPCでは普通のナビ、スマホではセレクト(ドロップダウンナビ)にしてくれるjQueryプラグイン(TinyNav.js)を使います。軽量な上、スマホ表示の際、スペースを確保できるので重宝します。メガドロップダウンメニュー。マウスホバーでサブカテゴリを横展開できます。Kamens11.横スライドスマホサイトでよく見かけるサイドバーを表示したり隠したりするメニュースライダー。menusクリックすると横からメニューが現れるjQueryプラグイン『Sidr』12.アニメーションで下線が付いてくるコーポレートサイトでたまにみかけるので。メニューに下線が遅れてついてくるような効果。ちびと.netパネル13.アコーディオンパネル短いコードでアコーディオン・タブメニューを実装するslideToggleを使った実装方法。短い記述とシンプルなのが嬉しいですね。スマートフォンにも使える、クリックで開くアコーディオンメニュー14.タブパネル情報量が多いポータルサイトなんかで必ず出てくるタブ切り替えのサンプル集。フェードインやスクロール等のアニメーション付き。カルーセルバナーやちょっとしたコンテンツを並べたパネルを横にスライドさせる見え方を実現。amazonのレコメンドで使われていました。ASCII.jp:jQuery+CSSによるカルーセルパネル画像関連16.モーダルウィンドウクリックすることにより、子ウィンドウを生成し制御します。こちらはレスポンシブ対応のモーダルウィンドウスクリプト。ちびと.net17.ソート画像などをアニメーション効果をつけて、並べ替えをしてくれるプラグインMixItUp。制作実績のページで、カテゴリ別にソートさせたいときに使えます。アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」:phpspot開発日誌18.ライトボックス自作で作るライトボックス。画面クリックで閉じるタイプです。一つはRWD対応と非対応別のまとめ。W3Q19.写真にぼかしコーポレートというよりは、サービス系サイトで使えそうなVague.js。写真にぼかしを入れるプラグイン。ブラウザによっては非対応もありますが、ぼかしを調節できます。GitHub20.画像のサイズを揃える高さや横幅がバラバラな写真を、指定サイズに揃え、トリミングもしてくれるというもの。クライアントさんがアップロードした写真を自動で揃えることができそうです。異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌21.フルスクリーン(画面幅にピッタリ)背景に画像をいっぱいいっぱいに使ったページのつくりかた。Webサービス系のサイトに多く見られました。こちらはjQueryやCSSを使ってダイナミックに画像を表示する方法。ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろテーブル22.ストライプテーブルサービスやプランの料金表など、テーブルが必要なページを作るときが必ず出てくると思います。こちらは要素毎に奇数、偶数を数える方法も記載。jQueryでいろいろな要素をストライプ(縞模様)にする。テーブルテーブルの行をソートできるようにするプラグインの使い方。指定した列と並び順でソートしたり、指定した列のソートを無効にする方法も。tablesorterドラッグ&ドロップ24.フローティングウィンドウ子ウィンドウをドラッグ&ドロップで移動させる方法。情報を追加して表示したいけど、レイアウトを崩したくないときに。管理画面を作るなら知っておきたいなと。ドラッグ&ドロップで並べ替えを行えるようにします。並べ替えた順番を保存・再現する方法と並び順をデータベースに保存も合わせてチェック。ハイフンの有無は関係なく都道府県と住所を分けて、テキストボックスに情報を表示してくれます。これで郵便番号のメンテナンス作業から解放されます。けんごのお屋敷27.チェックされたら送信可能にチェックボックスをクリックしないと、送信ボタンをクリックできない状態にできます。NxWorld28.バリデーションフォームに数値を入力したときに、ユーザー側で入力ミスを確認させる方法の一つ。ユーザビリティを高めるために。UIデザイン入門スクロール系29.トップへ戻るwebOpixelさんの以下の記事の一番最初に書いてあるトップへ戻るボタンをフェードして表示する方法が一番使いやすかったなぁと思いました。最初から上部にあるものを固定する方法はよく見ますが、こちらはページ途中にあるナビゲーションメニューをスクロールで上部に固定する方法。ホームページ制作やリニューアル印刷物デザインなら大阪のWPCニュース・ブログ31.ソーシャルボタンソーシャルボタン(はてブ・ツイッター・フェイスブック)をまとめて設置できるプラグイン。新着情報をティッカーで表示している企業サイトもあったのでご紹介です。最近のお知らせのタイトルなどをティッカーで表示したり。縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」:phpspot開発日誌33.ツールチップツールチップ系のまとめ。Tooltipsterはリンクにホバーすると、リンク先の情報をツールチップで表示。まとめ解析34.スクロール計測LPでも使えると思うので。25%・50%・75%・100%で解析表示。コリス35.外部リンクのクリック数をカウントリンクにコードを埋め込み、アナリティクスのイベントトラッキングで外部サイトへのクリック数を確認する方法。その他36.スキルグラフ弊社スタッフのある1日のスケジュール、スキルなど円グラフを使って情報を視覚的に見せたいときに使えそうなChart.jsの使い方。背景に動画を入れ、Packのような動画フルスクリーンサイトにする方法。サイトの雰囲気やオフィスの光景などを入れたいときに。ドット画像などを埋め込み、荒れた画質をオシャレに見せる方法など。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2015/08/101ページで完結、Web制作者が助かるチートシート・資料・PDFまとめページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上2013/09/9忘れた時に便利!「androidアプリ開発」に役立つすごいまとめ去年、楽をしたくてTitaniumでiPhoneやAndroidアプリを作ったものの、Androidの方は動作が重く失敗。基礎から勉強しないとダメだと痛感しました。今2016/02/8意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめCSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。2016/11/21モダンなフォームを作るために覚えておきたいCSSの擬似クラスモダンなフォームを作るために覚えておきたい擬似クラスをまとめました。コメントデータの処理方法の詳細はこちらをご覧ください。