CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE
3Dやスライスなど、様々なアニメーション エフェクトを使用できて、且つレスポンシブ Webデザインにも対応可能なイメージスライ ダーを実装できるjQueryプラグインのご 紹介。REFINESLIDEというプラグインです。 覚えておいて損は無いのでは。 IEではフェードエフェクトのみになってしまいますが、iPhoneやiPadなどではcss3による様々なエフェクトを利用できます。スマフォ用として利用するっていうのも手ですね。 スマフォとかにも対応できるCSS3+jQueryなイメージスライダーです。3Dな感じのとかスライスしたエフェクトの素敵なもありますのでインパクトは与えられそうですね。 実機で問題なく動作しました。 Sample 上記はIE7でサンプルにアクセスした際の状態です。赤いラベルはそのブラウザでは非対応、という意味です。 以下、そのサンプルページになります。Chromeなら全
[JS]文字にアニメーションを使った面白いエフェクトを与えるスクリプト -Text Effects
Scrambled Writer 文字をごちゃまぜにし、アニメーションで元通りにします。 Text Effectsの使い方 Text Effectsの使い方は簡単で、「jquery.js」と当スクリプトを外部ファイルとして記述し、スクリプトを実行するだけです。 「Typewriter」を例にすると、下記のようになります。 HTML <div id="my-container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip e
すぐに現場で役立ったPhotoshopの機能を紹介！CSS Nite LP, Disk 22参加レポート - Design Color
今さら知りました…！便利すぎる「コンテンツに応じる」機能 皆さま、Photoshopの「コンテンツに応じる」機能をご存知でしょうか？巷では略して「コンじる」機能とも言われているようですw（以下、そう呼びます） PhotoshopはCS4以降、「コンテンツに応じて?」という言葉を使った自動処理機能を強化してきたようです。 では、その「コンじる」機能とは何でしょう。講師として登壇して下さった結城 しおりさんと鷹野さんが、「コンじる」機能を教えてくださいました！ 人肌は守ります！「コンテンツに応じて拡大縮小」 こちらは講師の結城 しおりさんに教えていただきました。 みなさん、バナーなどを作る時、 「あー！素材の幅がちょっと足りない」ということはありませんか？ こういう時、足りない部分を補完してあげてもいいいのですが、 時間がないのー！という時にはこれです！ イヤイヤイヤイヤ！！と思いますよね？で
【速報】岸田メル、金色に染まる : もみあげチャ〜シュ〜
1 ：以下、名無しにかわりましてVIPがお送りします：2012/04/01(日) 09:34:59.94 ID:tLyd/ThF0 http://twitter.com/#!/mellco 8 ：以下、名無しにかわりましてVIPがお送りします：2012/04/01(日) 09:38:40.14 ID:YZlVTsVC0 マジキチ 9 ：以下、名無しにかわりましてVIPがお送りします：2012/04/01(日) 09:39:24.93 ID:pMf95ZxD0 外でこんなもん持ってたらしょっぴかれるだろｗｗｗ 13 ：以下、名無しにかわりましてVIPがお送りします：2012/04/01(日) 09:38:11.95 ID:qGBsOG6Z0 誰だよ 18 ：以下、名無しにかわりましてVIPがお送りします：2012/04/01(日) 09:40:06.17 ID:1ywmdlW10 >>13
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
様々なフォーマットにも対応可能な、美しい年表コンテンツを実装できるjQueryプラグイン・Timeline - かちびと.net
珍しいので一応メモ。年表を作れる jQueryプラグインです。見た目も 綺麗なんですが、スプレッドシート や、JSON形式にも対応出来るので どこかで使えるかも、と思いました。 機能も申し分ありません。 多用するようなものでもありませんが、スプレッドシートの情報を読み込むのは面白いですね。 綺麗です。上にコンテンツ、下に年表があって、ツールチップ形式でタイムラインが形成されます。ツールチップをクリックするとスライドが動く、というインターフェース。 年表は伸縮できますので見難い、というストレスも感じさせません。また、広がる時のアニメーションもスムーズで気持ちいいです。 全画面にしたり、GoogleスプレッドシートやJSON形式のデータを読み込んでタイムライン化する事も可能みたいです。この点は結構便利では無いかと。 Sample コード<script type='text/javascript
様々なモバイルユーザーインターフェイスが確認出来る「MobileTuxedo」が熱い
発見して記事書き始めて、もしや他でも紹介されているのかと思ったらコリスさんとかでも紹介されてた。なので書くの一度やめてたのですが、やっぱりこのサイトは、もっと広く知られるべきかと思ってご紹介。 なんというか、きっちり絞ってまとめるっていうのはそれだけで価値があるんだなと感じさせられるWebサイトでもありますよね。 素材、デザインなんでもあり 特に注力したいのがインターフェイスデザインの豊富さ。 UI Patterns | Mobile Tuxedo とにかく豊富なリソース。 モバイルインターフェイスの中でもカテゴリがたくさんあります。 ナビゲーション コメントインターフェイス ログインインターフェイス 写真ギャラリーインターフェイス この他、マップやサインアップインターフェイス、設定画面、電卓など色々ありますので、モバイル開発者なら一度は目を通しておくといいかもしれませんね。 またインター
商用利用も無料！ ピクトグラムのアイコン素材のまとめ
全部ダウンロードしたら、3000種以上！ 商用でも無料で利用できる、ピクトグラムのアイコン素材を紹介します。 ※アイコンをご利用の際は、必ずライセンスを確認してください。
連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages - かちびと.net
ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 例えばli要素が100個くらいあったとして、これを10個ごと、10ページに分割し、ページ移動時にエフェクトも実装する、というもの。少々カスタマイズ性には欠けますがこれはこれで手軽に大量の要素をコンパクト化出来るので覚えておいて損はないかなと思います。 以下動作サンプルです。 Sample ページネーションの数字が小さすｇ コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1
TextFX - A jQuery Text Animation Tool by CodingJack | CodeCanyon
TextFX2 Now Available!Sequenced animations, multiple Lines, randomizing and more all handled automatically now in Version 2 TextFX – A jQuery Text Animation Tool TextFX is a jQuery text animation tool for animating a single line of text. It is built for easy usage, but also lends itself nicely to more advanced coders with it’s flexible script. TextFX uses jQuery version 1.10.2 Special Note Althoug
[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック
デモページ [ad#ad-2] 実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。 シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。 また、このグラデー
Macユーザーが心がけたい4つのシンプルなメンテナンス｜男子ハック
1. ディスクユーティリティを実行するアクセス権の検証・修復はもちろん、ハードディスクの検証・修復もマメにチェックしておいたほうがいいです。 特にOSのアップデート前後はアクセス権の検証・修復を行うのは古いMacユーザーにとっては当たり前になっているように思います。 ハードディスクの修復は通常の状態では行えません。 Lionの場合であればMac起動時に「⌘（command） + R」を押しながら起動することで、リカバリーモードで起動し、そこからディスクユーティリティを行いましょう。 2.ソフトウェアアップデートを行い、常に最新の状態にしておく定期的にアップルメニューからソフトウェアアップデートを行いましょう。またアプリケーションのアップデートは、Mac App Storeをチェックしましょう。 アップデートは、一般的なバグ修正、機能拡張、およびセキュリティ修正プログラムなど重要な項目が含ま
使っていないタブの読み込みを停止してメモリー使用量を削減してくれる「TabMemFree」 | ライフハッカー・ジャパン
開いたままのChromeタブは、相当な量のRAMを使用します。タブを使っていない時にもRAM使用量は多いままです。「TabMemFree」は、一定時間が過ぎるとタブの読み込みを停止し、使っていないタブが使用しているRAMを解放してくれます。 後で見るつもりのタブを開きっぱなしで他の作業をしていることが多い方であれば、TabMemFreeを使ってパソコンのリソースを効率化してあげるのが得策です。インストールしたら、タイムアウトまでの時間を設定しましょう。設定された時間が過ぎると、使用していないタブのRAMが解放されます。 こう聞くと、何もかもが良さそうですが、タブの読み込みが停止されると、そのタブには拡張機能のアイコンのみが表示され、もともと何が表示されていたのかは見ることができません。また、これらのタブは読み込まれなくなるため、Google Musicなどで音楽を再生していた場合、これらの
iPhoneでウェブページ全体のスクリーンショットが撮れるアプリ『Web Scroll Capture』 | ライフハッカー・ジャパン
「Web Scroll Capture」は、ウェブページ全体のスクリーンショットが撮れるiPhoneアプリです。URLを指定するだけで、ウェブページを上から下までスクリーンショットとして保存できます。 以下に使ってみた様子を載せておきます。 まず、Web Scroll Captureへアクセスしましょう。インストールしたら、起動して設定を行います。 「Scroll」をONにしましょう。これでウェブページ全体のスクリーンショットが撮れますよ。 スクリーンショットは、iPhoneのカメラロールに保存するか、メールするか選ぶことが可能です。試してみたところ、スクリーンショットは横幅が320pxで保存されていました。 iPhoneでウェブページ全体のスクリーンショットを撮りたいときは、是非活用してみてください。 Web Scroll Capture （カメきち）
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create Email Newsletter Design & Website - Designmodo
【2012年3月】今月の追加したお気に入りサイトまとめ（WEB制作/SEO・面白ネタなど）:susi-paku('A')
新着記事
新着記事
新着記事
