Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
検索ボックスの値をリアルタイムに取得して、部分一致の絞込み検索を実装する ｜ Tips Note by TAM
下記のような絞込み検索を jQueryで実装する機会があったのでご紹介します。 検索ボックスに文字を入力するたびにページ内の検索対象から部分一致するワードを絞り込んで検索結果エリアに表示します。 部分一致ですので、検索ボックスに“2”と入力すると“2”を含む『りんご120円』と『いちご220円』が検索結果に表示されます。 設定したスクリプトはこちらです。 searchWord = function(){ var searchResult, searchText = $(this).val(), // 検索ボックスに入力された値 targetText, hitNum; // 検索結果を格納するための配列を用意 searchResult = []; // 検索結果エリアの表示を空にする $('#search-result__list').empty(); $('.search-result__
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
Roulette.js Roulette.jsは、画像をルーレット（スロット）のように回転させることができるjQueryプラグインです。 画像を数字に変更すれば、ビンゴっぽいのも作れるかも。 みてもらうのが一番早いと思うので、サンプルをご覧ください。 → ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。 ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。 使い方 こちらのサイトをご覧ください。公式のデモページになってます。回転スピードを調節したり、止まった時にでる画像を指定したりと、いろいろ試すことができます。 http://demo.st-marron.info/roulette/sample/dem
jQueryを使った画像切り替え - hello, world.
本当に今更だけどjQueryなどのライブラリって便利だなー。 ちょっとしたときに使う、画像切り替え（入れ替え）。 ※jQueryは、Google AJAX Libraries APIから。 画像切り替え デモ Javascript <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript" ></script> <script> $(document).ready(function(){ //ナビゲーションのmouseover。画像切り替えとは関係ない。 $("ul > li").hover(function(){ $(this).fadeTo(200,0.5); },function() { $(this).fadeTo(200,1); }); /
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
Flash効果のあるランダム画像プラグイン-WordPress
画像中心サイトには使えるランダムポスト・スライドショーをサイドバーなどに設置できるプラグインを紹介します。29種類のFlash効果が使えて記事の画像をランダムに表示し、しかも画像が各ページにリンクしてるとっても便利なプラグインです。 ちなみにランダムポスト・スライドショーがどんな感じなのかはJQuery Cycle Plugin で確認してみてください。 JQuery Cycle Plugin の色んな効果が簡単に使えるようになるプラグインはwp-kougabu （画像付きアーカイブ）とKougaburari (ランダムポスト・スライドショー)の２種類を使って表示できます。 各プラグインをダウンロードして下さい。プラグインをアップロードする前にwp-contentの中にcacheフォルダとcacheフォルダの中にwp-kougabuフォルダを作っておき属性を777にしておきます。wp-co
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
連動プルダウン(select) - Mars Diary
選択子を絞りこむ為に多段連動するドロップダウンリストのJavascript。 → サンプル ポイントは… optgroupでグルーピングしておくこと。 使い方 ライブラリ（ConnectedSelect.js）の読み込み <script type="text/javascript" src="ConnectedSelect.js"></script>連動するselectにidを付ける。 親にあたるoptionのvalueと 子にあたるoptgroupのlabelを対応させておく。 <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2"> <optgroup label="XXX"> <option value="x1">x
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
2段階のプルダウンメニューを作る - ［ホームページ作成］All About
メインとサブのプルダウンメニューを使うナビ プルダウンメニューを使うと、あまりスペースを占有せずにナビゲーションなどを提供できます。 しかし、プルダウンメニュー内の項目数が多すぎると、全体を把握しにくく、望みの項目を探すのが大変になってしまいます。 そこで、2つのプルダウンメニューを連動させて、1つのナビゲーションを作ってみましょう。 下記は、今回作成するサンプルです。 プルダウンメニューから、何か項目を選んでみてください。選択内容に応じて、サブのプルダウンメニューが表示されます。 ※JavaScriptが利用可能な環境のみ サイト内にコーナーがたくさんあったりページがたくさんある場合は、このように2つのプルダウンメニューを使った方が選びやすいでしょう。 今回は、このように1つ目のプルダウンメニューの選択内容に応じて、動的に異なる内容を表示させる方法をご紹介いたします。
JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら：JavaScript基本概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal
どこよりも早い「Yahoo! UI Library 3」(YUI 3)入門 (1/5)
最新のライブラリーやJavaScriptの新しい活用法を紹介する「JavaScriptラボ」。今回は、9月末にリリースされたばかりの「YUI 3（Yahoo! UI Library Version 3）」を取り上げます。 Yahoo! UI Libraryとは？ 「Yahoo! UI Library」（以降、YUI）はその名の通り、ユーザーインターフェース周りを得意とする米ヤフー製のAjaxライブラリーです。YUIは、Ajaxが普及し始めた2005年に登場し、面倒なUI周りを簡単に処理できることから次第に普及していきました。実は、以前取り上げたAjaxフレームワーク「Ext JS」も、もともとはYUIの機能拡張(Extension)として生まれたものです。 YUIはタブパネルやスライダー、ドラッグ＆ドロップ、アニメーション機能など、他のライブラリーやフレームワークを凌ぐ充実したUI部品と豊
TinyTableの使い方 - ShanaBrian Official WebSite
csorterディレクトリを任意の場所に設置します。 ※ 緑色部分は不要なので、削除してかまいません。 （ただし、本家のデモと同じ表示をしたいのであれば、 index.html以外は残しておく必要があります。） ※ 他のページなどに共通(テンプレート)して使用できます。 読み込み 以下のタグを<head>内に記載します。 パスは環境により変更してください。 <script type="text/javascript" language="javascript" src="sorter/script.js"></script> 以下のタグを</body>の直前に記載します。 （適用させるテーブルの下であれば<body>内のどこでもかまいません。） <script type="text/javascript"> var sorter = new TINY.table.sorter(
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
訪問者驚きの手めくり風、画像ギャラリー作成サンプル:phpspot開発日誌
Create a unique Gallery by using z-index and jQuery | This Blog Use jQuery 訪問者驚きの手めくり風、画像ギャラリーを作成できるサンプル。 以下がデモで、実際に試してみましょう。驚きの効果が得られるはずです。 HTML定義部分。分かりやすいコードも魅力です。 <!-- relevant for the tutorial - start --> <div class="grid_6 prefix_1 suffix_1" id="gallery"> <div id="pictures"> <!--画像の定義部分--> <img src="images/picture1.png" alt="" /> <img src="images/picture2.png" alt="" /> <img src="images/pictu
わずか2.5KBでテーブルにソート機能を提供する「TinyTable」:phpspot開発日誌
TinyTable JavaScript Table Sorter - 2.5KB - Web Development Blog わずか2.5KBでテーブルにソート機能を提供する「TinyTable」。 シンプルだけど次のようなかっこいいソート可能テーブルを実現できる軽量ライブラリが公開。 デモページ 各種変数の設定でカスタマイズも可能みたい。 ＣＳＳのクラス名の指定なんかが出来るようです。 var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; //header class name sorter.asc = "asc"; //ascending header class name sorter.desc = "desc"; //descending header class name sorter.even
Ajax » jQuery plugin » フォーム要素の制御 | PHP & JavaScript Room
テキスト入力欄に日付、電話番号、郵便番号など指定したフォーマットで入力させるように入力制御を行うjQueryプラグイン。 設置イメージ Maked Input Pluginの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://labrid.jp/wp/archives/1092/