高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
![これからはこの実装がオススメ! iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/eba876af5e01e352eb1e9b047aac9ace5020bff5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202103%2F2021081501%402x.png)
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。 しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
CA.unityはサイバーエージェントが運営するUnityをテーマにした勉強会です。サイバーエージェントのサービス開発者と社外の開発者を交えて、Unityに関する知見を共有します。とりすーぷ氏からは、設計とアーキテクチャについて発表がありました。 アーキテクチャの目的はコストの最小化 とりすーぷ氏:「Unityにおける設計パターン」というタイトルで発表します。よろしくお願いします。 私は、とりすーぷという名前でいろいろと活動をしています。Microsoft MVPを2018年から継続で受賞しています。ありがとうございます。最近『UniRx/UniTask完全理解』という本を出したので、もしよければ手に取ってみてください。 今回は、設計とアーキテクチャに触れたいと思っています。10分の発表に対して、調子に乗って100枚を超えるスライドを作っちゃって、絶対に10分では終わらないので、発表はだい
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF(Backend for Frontend) レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change (破壊的変更)を防ぐ DataLoader を使って Bat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く