calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

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

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

サイト読み込み時

ヘッダー

コンテンツ

サイト読み込み時

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

image-load-time_jQuery_Css

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

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

move-character_jQuery_Css

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

ヘッダー

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

scaling_jQuery_Css

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

４．入力補助／jQuery

auxiliary-input_jQuery_Css

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

searchbox_jQuery_Css

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

コンテンツ

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

horizontalline_jQuery_Css

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

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

columnsline-up_jQuery_Css

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

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

animate-appears_jQuery_Css

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

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

caption-enlarge_jQuery_Css

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

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

image-mouseclick_jQuery_Css

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

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

cut-out_jQuery_Css

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

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

effects-button_jQuery_Css

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

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

chart-motion_jQuery_Css

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

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

click-area-svg_jQuery_Css

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

１５．Googleマップを表示

googlemaps_jQuery_Css

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

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

  1. Twitter 人気のつぶやき 5/17～5/23 2014 | Webクリエイターボックス より:
    2014年5月24日 10:30 AM

    […] 7. Webサイト制作：これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ […]

    返信

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。