TOP  >  modal

Tag : modal

2017年12月06日

使えるフリーのモーダルウィンドウまとめ「12 Free Modal Window Libraries & Plugins For Your Site」

WEBサイトの機能として欠かせない存在になりつつ在るモーダルウィンドウ。ギャラリーを閲覧させたり、商品詳細を表示させたり非常に便利な仕組みです。今回ご紹介するのはそんなモーダルウィンドウを制作する際に役立つ、フリーのモーダルウィンドウをまとめた「12 Free Modal Window Libraries & Plugins For Your Site」です。

12-free-modal-window-libraries-plugins1
iziModal.js

シンプルなタイプから、ちょっと凝った機能を搭載した応用的なものまで、様々なモーダルウィンドウが12点紹介されています。更にその中から、おすすめのものを3点ピックアップしてみましたので、以下よりご覧ください。

詳しくは以下
(さらに…)

続きを読む
posted 09:00  |  
Category: javascript   
このエントリーをはてなブックマークに追加
2017年11月12日

JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」

Webサイトを閲覧していると様々なモーダルウィンドウを見かけると思います。使用用途はもちろん、デザインも様々。そんな中今回は、デベロッパーにとって便利な、JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」を紹介します。

modal-script01
SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

モーダル制作に便利なオープンソースが集約されたまとめとなっています。いくつか気になるものをピックアップしてみました。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: plugin   
このエントリーをはてなブックマークに追加
2016年08月02日

レスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」

WEBサイトでも頻繁に利用されるモーダルウィンドウ。詳しく情報を表示したり、アラート的に利用したり、コンタクトフォームなどで利用したりなど様々な使い方が可能ですが、今回紹介するのはレスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」です。

izimodal1

モーダルウィンドウとしての機能は一般的なものですが、モーダル内のオブジェクトが細かく動作しクオリティが高い印象を与えてくれるモーダルウィンドウです。

詳しくは以下

(さらに…)

続きを読む
posted 09:50  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2007年11月05日

表示中のWordPressの記事をワンクリックで編集画面に飛べるブックマークレット

編集ボタンを付けている方も多いかと思いますが、ちょっと記事下につけるのはみっともないから…と言う方にはうってつけのブックマークレットがChocolateさんで公開されている「1クリックで表示中のエントリーの編集画面を表示するブックマークレット(WordPress用)」です。

エントリーを投稿した後、間違いに気がついた時、または書き足したい時に瞬時に使え便利そうです。ただしWordPressのパーマリンクの設定がid表示になっているのが利用条件なので当ブログのように投稿スラッグを指定している方は使えないので注意が必要です。

ブログの仕様、階層によって若干コードを変更する必要があるらしいので、このブックマークレットを使ってみようかなと思う方は本家のコードを参考にカスタマイズしてみてください。

管理人もよく誤字脱字分けの分からない文章をたまに書いているので、編集画面に何度も行き来したりしています。パーマリンクの設定がID表示になっている方は導入しても損は無いブックマークレットだと思います。

1クリックで表示中のエントリーの編集画面を表示するブックマークレット(WordPress用)

続きを読む
posted 01:46  |  
Category: WordPress   
tag: WordPress
2017年09月15日

モックアップやUIデザインなど Webデザイナーの為の使えるフリー素材50まとめ「50 Dribbble Freebies For Web Designers」

デザイン業務を効率化してくれるフリー素材。使えるハイクオリティな素材を日頃ストックしておけば、デザインの幅が広がるだけでなく時短にも繋がります。今回ご紹介するのはそんなデザイン業務を支えてくれる、Webデザイナーの為の使えるフリー素材をまとめた「50 Dribbble Freebies For Web Designers」です。

50-dribbble-freebies1
Eshop Mobile Product Pages – Free .PSD by Marth – Dribbble

モックアップやUIデザインなど幅広い素材が50種類もまとめられています。その中からおすすめの素材を幾つかピックアップしてご紹介しますのでご覧下さい。

詳しくは以下
(さらに…)

続きを読む
posted 09:00  |  
Category: WebDesign   
2009年05月27日

WEBレイアウトの問題を解決するための8つのソリューション「8 Layout Solutions To Improve Your Designs」

それはシンプルなページでも、多くの情報を配信するような場合でもデザインももちろん大切ですが、大抵の場合WEBデザインをしているとその情報をどう整理し、どう見せるかと言う事が重要になってきます。今日紹介するのはWEBをレイアウト上で役に立つ様々案ソリューションを紹介している「8 Layout Solutions To Improve Your Designs」。

