[JS]イージングのアニメーションを伴って画像を拡大するスクリプト -jQuery Image Flyout
イージングのアニメーションを伴って画像を拡大・縮小表示するLightbox風のjQueryのプラグインを紹介します。 JQuery Image Flyout デモページ [ad#ad-2] jQuery Image Flyoutの特徴 プリローディング jQuery Image Flyoutではダイナミックな画像のプリローディング機能を実装しています。画像のローディング中は、ローディング用のテキスト、またはローディング用のアニメーションを利用することができます。 イージングのアニメーション jQueryをはじめ、イージング用のライブラリの全てのイージングのアニメーションをサポートしています。 フルサイズにも対応 画像の拡大時のサイズは、画像の最大のサイズに合わせて設定するか、表示領域に合わせてサイズを調整することが可能です。 フェードイン・アウトの対応 画像を表示する際、フェードイン・アウ
背景素材｜マンガ資料室｜::::::Manga-Website 漫画街::::::
※この背景データに関して※ １）この背景データは、【自作の漫画作品の制作】に使用する限り、 プロ・アマを問わずフリーで使用することができます。 ２）この背景データそのものを、無断で二次利用・再配布することは厳禁します。 ３）商用利用の場合、事前に銀杏社に確認し、媒体、発売日、作品名をお知らせ下さい。 ４）なお、この背景データの著作権は、山本直樹先生に帰属します。 ◎データは1枚あたり3〜6MBあります。ダウンロードする際はお気をつけください。 ●住宅／住宅街／アパート／団地 ●学校／病院 ●街／店 ●田舎の風景 ●木のシルエット powered by 銀杏社 掲載の漫画・記事等のすべてのコンテンツの無断複写・転載をお断りいたします。 Copyright(C)GINNANSHA Co.,LTD. All rights reserved. No reproduction or republic
サイト公開前の告知ページのサイトテンプレート４５:phpspot開発日誌
45 Neat Coming Soon and Under Construction Templates | Naldz Graphics サイト公開前の告知ページのサイトテンプレート４５。 サイト公開日を事前に設定しておき、期待を膨らませてもらうようなマーケティングがあるそうですが、そういったサイトを作るのに便利な４５のテンプレートが紹介されています。 オープンをいきなり伝えるのもいいですが、こうした告知ページを用意することで、そのサイトで何をしようか？といったユーザの想像力をかきたて、サイトオープン時に一気に使ってもらう、みたいなことに繋げられるのかもしれません。 有償ですが、数ドル程度の投資で、PHPによるバックエンドやPSDデータなんかも付いてくるので安価に入手できます。 単にデザインとして参考にするだけでも価値はありそう。 関連エントリ クリエイティブなデザインのCSSサイト２７
好みのグリッドを作成してPNGやPhotoshop形式でダウンロード可能な「Modular Grid Pattern」:phpspot開発日誌
好みのグリッドを作成してPNGやPhotoshop形式でダウンロード可能な「Modular Grid Pattern」 2011年02月15日- Modular Grid Pattern 好みのグリッドを作成してPNGやPhotoshop形式でダウンロード可能な「Modular Grid Pattern」。 ブラウザ上で、グリッドのラインの高さ等を細かく設定して、パターンを生成し、そのままダウンロードすることが出来ます。 サイトデザインを作るときのグリッドとして活用できそうです。 更に、Photoshop CS5用の拡張も配布されており、Photoshop上でグリッドを作成することも可能。 関連エントリ 200を超える非常に美しいPhotoshopのパターン集 背景画像に使えるPhotoshopの背景パターン2000 サイトの背景に使うと印象を際立たせられそうな50のPhotoshopパタ
オンラインで画像を編集できる「Pixenate」
オンラインで画像を編集できるPixenateを紹介します。 １．Pixenateとは Pixenateはオンラインで画像を編集できるサービスです。外出先で自分のPCがなく、ちょっとした画像編集が必要なときに使えそうです。 Pixenate facebookとの連携も可能なようです。 以下、使い方の紹介です。なお自分の画像をアップロードしなくても、トップページに表示されているサンプル画像を使って編集を試すことができます。 ２．使い方 まずローカルPCにある画像をアップロードします。アップロードするには左上の「Choose your image to edit.」をクリック。 画像をアップロードするフォームが開くので、任意の画像を選択し、「Upload this image.」をクリック。 アップロードされました。 アップロード後、左側に編集メニューが表示されます。 これは操作のアンドゥとリド
ハイクオリティで美しいpsd素材まとめ「80+ Ultimate Collection of High Quality Free PSD Files」
デザイン製作で大活躍のpsdアイコン、最近ではハイクオリティなタイプのものが人気のようで、数多くリリースされていますが、今回紹介する「80+ Ultimate Collection of High Quality Free PSD Files」にも、美しいデザインのpsd素材が多数収録されています。 （PixelResort » Home of Designer & Iconist Michael Flarup） アイコンや、デザインのアレンジ・ポイントとして活用できそうなデザイン性の高いpsd素材を豊富にまとめたサイトとなっています。いくつか気になったものを以下より紹介いたします。 ■Weather Icons by ~Aramisdream on deviantART 天気アイコンです。ツヤのある独特の雰囲気が特徴です。 ■Designers Icons by ~EAMejia on
最近リリースされたクリエイティブなHTML+CSSのテンプレート「25 Fresh and Professional CSS and HTML Templates」
最近リリースされたクリエイティブなHTML+CSSのテンプレート「25 Fresh and Professional CSS and HTML Templates」 HTML5やCSS3などの次世代の企画も徐々に業界内では浸透してきていますが、まだまだ商業ベースでは特定の用途を除いては使えないシーンも多く、HTML+CSSを用いて制作をしている人がほとんどだと思います。今日紹介するのは最近リリースされたクリエイティブなHTML+CSSのテンプレート「25 Fresh and Professional CSS and HTML Templates」です。 25 Fresh and Professional CSS and HTML Templates 様々なテンプレートがまとめられています。今日はそのなかからいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Ph
先端のテクノロジーを表現できるphotoshopブラシ集「Detailed Technology Photoshop Brush Sets (1000+ Brushes)」
先端のテクノロジーを表現できるphotoshopブラシ集「Detailed Technology Photoshop Brush Sets (1000+ Brushes)」 デザインは様々な分野を表現する機械があり、最先端のイメージを持たせて欲しいなんて依頼もあるかと思います。今日紹介するのは先端のテクノロジーを表現できるphotoshopブラシを集めたエントリー「Detailed Technology Photoshop Brush Sets (1000+ Brushes)」です。 Tech Brushes For You (56 Brushes) 機械の図面から、基盤、デジタル表示まで、様々なブラシがまとめられていました。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Abstract Tech Brushes (55 Brushes) グ
[WordPress]Twitter,Facebook,はてなブックマーク,Evernote,Instapapreに対応している神Plugin。
WP Social Bookmarking Lightという名の本当に素晴らしいプラグインに出会えました。開発者様に感謝です。 WordPressにソーシャルブックマークボタンを楽々設置：WP Social Bookmarking Light | NINXIT-BLOG ソーシャルネットワーク, ソーシャルブックマーク系のリンクをエントリーの先頭か後尾に自動で追加するプラグイン。 例えば、はてなブックマークや Facebook や Google Buzz や Twitter など。 どのリンクを追加するかは、設定画面から選択可能です。 このプラグインは、Social Bookmarking JP や wp-hatena をインスパイアしたものです。 上記画像のように、複数のサービスにプラグインで一発対応してくれます。 また対応しているサービスの数が凄い。題名に挙げたサービスの他にも liv
WordPress.com公式ブログで紹介された秀逸なデザインと機能のテーマ27選
ニューヨークタイムズのブログ「NY Times Blogs」やSCEA公式のプレイステーションブログ「PlayStation.Blog」でも採用されているオープンソースで無料利用可能なブログ/CMSソフト「WordPress」の魅力として、豊富なデザインが揃った各種テーマの存在と、それらを簡単に切り替えることでブログの雰囲気をガラッと変えることができるという点がありますが、あまりにも数が多すぎてどれを使えばいいのか選ぶだけでも一苦労。 そこで参考になるのが、スパムコメントやトラックバックを止めるプラグイン「Akismet」で有名なAutomatticが運営しているブログサービス「WordPress.com」公式ブログで紹介されている各種テーマです。 百聞は一見にしかず、実際にどういう秀逸なデザインのテーマがあるのか、実際に選んでみた一覧は以下から。 Blog - WordPress.com
無料で商用でも利用OKなWebdesigner Depotのアイコン集「Kaching」「Childish」「Buddycons」「Reflection」などなどとにかくいっぱい
イーコマース用のアイコン「Kaching」、子ども向けウェブサイト用のアイコン「Childish」、各種ソーシャルメディアのアイコンをベクター形式で揃えた「Buddycons」、モノクロベースで208種類もある実用アイコン「Reflection」、ベクター形式のソースファイルを同梱したRSS用のアイコン「Supra」、ブルーとブラックを基調にしたベクター形式も収録済みのアイコン「Primo」、ベクター形式とPNG形式の両方を揃えたTwitter用各種アイコンセットなどなど、とにかく山ほど無料で商用利用も可能なオリジナルデザインのアイコンを配布しているのがウェブデザインを扱うブログ「Webdesigner Depot」です。 というわけで、各種アイコンのダウンロードは以下から。 Kaching - Exclusive Free eCommerce Icons | Webdesigner De
WordPress導入後にまずやる最低限の設定と必ず入れるプラグインのメモ » とりあえず9JP
個人的には、リビジョンから記事を復旧したい場面はほぼ皆無なので…。 リビジョン機能はオフにしている。 《設定方法》 wp-config.phpに以下の設定を追記。 define('WP_POST_REVISIONS', false); ※別にインストール直後で無くとも構わないのだけれど、少し使った後だと、後々この設定を有効にしても既に保存されているリビジョンについては自動削除されず、削除する手間が面倒なので。 テーマ次第だけれど、確か3.x系の標準テーマであるTwentyTenも含めて多くのテーマで、既に削除済みの記事でも404ヘッダを返してないらしい。 何となく検索エンジンに嫌われそうな気がするので、存在しないページにアクセスした場合もステータス200を返している場合は、使用中のテーマの404.phpの最上部に <?php header("HTTP/1.1 404 Not Found")
JavaでTwitterをOAuth認証して使えるTwitter4Jとは
JavaでTwitterをOAuth認証して使えるTwitter4Jとは：クラウドとフレームワークで超簡単ケータイ開発（2）（1/3 ページ） 数年前に比べケータイ向けサービス構築を支援するフレームワークやノウハウがたまってきて、そして無料または、格安でサービスを公開できる仕組み（クラウドやVPSなど）も普及している今こそ、ケータイ向けサービス開発を始めるチャンスではないでしょうか 携帯端末は、何気なく“つぶやく”のに最適！ 前回の「Google App EngineとSlim3とMobyletで始める携帯Web入門」では、Javaのケータイ向けサービス開発を簡単にするクラウド環境とフレームワークなどを紹介し、開発環境を構築して動かしてみました。数年前に比べ、今ケータイ向けサービス構築が容易になっていることが確認できたかと思います。 携帯端末は、いつでもどこでも触れるため、つぶやくためのデ
Pythonドキュメントの日本語訳のPDFがすごい - 偏った言語信者の垂れ流し
先日公開されたPythonドキュメントの日本語訳のPDFがすごい。なにがすごいって、ページ数が合わせて3000ページぐらいあるところが。 ダウンロードファイル一覧 - Python Japanese Environment - OSDN いつもお世話になってます。ドキュメントの著者、翻訳者の方々に感謝。 追記 このPDFはSphinxというドキュメンテーションシステムを使って出力されてます。 オリジナルはreStructuredTextという形式のテキストファイルです。 Overview — Sphinx 1.4.3 documentation Sphinx-Users.jp — Python製ドキュメンテーションビルダー、Sphinxの日本ユーザ会 Google Project Hosting
PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
Web開発にお役立ちなチートシート集 | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー All The Cheat Sheets That A Web Developer Needsという記事を先日見つけて，割と知らないものが多く，また便利だったのでご紹介:-)。英文のチートシートだけど，仕様を短くまとめてあるチートシートは日本人のWeb開発者も便利に使えるはず。 HTML HTML/XTML in one page HTML5: The Evolution of Web Standards by James Sugrue (X)HTML Elements and Attributes Doctype Declarations (DTDs) XHTML Character
JavaScriptでDOMに挑戦
HTMLをドキュメントオブジェクトとして扱うための約束事「DOM」を、JavaScriptを通して使うことで、HTMLの好きな部分を読み書きすることができます。 連載の前回、「第6回 配列とオブジェクトでデータをまとめる」では、配列とオブジェクトの基本的な扱い方を説明しました。扱うデータの量が少ないうちは、普通の変数だけでなんとかなってしまいますが、データの量が増えれば増えるほど、配列やオブジェクトのありがたみが分かります。 特に、配列に入れたデータを、ループで一気に処理する快感が分かるようになれば、初心者卒業といってもいいでしょう。 それでは、前回の課題の答え合わせをしてみましょう。平均点の求め方は、配列のサンプルでやっていたので簡単すぎたでしょうか。解答サンプルでは、成績の一覧と平均点を同時に表示するようにしてみました。 <html> <body> <script type="text
Thumbnails Preview Slider with jQuery | Codrops
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make […] In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
WebプログラマのためのIPv6入門（1/2） － ＠IT
IPv4アドレス枯渇の日を前に WebプログラマのためのIPv6入門 おがわ あきみち 2011/1/31 IPv4アドレスが枯渇の日を迎えます。この記事では、これまでこの問題にあまり縁のなかったWebプログラマ向けに、IPv4アドレス枯渇とIPv6移行にともない生じる課題について説明します。 迫るIPv4枯渇の日 間もなく、IPv4アドレスが枯渇の日を迎えようとしています。これまで拡大を続けてきたインターネットも、1つの節目を迎えます。 IPv4アドレス枯渇とIPv6への移行は、ネットワークとしてのインターネットに直接関わっているインフラ系エンジニアには非常に身近な話題でしょう。しかし、その他のIT系エンジニアにとっては、あまり実感が持てない問題だと思います。 そこで今回は、Webプログラマの皆さん向けに、IPv4アドレス枯渇とIPv6への移行とは何なのか、どんな課題が生じるのかを紹介し
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
PythonでWebアプリ開発入門のススメ Flask/MongoDB - mizchi log
TwitBlogin! http://twitblogin.com/ とか作ったことだし、そこそこ開発環境整って、今なら思いつく限りのサービスはさっくり実装できそうだったのでPython初心者向けに書いておく。 少しでもPythonユーザが増えれば幸い。 対象は Python の基本的な構文程度はわかるけど、具体的に何から手をつけていいかわからない人 目次 Apache/WSGI/MongoDBの環境構築 flask [ Sinatra風ウェブアプリケーションフレームワーク] pymongo [ MongoDBラッパー ] werkzeug [Web Application デバッガ] jinja2 [ HTMLテンプレートビルダー ] pyquery [ jQuery風HTMLパーサ ] nose [ TDD ] 細かいライブラリの使い方とかPython本体の言語仕様とかは適当にぐぐって
フレッシュな50のPhotoshopテキストエフェクトチュートリアル集:phpspot開発日誌
50 Best Photoshop Text Effect Tutorials | CreativeFan フレッシュな50のPhotoshopテキストエフェクトチュートリアル集。 新しめなテキストエフェクト作成用チュートリアルが沢山で参考になります。 次のようなかなり壮大なものから汎用的に使えるものまで揃っています。 これは覚えておくとよさそうですね。 関連エントリ 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集 あの有名プロダクトのロゴを作るPhotoshopチュートリアルいろいろ クールなネオン風ロゴを作成するPhotoshopビデオチュートリアル クールな惑星っぽいテキストロゴ作成Photoshopチュートリアル
HTML5サイトの土台を作ってくれる「Initializr」:phpspot開発日誌
Initializr HTML5サイトの土台を作ってくれる「Initializr」。 １からHTMLを作っていくのもいいですが、Initializrを使えばウィザード形式で進めると基本的なファイルをzipでダウンロード可能です。 基本HTMLを含むか、jQueryを含むか？の設定や、サーバ設定も含んだ形でパッケージ化が可能です。 HTMLに初期コンテンツを含むかどうか？ jQueryを含むかどうか？ その他設定した後、ダウンロード デザインはHTML５のロゴをモチーフにしたのだと思いますが、UIはなかなか分かりやすいウィザードになっています。 関連エントリ HTML5を使ったサイトをまとめたギャラリーサイト色々 見ておくべきHTML5サイト集 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベース
960グリッドシステムをjQuery-Mobileと併用する為のスタイルシート・jquery-mobile-960
どこかで使うかもしれないと思って メモがてらシェア。スマートフォンに サクッと対応させるjQueryプラグイン のjquery-mobileに960グリッドシス テムを取り入れることが出来るcss、 jquery-mobile-960です。 なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。 jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。 少し大きいですけど全画面キャプチャ↓ 実際にiPhoneで確認 縦の場合。 横の場合。 使い方<link href="http://code.jquery.com/mobile
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
seotemplate.biz
Home - Designzzz
5509.me