ホワイトをベースにしたフラットなスタイル、ソリッドなライン、磨りガラスのような半透明なパネル、ブラーエフェクトなど、iOS 7のユーザインターフェイスやアイコンを作成するのに役立つ素材・リソースを紹介します。 本体のモックアップ用の素材は、前回まとめたiPhone 5s/5cをどうぞ。 iPhone 5s/5cのモックアップ用のPSD素材のまとめ
全653種、商用利用無料、再配布可能だけでもすごいですが、更にベクターのEPS付きとフリー素材として至れり尽くせりのアイコンを紹介します。 アイコンのデザインもシンプルなので、使い勝手もよさそうです。 Default Icon [ad#ad-2] ダウンロードできるアイコンのフォーマットはEPS, PNG(16x16, 32x32, 48x48, 64x64, 128x128, 256x256)です。 アイコン全653種はウェブサイト・ウェブアプリケーション用にさまざまなものが揃っています。 以前紹介した際はver.1で168種類でしたが、作者様よりver.2にして数も増やしたよ、と連絡を受けました。 [ad#ad-2] アイコンのライセンスはCC 3.0で、個人でも商用でも無料で利用できます。また、再配布も可能、とのことです。
Designer Dailyの記事を参考に、Appleのウェブデザインからディテールを強化する9つのポイントを紹介します。 Creating beautiful web designs: 9 details that matter Apple [ad#ad-2] 下記は各ポイントを意訳し、Appleのサイトを例にしたものです。 ドロップシャドウ ドロップシャドウは、デザインに深さを与える素晴らしいテクニックです。しかし、計画的に使用しないと、とても素人くさい外見になってしまいます。 良いドロップシャドウを作るには、2つの重要なポイントがあります。 シャドウは繊細にする。 ページ内の光源は一貫したものにする。
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
タイル状に継ぎ目なく配置できるシームレスな背景用の画像が作成できるジェネレーターと無料素材を配布しているサイトを紹介します。
バーはブラウザの幅いっぱい(左右・左のみ・右のみ)に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。 ブラウザの幅を狭くしたキャプチャ 以下は各ポイントを意訳したものです。 まず、ブロックレベルのエレメントの幅は当然、親エレメントと同じ幅になります。単純に<body>直下に<h1>を配置すれば、自動的にブラウザの幅いっぱいになるのではないか、と思うでしょう。 しかし、それはテキスト部分もブラウザの幅いっぱいになってしまい、それは読みやすいものではありません。下記のように、バーはブラウザ幅いっぱいで、テキストは読みやすい幅になっているのが理想です。
Flared Borders with CSS デモページ ※上:ディテールを強化したタブ、下:旧式のタブ [ad#ad-2] 対応ブラウザは「:before」「:after」はCSS2ですが、スタイルに角丸などのCSS3を使用しているため、CSS3対応ブラウザ(Firefox, Chrome, Safari, IE9)でご覧ください。 HTML リスト要素を使用して、実装します。 <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> CSS:タブのベース シンプルな角丸
半透明とオーバーレイのテクニックは効果的に使用すると、奥行きとリアリズムを作り出し、退屈なウェブデザインにモダンな印象を与えます。 Onextrapixelから、ウェブデザインにおいて効果的に半透明とオーバーレイのテクニックを使う方法とその実例を紹介します。 Opacity and Overlay Techniques in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 Dark Overlay Light Overlay Color Mixes Dark Overlay ブラック、あるいは暗いグレーを使ったオーバーレイ。最近のウェブデザインでよく見かけるタイプです。見た目はスタイリッシュになり、画像やスライドショー、ナビゲーションなどによく利用されています。 このテクニックを利用する際は、CSSでの透過をサポートしていないブラウザがまだあるため、PNGで
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ:IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
jQueryなどの他のスクリプトに依存せずにモーダルウインドウを実装する高性能で超軽量(5KB)のスクリプトを紹介します。 JavaScript Modal Windows – TinyBox2 デモページ [ad#ad-2] TinyBox2のデモ デモはシンプルなモーダルウインドウから、アニメーション付き、AJAX対応、iFrame対応、画像対応などがあり、どれも実用的なものとなっています。 ウインドウをクローズする際はクローズボタン、もしくはウインドウ外のクリック、「ESC」キーの操作に対応しています。 デモページ:No Animation, No Close Button, Auto Width/Height, Custom Styling アニメーション:無し、クローズボタン:無し、幅と高さ:自動、カスタムスタイリング
HTML, CSS, JavaScriptをはじめ、sitemap.xml, .htaccessやアクセス解析など、モバイルサイトを構築するファイルをまとめた「Mobile Boilerplate」を紹介します。 「Mobile Boilerplate」はjQuery MobileやSencha Touchなどと相性がばっちりだそうです。 Mobile Boilerplate [ad#ad-2] Mobile Boilerplateの特徴 クロスプラットフォーム対応(Android, iOS, Blackberry, Symbian) CSSはIE Mobile 7をターゲット ホームスクリーンアイコン(Android, iOS, Symbian) ビューポートの最適化(Opera Mobile, Android, iOS, IE, Nokia, Blackberry) ビューポートのスケ
SEO担当者はもとより、デザイナー、コンテンツライターのための、サイトのユーザーエクスペリエンスも強化するSEOのテクニックを紹介します。 User-Friendly SEO [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 見出しの最初にプライマリキーワードを 2. キーワードのために太字のテキストを 3. リストの活用 4. 重要なリンクにはキーワードを 5. タイトルの始めにプライマリキーワードを 6. 内部リンクの強化 7. イメージの最適化 多くのキーワードが必要ですか? デザイナーとSEO担当者とライターのチームワーク はじめに 若干のデザイナーが、そして多くのコンテンツライターが、ウェブの効果的な戦略においてSEOを必要悪だと見なします。 しかしながら、SEOを適切に行えば、それは減るよりむしろ、ユーザーエクスペリエンスの強化をはかることができます。こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く