solutionweb00
Examples of Mega-Drop-Down-Menus

最近よく使われているものから、定番のものまで大きく8つのジャンルに分けレイアウトに必要な技術を紹介しています。方法論だけではなく実際のスクリプトも併せてまとめられていますので、今日は併せていくつか紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:39  |  
Category: WebDesign   
tag: webdesign
2017年01月09日

コピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」

WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。

cssbt01

このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。

詳しくは以下

cssbt02

登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。

カスタマイズできる項目としてはカラー6種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。

Bttn.css – Demo

続きを読む
posted 08:30  |  
Category: Design , WebDesign   
2012年01月15日

シンプルでスマートなベクターアイコンパック「Free Vector Web Icons (91 Icons)」

WEBを制作にあたり非常に便利な素材アイコン。使い勝手が良いアイコンは製作時間を大幅に短縮してくれますが、今日紹介するのはシンプルでスマートなベクターアイコンパック「Free Vector Web Icons (91 Icons)」です。

最近のクラウドだったり、マップピンなど比較的新しいサービスに対応したものから、スタンダードなものまで幅広く91ものアイコンがセットになっています。収録されているアイコンは以下のとおりです。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Design , Photoshop , WebDesign   
2016年11月27日

クリスマスを前に是非チェックしたい フリーデザインリソースまとめ「50 Free Christmas Templates & Resources for Designers」

クリスマスシーズンが到来し、街はすでにイルミネーションできらきらと輝いています。今回はそんなクリスマスシーズンをもっと盛り上げてくれるようなフリーデザインリソースまとめ「50 Free Christmas Templates & Resources for Designers」を紹介したいと思います。

christmasfree0
Jingle Bells Christmas Vector Elements – Download Free Vector Art, Stock Graphics & Images

テンプレート系から、アイコン、フォント、ベクター素材など、さまざまな種類のフリー素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2012年11月08日

Photoshopでのデザイン制作の参考に!テクスチャ制作チュートリアルまとめ「40 Great Photoshop Texture Tutorials」

画像加工やCG制作になくてはならないソフトとなっているPhotoshopは、非常にたくさんの機能が備わっており、さまざまなクリエイティブを生み出すことができます。そんな中今回紹介するのが、Photoshopの効果を有効活用したテクスチャの制作チュートリアルをまとめた「40 Great Photoshop Texture Tutorials」です。


Mix&Mash: Transform a boring piece of wood

メタリックな表現や、チェックなどのファブリックを再現したテクスチャまで、さまざまなシーンを生み出すことができるチュートリアルが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2008年03月05日

10万件以上のロゴのベクターデータがダウンロードできる「ロゴタンク」

制作には色々とついて回る企業ロゴデータ。今日紹介する「ロゴタンク」は企業、団体、商品などのロゴマークデータを10万点以上、無料でダウンロードできるようになっています。

ダウンロードできるロゴデータの一部

配布している形式はIllustrator EPS形式で対応しているイラストレーターのバージョンは8.0以降となっています。配布されているロゴデータは業界に偏り無く有りとあらゆる業種のロゴデータが配布されています。

詳しくは以下

(さらに…)

続きを読む
posted 10:36  |  
Category: Design , vector   
tag: Design vector
2008年01月08日

役割別にUIデザインを集めたFlickrコレクション「Design Solutions」

様々なFlickrセットやコレクションが公開されていますが、今回紹介するのはWEBのユーザーインターフェイスに特化したコレクション「Design Solutions」こちらではWEBページの役割毎にユーザーインターフェイスのセットを作っています。

ユーザーインターフェイスコレクション

かなりのセットが用意されていて、404ページ、フォームページ、フッターなどの基本的なページから、コメント、ヘッドライン、カレンダーと言った少し変わったUIまで全部で34セットのユーザーインターフェイスが公開されています。

詳しくは以下

(さらに…)

続きを読む
posted 09:34  |  
Category: WebDesign   
tag: webdesign
2016年05月21日

ソーシャルメディアのカバーデザイン等に便利な写真トリミングジェネレーター「Landscape」

さまざまな種類のソーシャルメディアサービスが存在しており、専用のデザインを制作することも非常に多いかと思います。それぞれのサービスでサイズが違っているため、毎回調べるのが面倒・・そんな時に活躍してくれるwebサービス「Landscape」を今回は紹介します。

landscape

ソーシャルメディアのカバーデザイン等を、各SNSの各所サイズに簡単に加工し生成することができる、非常に便利な写真トリミングジェネレーターです。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Tool   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る