[B! iOS][css] alice_rのブックマーク

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%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。そんな中、先程のツイートから

alice_r 2020/10/05

リンク

CSSでテキストエリアをリサイズ不可にしたり任意の要素をリサイズ可能にする

@kasumiiです。こんにちは。忘れがちなのでちょこっとメモ。 ChromeやFirefoxなどでテキストエリアの右下をドラッグするとサイズを広げることができますが、これをCSSでリサイズ不可にしたり、リサイズ可能な方向を指定したりする方法です。普段はデフォルトのままサイズ変更できたほうがいいと思いますが、たまーにサイズ変更できないようにしたい場合があるので。

alice_r 2015/03/23

CSS
iOS

リンク

デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO

Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