HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定(2フィンガータップ、ロウテイト、ピンチアウト、ピンチ) 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
(各アイコンをクリックするとウェブストアに飛びます) 1. Thin Scroll Bar スクロールバーを細くしてくれるエクステンション。極限まで表示する領域を広げたいけど、スクロールボタンは消したくない人におすすめ。 2.SmoothScroll スクロールがぬるっとするエクステンション。カクカクなスクロールに我慢ならない人におすすめ。 3.Scroll To Top ページの下部からワンクリックで上部に移動できるエクステンション。オプションでいろいろいじれる。デザインも豊富。 4.Pinterest ホームページ上に表示されている画像をPinterestにリピンできるエクステンション。とても捗る。しかしIT Mediaの記事ではなぜか失敗する。なぜなのか。 5.New Tab Redirect! Chromeの「新しいタブ」を自由に設定できるエクステンション。 6.Turn
Lighten / Darken Color カラーの明度を変更するのはもちろんPhotoshopのカラーピッカーで調整することはできますが、いちいち手作業でやるのは面倒くさいもの。そんな時は、この機能拡張を入れるとショートカットで簡単にできます。 明度を10%の増減で展開 Lighten / Darken Colorのインストール インストールは簡単です。 下記ページの中程の「Downloaded here」からファイルをダウンロードします。 Lighten / Darken Color 「[KAM] Color Lighten-Darken Scripts.zip」を解凍します。 解凍した「Color Darken.jsx」と「Color Lighten.jsx」を下記のフォルダ内に移動します。 ファイルの格納先:Photoshop/Presets/Scripts/ Photoshop
TOP > WebDesign > jQueryで実現する動画、音楽プレイヤー「10 Useful jQuery Video & Audio Players」 最近では動画や音楽もFLASHに頼ること無く、HTMLとjsのみで扱えるようになってきて、jQueryを利用すれば、かなり高度なプレイヤーを実現することも可能です。今日紹介するのはシンプルなものから一風変わったものまで、jQueryで実現する動画、音楽プレイヤーを集めたエントリー「10 Useful jQuery Video & Audio Players」です。 Responsive & Touch-friendly Audio Player 全部で10個の動画、音楽プレイヤーが紹介されていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 HTML5 Music Player シンプルな
作成:2013/07/1 更新:2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー(Google Analytics関係とか)なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール 1.ページ内リンク/フッターまわり/トップに戻る 2.パララックス スライド 3.カルーセル 4.レスポンシブなスライダー 5.ヌルヌルサクサクなスライドメニュー 6.サムネイル付きクロスフェードスライドショー 補助 7.Google Ana
デモ:Flip Tabulous.jsの使い方 実装は非常にシンプルで、エフェクトの設定も簡単です。 Step 1: 外部ファイル 当スタイルシート、「jquery.js」と当スクリプトをhead内に記述します。 <link href='tabulous.css' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="tabulous.js"></script> Step 2: HTML HTMLは非常にシンプルで、タブをリスト要素、コンテンツをdiv要素で実装し、divで内包します。
画像加工や写真の修正、すべて手作業でやってませんか? Photoshopのアクション機能で自動化すればアッという間に終わります。今回はデザイナーの仕事を驚くほどラクにするアクションを18種、厳選してまとめました。 目次 単純作業をラクにするアクション(×4種) モックアップ作成をラクにするアクション(×6種) 写真加工をラクにするアクション(×6種) 写真の枠をラクに付けるアクション(×2種) 単純作業をラクにするアクション 1.Retina対応画像を生成する Retinize Itを使えば、iPhoneやiPadに対応したRetina画像を自動生成できます。リサイズ〜名前変更の手間を一気に短縮しましょう。 Retinize It 2.リフレクションする 水面に反射したような効果が得られるリフレクションエフェクトが簡単に作れるアクションです。たったのワンクリックでAppleプロダクトの
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量(1KB)のスクリプトを紹介します。 作業は、HTMLに2つ追加するだけです。 Midway.js Midway.jsのデモ Midway.jsの使い方 Midway.jsのデモ 天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。 デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。 まずは、デスクトップサイズから。 デモページ:IE7モードで表示 Midway.jsの使い方 使い方は簡単で、ステップは2つです。 Step 1: 外部ファイル head内に、スクリプトを外部ファイルとして記述します。 <head> <script src="http://code.jquery.com/jquery-latest.js"></s
エレメントのホバー時にフェードアウト&アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」 2013年05月17日- Slickhover.js エレメントのホバー時にフェードアウト&アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」。 画像等のエレメントにオーバーレイすると、アニメーションしつつフェードアウトし、上に画像をかぶせる的なエフェクトを作るためのjQueryプラグイン。 それ以外は何もやってくれませんが、こういう細かなアクションも意外と1から実装しようとすると面倒だったりするものですが、このプラグインで簡単に実装できます 他のプラグインと組み合わせることでクールな演出ができそう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 selectボックスをリッチかつク
どうもこんばんは。Toshikuraです。今回のTipsは【軽量簡易!セレクトフォームを装飾・デザインするプラグイン】です。先ほどチェックボックスやラジオボタンを装飾する方法を記事にしましたのでその続編です。セレクトフォームをかっこよくするプラグインは数々ごさいますが…設定が手間だったり…重かったり…機能が多かったり…となかなか悩みどころが多く、これ!といったプラグインが少なかったのですが…今回記事にする【.customSelect()】は脅威の簡易さです。デザイン性は他のプラグインに劣りますが、安定性や容量、使い勝手では群を抜くプラグインかと思います。 発展編 22. .customSelect() 画像の準備 まずはセレクトフォームに使用する画像を準備します。用意するのは閉背景画像のみです。 基本設定 画像を準備したらjQueryを読み込みます。 JS <script src="js/
こんにちは、デザイナーの王です。 突然ですが、皆さんはどうやってWebページを組んでますか? 僕は、HTMLの骨組みをひと通り書き終え、それからChromeで直接CSSを書いていきます。個人的には、ChromeはCSSをリアルタイムでいじれるので便利です。 しかし、この手法で組むと、CSSを追加、編集するたびに、いちいちコピペを連発しなければならない。しかもその後ちゃんとコピペしきれているか別タブで確認して・・・。 これは、NO GOODです! 「編集したCSSをそのまま保存できたらなあ。」と誰もが思うことでしょう。ブラウザのセキュリティ上、そのような機能は永遠に提供されないと思われますが。 と、思ったのは誤算でした! なんと、Chromeが開発者向けに「Chrome DevTools Autosave」という名の拡張を出しているんです!これを使えば、編集したCSSがそのまま保存されます!
プラグインを探してこのページに辿り着く方も相当いると思いますが、Rough RiderとMeldaのものがあればことたりるかな‥という気がしないでもないです。 割りと古くから紹介されているMac用のものはIntel非対応のものも少なくないので注意が必要です。 Rough Rider http://www.audiodamage.com/downloads/product.php?pid=ADF002 フリーのコンプとしてはかなり高いクオリティです。 Mac VST/AU Win VST meldaproduction http://www.meldaproduction.com/plugins/product.php?id=MFreeEffectsBundle コンプとEQだけみてもまずまずのクオリティです。 Voxengo http://www.voxengo.com/product/o
サイトを移転しました。3秒後に新サイトに移動します。 移動しない場合はここをクリックしてください。 フリーのVSTの紹介 ※VSTプラグインの使い方 Win→インストーラー付きのものは、ファイルを実行した後、プラグインをどこに入れるかについてのダイアログボックスが出てくると思うので、そこでお使いのDAWを選択してください。インストーラーが付いていないものは、ダウンロード後解凍するとdllファイルが出てくるので、それをProgram Filesにあるお使いのDAWのフォルダの中にあるVstpluginsというフォルダに入れてください。 Mac→ライブラリ→Audio→Plug-Ins→VSTに解凍したファイルを入れると使用できます。 VSTインストゥルメント(VSTi) VSTインストゥルメントとは、シンセやドラムなどの音を出すVSTのことです。VSTに対応したソフトで使用することができます
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
2011年にリリースされた、使えるjQueryプラグイン50「The 50 Most Useful jQuery Plugins from 2011」 WEB制作の現場で利用されているjQuery。非常に軽量かつ、高機能なjavascriptライブラリで、世界中で様々なプラグインがリリースされていますが、今日紹介するのは2011年にリリースされた、使えるjQueryプラグインをまとめたエントリー「The 50 Most Useful jQuery Plugins from 2011」です。 Response Javascript 全部で50ものプラグインがまとめられていますが、今日はその中から特に気になったものを紹介したいと思います。 詳しくは以下 Minimit 様々な動きが実現できるjQueryギャラリープラグイン。 Overscroll スマートフォンやタブレットの操作感をWEBで実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く