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   
このエントリーをはてなブックマークに追加

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

2014年11月01日

600種の豊富なベクターシルエット素材「Free download: 600+ free vector silhouettes」

いろいろなデザインシーンで便利に活用できるベクターのシルエット素材。さまざまな種類をストックしておくといざという時に活躍してくれます。そんな中今回紹介するのは、600種の豊富なベクターシルエット素材「Free download: 600+ free vector silhouettes」です。

600vector1

人間はもちろん、動物、乗り物など、種類豊富にさまざまなポーズのベクターシルエットがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: vector   
2015年04月25日

ファッション系デザインに最適 ウェア&シューズのフリーアイコンセット「Clothing and Footwear – FREE ICON SET」

アイコンにはいろいろなテーマのものがあり、デザインしているwebサイトにあった最適なものを選ぶことが、ユーザビリティの向上の鍵となります。そんな中今回紹介するのは、ファッション系デザインに最適なウェア&シューズのフリーアイコンセット「Clothing and Footwear – FREE ICON SET」です。

clothing

さまざまな種類のウェア類、そしてシューズ類がアイコン化されており、ファッションシーンに合わせて使い分けることができそうです。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2016年10月04日

あらゆる画像フォーマットを、最適化したjpegに変換してくれる「jpeg.io」

画像の重さはWEBサイトにとって非常に重要な要素で、最適化することで、読み込み速度やサーバー負荷など多くの問題を解決してくれます。今日紹介するのはWEB上で、あらゆる画像フォーマットを最適化したjpegに変換してくれるWEBサービス「jpeg.io」です。

jpegio01

利用方法は非常に簡単で、基本的に変換したいファイルをドロップアンドドラッグするだけでjpgを最適化してくれます。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:04  |  
Category: WebService   
2015年09月11日

オンラインショップ等で活躍 フリークレジットカードアイコン集「15 Free Credit Card Icons Designers Love to Have For Web Design」

決済する手段として多くのシーンで利用されているクレジットカード。種類も豊富で、オンラインショップなどではどの種類が利用できるかをカードアイコンで表現することも。今回はそんなシーンに活躍する、フリークレジットカードアイコン集「15 Free Credit Card Icons Designers Love to Have For Web Design」を紹介したいと思います。

cardicon0
Dribbble – Credit Card Icons + PSD by Evgeny Seleznev

さまざまなテイストでデザインされたクレジットカードをモチーフとしたアイコンがセットダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:30  |  
Category: WebService   
2017年01月04日

CSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」

WEBの演出の一つで、UXのストレスを軽減してくれるローディングアニメーション。WEBサイトがだんだんリッチになる中、当たり前の存在になってきていますが、今回紹介するのはCSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」です。

textloading0

通常ローディングアニメーションはいくつかの画像を利用して生成されますが、このアニメーションはCSSとテキストのみで制作されるため非常に軽量です。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WebDesign   
2017年01月21日

2017年の主流となるWEBデザインの背景のアイデア集「5 Modern Website Background Ideas for 2017」

1カラムのダイナミックなデザインが主流となって暫く経ちますが、WEBサイトの印象を決定づける要素の一つに背景があります。特にPCサイトでは大きな面積を占めることから非常に重要な要素ですが、今日はそんな背景デザインのアイデア集、2017年の主流となるWEBデザインの背景のアイデア集「5 Modern Website Background Ideas for 2017」を紹介したいと思います。

haikei01
1. Geometry on Photos
幾何学的なデザインを写真に重ねる背景デザイン

2017年のトレンドとなりうる背景デザインが全部で5つ掲載されていましたので以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:30  |  
Category: WebDesign   
2013年07月28日

いろいろなデザインで活用できる ミニマルデザインフォントまとめ「19 Free And Stylish Minimalistic Fonts For Your Designs」

インターネット上で配布されている素材の中でも、活用の幅の広いフリーフォント。特にシンプルで汎用性の効くタイプは1つでも多く持っておきたいものです。今回そんなタイプのミニマルデザインフォントまとめ「19 Free And Stylish Minimalistic Fonts For Your Designs」を紹介したいと思います。

minimalfont2
Simple Ronde Font | dafont.com

いろんなデザインに使用できそうなフォントが19種、ビジュアルイメージと共に公開されています。いくつかピックアップしていみましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:38  |  
Category: Font   
2011年11月17日

画像やイメージの魅せ方にこだわれるWordPressプラグインまとめ「12 Best Photo and Image WordPress Plugins」

さまざまなプラグインを利用して、手軽にオリジナリティの高いサイトを構築できるWordPress。今回は、数あるWordPressのプラグインの中から、画像やイメージの魅せ方に優れたプラグインをまとめた「12 Best Photo and Image WordPress Plugins」を紹介したいと思います。


WordPress › Featured Content Gallery « WordPress Plugins

シンプルなスライドはもちろん、ユニークな動きを演出できるプラグインが多数紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:03  |  
Category: plugin , WordPress   
2010年03月07日

2010年2月のwordpressフリーテーマベスト10「10 Best Free WordPress Themes Of February 2010」

世界中で使われているwordpress。その魅力の一つに豊富なフリーテーマがあります。テーマは世界中で毎日新しいものが生み出されていて、非常に質の高いものもフリーで配布されています。今日紹介するのはそんなwordpressのフリーテーマの中から2月に発表されたものなかから、よりすぐられたベスト10をまとめたエントリー「10 Best Free WordPress Themes Of February 2010」を紹介したいと思います。

themestema01
SmashingMagazine

様々なクオリティの高いテーマが集められていますが、今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:11  |  
Category: WebDesign , WordPress   
2016年11月14日

HTMLテーブルが直感的に簡単に生成できる「DIV TABLE」

tableタグやDIVタグを利用して制作するテーブル組、それほど難しい仕組みでは無いのですが、いざ手書きをすると時間を取られたりします。今日紹介するのはHTMLテーブルが直感的に簡単に生成できるWEBジェネレーター「DIV TABLE」です。

div_table01

利用方法は非常に簡単で、tableタグで生成するかDIVタグで生成するかを選んで、あとはBorder、width、Cell Paddignを設定して、あとは欲しいテーブルサイズを選択すればタグが生成されます。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:43  |  
Category: WebDesign , WebService   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る