これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ

• 作成：2014/05/19
• 更新：2014/11/01
• WordPress >

ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

サイト読み込み時

• １．画像読み込み時、ローディング画像を表示／jQuery
• ２．読み込み時に文字を動かす／jQuery

ヘッダー

• ３．文字の拡大・縮小／jQuery
• ４．入力補助／jQuery
• ５．伸縮するサーチボックス／jQuery

コンテンツ

• ６．中心に水平線を入れる／CSS
• ７．均等に並べる／段組み／CSS
• ８．コンテンツが現れた時にアニメーションさせる／jQuery
• ９．マウスホバーで画像を拡大しキャプションを出す／jQuery
• １０．マウスクリックで画像を拡大する／jQuery
• １１．画像を様々な形で切り抜く／CSS
• １２．ボタンエフェクト／CSS
• １３．動きのあるチャート／jQuery
• １４．クリック領域を作る／svg
• １５．Googleマップを表示

サイト読み込み時

１．画像読み込み時、ローディング画像を表示／jQuery

コンテンツをロードするまでローディング画像を表示させる一番簡単な方法。ローディング画像をIDで囲い、ローディングが終わったタイミングでhide()で消しています。

• ローディングのクルクルを瞬殺で実装する | LogicA　- jQuery中心のWeb考察生活 -
• jQueryでローディング処理 -load()編-

２．読み込み時に文字を動かす／jQuery

FlashのようにJavaScriptでアニメーションを実現する書き方でsetTimeoutを使っています。jQueryでフェードインなどを○秒後に実行する場合はsetTimeoutとopacityを使います。

• 【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 | DX.univ
• jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法 | BlackFlag

ヘッダー

３．文字の拡大・縮小／jQuery

コーポレートサイトで使われていることが多かった文字のサイズ調整は、Text Resizerを使うと実現できます。

• jQuery | ページ内のフォントサイズを変更してくれる「Text Resizer」
• jquery.cookie.jsを利用して文字サイズを変更する | jQuery.lab

４．入力補助／jQuery

オートコンプリート機能を実装。サーチボックスに頭文字を打ち込むと、候補を表示する機能。単語を追加する必要はありますけど、サイト内で検索される単語は限られてくるので、使えるんじゃないかと思います。

• jQuery UI - オートコンプリート - jQuery 入門
• jQueryのsuggestとautocompleteを使ってみる - なんだかなぁ

５．伸縮するサーチボックス／jQuery

検索窓にフォーカスすることで伸縮させるプラグイン。サーチボックスを目立たせたくないときやコンパクトにしたいときに便利かなと。

• フォーカスで伸縮するクールな検索窓のデモ:phpspot開発日誌

コンテンツ

６．中心に水平線を入れる／CSS

CSS で表現した、見出しなんかで見かけるテキストの左右に水平線を配置するflexible boxなどを使ったパターン。:before と :after 擬似要素で水平線を表現しています。

• 横に水平線のあるテキスト · terkel.jp

７．均等に並べる／段組み／CSS

display:table-cell を使えば、要素を横並びにするときに幅を指定しなくても均等に並べることができます。display: table-cellは、border-rightなどで区切り線を入れたときにコンテンツ量に合わせて同じ高さで表示してくれます。

• [意外と知らないCSS]スマホ制作に便利！display:table-cellを使った横並びのレイアウト | Cappee Design

８．コンテンツが現れた時にアニメーションさせる／jQuery

スクロールして、コンテンツが見えたときにアニメーションを開始させる方法。最初にクラスをつけたコンテンツを半透明にしておいて、スクロールしたときに処理を行います。

• jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark

９．マウスホバーで画像を拡大しキャプションを出す／jQuery

画像にマウスを乗せると、画像を拡大した上に、テキストを出す方法はこちらからデモと一式ダウンロードできます。

• jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

１０．マウスクリックで画像を拡大する／jQuery

こちらは画像をクリックしたり乗せたりすることで画像を拡大させるjQuery プラグイン。

• 簡単・軽量！画像ズームjQueryプラグイン「Zoom」｜skuare.net

１１．画像を様々な形で切り抜く／CSS

画像を円で切り抜く方法は沢山ありますが、こちらは文字や星など様々な形でマスクする方法です。

• CSS and SVG Masks - CodePen

１２．ボタンエフェクト／CSS

cssで表現するボタンのホバーエフェクトまとめ。transitionを使い滑らかな動きにしています。

• Creative Button Styles | Codrops
• Buttons - A button library built with Sass and Compass
• CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorld

１３．動きのあるチャート／jQuery

動きを出した見栄えの良いグラフを作るならChart.jsがおすすめ。canvasを利用して表示させています。もう一つは横グラフを簡単に表現することができるjqPlot。

• 超cool!!フラットで可愛い動きのチャートがHTML5で作れる「Chart.js」入門ガイド
• jQuery2.xとjqPlotで棒グラフが簡単に描けるよ。 - 大人になったら肺呼吸

１４．クリック領域を作る／svg

地域名を作り領域をクリックさせる地図を作成するお仕事が会社でもあったのでメモ。クリック領域を簡単に作ることができます。

• JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT

１５．Googleマップを表示

Google Maps API v3を使い、サイトに地図を表示する基本的な方法。アクセスページなどに。

• Google Maps API v3を使ってウェブサイトやブログに地図を表示する: 小粋空間