高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
デザイナーのためのiOS実装入門｜田畑浩平 | Flutter Engineer
先日、友人のデザイナーさん達とランチした際に、1人のデザイナーさん(Webデザインがメイン、軽いコーディングまでなら経験あり)が ・iOSアプリデザインやUXデザインにも興味ある ・より良いデザインやユーザー体験を実現できるようになるために アプリ開発もしてみたい(特にデザイン上の制約を知るために) と言っており、同じニーズを持つデザイナーさんやディレクターの方も多そうだったので、この記事を書いてみました。 対象読者 ・iOSアプリのUI面で、できる/できるけどしんどい/できないことを知りたい デザイナー、ディレクター 解説すること ・アプリで画面が表示されるまでの仕組み ・アプリの画面を実装する上でよく使うコンポーネント(パーツ) ・気をつけるべきポイント 実際の実装については、Qiitaなどでいくらでも解説されていると思いますので、イメージを掴んでもらうための概念的な説明をメインにして
background-attachment: fixed がスマホで効かない問題は ::before で解決！
background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS Safari では、「background-size: cover」を使ってるとき「background-attachment:fixed」が効かないらしいんです。 出典：Can I use これを解決するためには、擬似要素「::before」で <body> の前に擬似ブロックレベル要素を作り、そこに背景画像を貼るのがイイみたい。自分なりに改良したソースコードをメモります。 height:100vh がベターか
守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
目覚ましとRPGが融合したアラームプレイングゲーム『dreeps』がユニーク！可愛いドット絵と、SFな世界観にも注目 | インサイド
クリエイティブユニットYAKAN HIKOは、iOS『dreeps』を2015年1月21日にリリースします。 『dreeps』は、アラームをセットするだけでRPGの冒険気分を味わえる“アラームプレイングゲーム”です。操作はすべてオートプレイとなっており、ドット絵アニメーションで描き込まれたSF世界と雰囲気たっぷりのチップチューンにより、少年ロボットの冒険が楽しめる内容になっています。 このゲームでは、主人公の少年ロボットとユーザーが同じ睡眠時間を取ることでHPを回復させることが可能。バトルを繰り返し経験値を稼いでレベルを上げたり、イベントを進めアラームの種類と仲間を増やし育成を行い、ランクを上げてボスに挑んでいきます。 また、ゲーム中のセリフは空になっており、ユーザーが自由に解釈したストーリーをスクリーンショット付きでSNSへ投稿できる機能なども付属。このように、アプリをときどき眺めて楽し
Mac用のiOSアプリのプロトタイプ作成ツールの決定版「Form」がGoogleパワーで無料解放！！ | ソフトアンテナ
Mac用のiOSアプリのプロトタイプ作成ツールの決定版「Form」がGoogleパワーで無料解放！！ 2014 11/20 Mac用のiOSアプリのプロトタイプ作成ツール「Form」(以前の価格7800円)が無料化されました(iDownloadBlog、9to5Google)。ドラッグ＆ドロップで素早くアプリのプロトタイプを作成することができるツールで、今のところiOSアプリの作成に対応しています We're excited to announce that we're joining Google to continue working on Form! :) http://t.co/JvsloB5ba1 — RelativeWave (@RelativeWave) 2014, 11月 19 公式サイトによると開発チームがGoogleに買収され、その影響で無料化されたそうなので、期間限定
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セキュリティ診断・検査のGMOサイバーセキュリティ byイエラエ