クレジットの記載無しで、すべて商用利用無料！写真・動画・イラスト・フォントがダウンロードできる -Stockio高解像度の写真、ベクターのパターン素材やイラスト素材、SVGのアイコン素材、動画、フォントなど、すべてが商用利用無料、クレジットの記載無しで利用できる無料素材の総合サイトがローンチされました。 素材はすべて1クリックでダウンロードでき、登録やメールアドレスなど面倒なことは一切不要です。
UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
UXデザインとはユーザーエクスペリエンス(UX)、Webサイトやアプリの使い勝手やユーザーが体験する満足度を重視したデザインのことで、あなたが満足するデザインをつくってもユーザーが使いやすいと感じなければUXが良いとは言えません。 ユーザーのリサーチやテストやフィードバック、プロトタイプやワイヤーフレームの作成、クライアントやチームメンバーとのコラボレーションなどに役立つツール・サービスを紹介します。 20 Valuable Tools For UX Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーのリサーチ・テスト・フィードバック プロトタイプ・ワイヤーフレームの作成ツール コラボレーションのツール ユーザーのリサーチ・テスト・フィードバック ユーザーのリサーチは、プロトタイプを制作する前におこなう
250種類の緻密に描かれた紋様が素晴らしい！Webでも紙でも商用利用無料のサークル状のベクター素材
緻密な紋様でヴィンテージ風にデザインされたサークル状のベクター素材を紹介します。Web・アプリ・紙・プロダクトなどの商用でも利用できます。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに！ 250 Decorative Round Shape and Brush セットには、110種類のサークル状のエレメントと140種類のブラシが含まれています。 対応バージョンはCS3+。CC2015でももちろん利用できます。
レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
[CSS]アイデアにセンスを感じる、アニメーションがかわいいナビゲーションを実装するチュートリアル
ナビゲーションの各アイテムをホバーすると、光源が移動するラーヴァランプ風エフェクトをスクリプトは使用せずに、スタイルシートで実装するチュートリアルを紹介します。 矢がハートを射貫くのかわいいですね。 デモページ 実装 実装は共通パートと3つのデモで異なるパートに分けて紹介します。 Step 1: 共通 HTML HTMLは3つとも基本的には同じです。 classの「nav」は共通で、「ph-line-nav」を変更して利用します。 <div class="nav ph-line-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div> Step 2: 共通 CSS 3つのデモの共通のスタイ
[JS]jQueryのプラグイン33+1選 -2012年10・11月
equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
デザインの引き出しを増やそう！細部にまでこだわった美しいウェブUIエレメントのPSD素材のまとめ
細部まで作り込まれた美しいデザインのウェブ用のUIエレメントのPSD素材を紹介します。 そのまま制作に使ってもよし、インスピレーションをもらってもよし、PSDなのでエフェクトの勉強をしてもよし、などいろいろ活用できると思います。 ※一部のファイルはPNGフォーマットです。
要件に合わせたMedia Queriesの実装方法のまとめ | コリス
スマートフォン・デスクトップをはじめ、IE6などのレガシーブラウザ対応といった要件に合わせたMedia Queriesの実装方法を紹介します。 Techniques For Gracefully Degrading Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 テクニック1：スマートフォンユーザーがメイン テクニック2：レガシーブラウザは非対象 テクニック3：スマートフォンユーザーのみ テクニック4：デスクトップユーザーがメイン テクニック5：レガシーブラウザも含める テクニック1：スマートフォンユーザーがメイン 最初に紹介するテクニックは、Media Queriesをそのまま使うものです。 CSS #container { _width: 460px; /* IE6用 */ max-width: 460px; } @media only scree
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。 各デバイスの幅は、2012年3月のデータです。 A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
CSS3の制作をぐっと楽にする厳選20のオンラインツール
レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースのまとめ
ページ上のシンタックスハイライトされていないコードをハイライトできるブックマークレット -Syntaclet