Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。
UIデザインのアイデアを探す時にチェックしたいサイトのまとめ
Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。
Technical Note TN2154: UIScrollView And Autolayout
IntroductionThis technote provides some information regarding Auto Layout support for UIScrollView. Specifically it demonstrates a "mixed" and a "pure" auto layout approach for UIScrollViews. In Depth ExplanationIn general, Auto Layout considers the top, left, bottom, and right edges of a view to be the visible edges. That is, if you pin a view to the left edge of its superview, you’re really pinn
UICollectionView custom layout tutorial :: skeuo
For a recent project I needed to refactor a primary view within our iPad app, so I decided to learn the ins and outs of UICollectionView (introduced in iOS 6) and I thought it would make for a good tutorial to share. My project ended up needing a custom UICollectionViewLayout which meant I needed to handle more of the layout logic than if I'd used the UICollectionViewFlowLayout that Apple provides
Autolayout に対応した画面で UIScrollView を使う時のコツ - A Day In The Life
iOS 6から導入された Autolayout(オートレイアウト)を最近になって本格的に使うようになりました。 4-inch の iPhone が主流になりつつある中、アプリを Autolayout に対応させるのはほぼ必須といっても良いと思います。Storyboard と格闘してなんとかコツはつかめたものの UIScrollView だけは一筋縄ではいかず苦労しました。 というわけで Autolayout に対応した画面で UIScrollView を使う時のコツをまとめてみました。 なおこの記事で説明する内容は Storyboard 上で Autolayout がオンになっていることが前提になっています。 Autolayout 対応画面で UIScrollView を使うための2種類の方法 Autolayout に対応した画面で UIScrollView を使うには以下の2つの方法があ
[iOS] Xcode 5.1 で追加された Auto Layout の Aspect Ratio を使ってみた | DevelopersIO
比率の指定 先日 Xcode 5.1 が公開されましたが、皆さんインストールされましたでしょうか。Xcode 5.1 では Storyboard の Auto Layout の編集機能が少しアップデートされており、Aspect Ratio という制約が作れるようになりました。元々 NSConstraints では実現できましたが、Storyboard 上から編集できるのは便利ですね！ AspectRatio 制約を追加してみる ということで使ってみます。まずは適当な Label を配置しました。分かりやすく SuperView からの Center X Alignment Constraint と Center Y Alignment Constraint を指定してます。 次に Pin ボタンを押してメニューを開きます。「Aspect Ratio」っていうのが増えてますね！これにチェック
![[iOS] Xcode 5.1 で追加された Auto Layout の Aspect Ratio を使ってみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/d6d42bb8eb763a9d4914eebb951bc5e3e7718d03/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fios7_logo_xcode5.png){kind=logo}
ios7のnavigationbarをios6以前のデザインに合わせる方法 - Qiita
ios6 → ios7対応をする際にios6のデザインで対応する際の覚え書き レイアウト崩れ 原因は、ほぼこれ In iOS 7, view controllers use full-screen layout. At the same time, iOS 7 gives you more granular control over the way a view controller lays out its views. In particular, the concept of full-screen layout has been refined to let a view controller specify the layout of each edge of its view. 全体的に上部に寄ってしまっているのを対処 xcode4で作成したアプリをxcode5で見ると全体的に
CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ
最近ではベンダープレフィックスも無くす方向に向かっているようですね。 数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。 まぁ、現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。 display: box 横幅を均等に分けてレイアウトしたいみたいなときにFlex boxは便利なプロパティですが、どんな感じにするのがいいのかを書いてみようと思います。 Flexible Boxの仕様はころころ変わってて、最初は「display: box」最新は「display: flex」だったりしますが、まずは「display: box」でやってみます。 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ <div class="flex-box"> <
CSS 日本語レイアウト関連仕様 日本語翻訳
このサイトでは、W3C CSSの、主に日本語レイアウトに関する仕様を非公式に日本語翻訳した結果を掲載しています。 本ページがCSS日本語レイアウト関連仕様の理解の助けとなり、仕様策定を促進することを目的として作成しました。 更新情報 2013.8.7: 血統の森にてCSS Text Decoration Module Level 3(W3C Candidate Recommendation 1 August 2013)がすでに翻訳されておりましたので、本サイトでの翻訳を中止し、そこへのリンクを貼る形といたします。 2013.8.5: CSS Text Decoration Module Level 3 が2013.8.1にCRとなりましたので、仕様がある程度安定したと判断し、翻訳を開始いたします。 2012.6.10: 都合により、仕様がLast Callになるまで仕様の翻訳を休止いたしま
floatを使わなくてもよくなる。<br> Template Layout Module が素敵すぎる今後の話
floatを使わなくてもよくなる。 Template Layout Module が素敵すぎる今後の話 2011-03-22 まだどのブラウザも実装されていないですが、Template Layout Moduleが素敵なので紹介します。 Template Layout Module とは CSSコードに直接、アスキーアートでレイアウトを描き、そこにコンテンツを流し込む実験的な仕様です。 現段階ではCSS3のモジュールです。 簡単な具体例 この例ではCSSのdisplayプロパティのところで、2x2のスロットを用意しました。 そこにCSSのpositionプロパティで割り振った値を、割り振っています。 <style type="text/css"> body { display: "aa" "bc"; } head { position: a; text-align:center;} nav
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
think-in-g.net