TOP > Design > WEBデザインに利用しやすいミニマルアイコンまとめ「25 Sets Of Clean Icons For Perfect Minimal Web Design」 表示サイズが小さくなることも多いWEBデザインでは、シンプルで分かりやすいアイコンの必要性を感じる場面も多いのではないでしょうか?そこで今回紹介するのが、WEBデザインに利用しやすいミニマルアイコンをまとめた「25 Sets Of Clean Icons For Perfect Minimal Web Design」です。 Impressionist UI Free – User Interface Pack – DesignModo カラーを利用しないシンプルなデザインの中でも、表現力が高いアイコンが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧く
If you've ever uploaded a large video file, then you know this feeling: you're 90% done, and accidentally refresh the page—having to start all over again. In this tutorial, I'll demonstrate how to make a video uploader for your site that can resume an interrupted upload and generate a thumbnail upon completion. Intro To make this uploader resumable, the server needs to keep track of how much a fil
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定(2フィンガータップ、ロウテイト、ピンチアウト、ピンチ) 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
Open-Source Icon Libraries Open-source icon libraries offer a range of high-quality free icon sets for designers and developers to use in their UI projects. These libraries are community-driven and provide flexibility in customization. Linear & Bold Iconsans (660 Icons, SVG, Vue & React Packages) Mage Stroke, Fill & Brand Icons (1089 Icons, SVG, Figma & React Package) Atlas Icons (2,701 Icons, SVG
From this we can infer that “most” people have tried or currently use a CSS preprocessor (54%). I go back and forth in my thoughts on this number. On one hand it seems a bit low considering how much talk there is about them lately and that this poll represents people that visit and interact with a website named “CSS-Tricks.” On the other hand, there is a bit of a uncomfortable legwork involved in
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following post is written by Brandon Pierce. Brandon saw some nicely designed buttons by Wouter on Dribbble and set about building them with CSS. They came out nicely and he agreed to post about the process here. Here’s what we are going to make in this tutorial: View De
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
caretposition.js Description caretposition.js is useful to measure caret x-y position in textarea. Demo Measure caret XY position. Show suggest window. Usage Insert script tag into the head tag. Call Measurement.caretPos() methods. argument is HTMLTextAreaElement, returns object has left and top property It's code like this: var textArea = document.getElementById("textarea"); var caretPosition = M
Your website works. Now let’s make it work faster. Website performance is about two things: how fast the page loads, and how fast the code on it runs. Little changes in your code can have gigantic performance impacts. A few lines here or there could mean the difference between a blazingly fast website and the dreaded “Unresponsive Script” dialog. This article shows you a few ways to find those lin
「アプリを使っていて、操作がいまいちわからないから教えて欲しい」というケース、よくあることだと思います。 そのような場合相手がすぐ近くにいれば、その場で画面を一緒に見ながら教えることができますが、相手が遠隔地にいる場合、なかなか伝えるのが難しいですよね。 そんな時にGoogle Chromeのブラウザ画面上から手軽にリモート操作することができるChromeウェブアプリをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! Google Chromeから遠隔操作できる「Chrome Remote Desktop 」 「Chrome Remote Desktop BETA」は、Google Chromeの画面上から、別のパソコンの画面を遠隔操作できるChromeウェブアプリ。 ブラウザの画面
coLinuxのススメ coLinuxは、Windows上でLinuxを動かせる素晴らしいツールです。 このマニュアル通りにやれば、すぐにcoLinuxをインストールして動かすことができるでしょう coLinuxのメリット 無料。AmazonEC2やレンタルサーバのような月額費用はかかりません。 高速。VMwareより本物のLinuxに近いので高速なのだそうです。 軽い。中古のノートPCに入れてもサクサクです。 メンテが楽。イメージファイル1個をコピーするだけでバックアップ完了。 私は中古のノートPC (2005年発売。Intel Pentium M 1.2Ghz)に入れて使ってますが、サクサク動きます。 [図解]coLinuxインストール完全マニュアル インストール手順を画像つきで解説しました。 例としてcoLinux0.7.8上にUbuntu9.04をインストールするケースを取り上げま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く