高さいっぱいに表示したい時、古くは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でスクロールバーをCSSのみで表示する方法
iOSではスクロールバーが表示されません。 通常のブラウジングでは無意識でWebサイトは縦にスクロールできるものだと思っているので通常は問題になることはないのですが、 ユーザーに明示的にスクロールできると認識させるときにこの仕様が障害になることがあります。 今回はiOSでもスクロールができるということをユーザーに認識させるために、 強制的にスクロールバーを表示させる方法を紹介します。 html <div class="scroll-wrap"> <table> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入り
Pixate - naoyaのはてなダイアリー
数日前に Pixate という iOS 向けミドルウェアがリリースされました。なんとiOSアプリの見た目を css で書けるという、全ウェブ開発者感涙のライブラリ。こりゃすげえ。ただし無料というわけにはいかず、18,000円くらいでこざいます。 2月9日 追記 トライアル版と、個人利用のための無料版が出たようです。 RubyMotion の teacupのように css チックな DSL で書ける、というものはありましたが Pixate はその辺とは次元が違ってて、普通に css ファイルに css を書くことができる。 button.blue { position: 60, 100; size: 200, 40; border-radius: 7px; font-family: 'Courier New'; font-size: 18pt; font-weight: bold; bord
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
