iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
来るフラットデザイン時代！フラットアイコン作成に役立つページまとめ。 | アプリマーケティング研究所
ios7では全体を通してフラットデザインを、 採用することが発表されました。 ios7は今年の秋から導入されます、 iphone4以降のデバイスには対応していますので、 数か月後には、大部分のユーザーがios7に移行するのではないでしょうか。 特にアプリ開発者にとっては、 アプリのDLに直結する、 Appstore上でのアイコンの重要性というのは非常に大きく、 アイコンについてもデザインを考慮してく必要がでてくるかもしれません。 ios7のAppstoreデザイン オフィシャルサイトによると以下のデザインになるそうです。 本記事では、 フラットデザイン・フラットアイコン関連の、 役に立ちそうな情報をまとめたいと思います。 Apple公式のフラットデザイン移行ガイド iOS 7のフラットデザインでアプリを開発するための移行ガイドをAppleが発行 やはりまずはAppleがオフィシャルで公開し
今どきのCSS3グラデーションの指定方法
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
