iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される
2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法などの機能が他のブラウザに先駆けて搭載されました。 New WebKit Features in Safari 15.4 | WebKit https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ ◆img要素にlazy loading機能が搭載へ img要素に「loading="lazy"」属性を付与することで、「付近にスクロールするまで画像を読み込まない
そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
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%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」:phpspot開発日誌
implement a blur view of iOS7 style with css and jquery. oblurlay iOS7風の背景をボカしてオシャレにするエフェクト実装「oblurlay」。 iOSで、バックグラウンドをすりガラスですかして見たようなエフェクトがありますが、これをブラウザ上で実現するためのjQueryプラグインです。 背景に馴染む上になんかシャレオツ！ 関連エントリ iOS7用インタフェース作成用のワイヤーフレーム「iOS 7 Wireframe Kit」 フリーのiOS7アイコン800個セット iOS7のワイヤーフレーム作成用illustratorキット「Awosomekit」 iOS7のUIが詰まったPSD「iOS7 GUI PSD」
『３分で分かるフラットデザイン』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、DETOXでデザイナーをしているSonokoと申します。 今回はDETOXで用いたフラットデザインについてお話したいと思います。 DETOXとは DETOXとは言いたいことも言えないこんな世の中で、ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNSです。 「SNS疲れ」などで溜まった現代のココロの闇を「ポイズン」として吐き出せます:) DETOXでは、iOS 7の普及に伴いフラットデザインを搭載しました。 トレンドの「フラットデザイン」ってなに？まずはどんなものか、百聞は一見にしかず
RailsからObjective-Cのplist形式でデータを出力する - (ﾟ∀ﾟ)o彡 sasata299's blog
2014年03月28日14:15 Ruby Objective-C RailsからObjective-Cのplist形式でデータを出力する iOSアプリ用のマスターデータとして plist にデータを持たせたかったのでやってみました。 実際にやってみると builder っていう gem を使えば簡単でした。jbuilder のXML版です。出力したいデータ（例えば今回の場合だと @languages）だけ用意して、 xml.instruct! :xml, version: '1.0' xml.declare! :DOCTYPE, :plist, :PUBLIC, '-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd' xml.plist(version: '1.0') do xml.ar
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ - ICS MEDIA
クロスプラットフォーム開発の大本命!? HTML5もアプリもFlashも開発できる「OpenFL」とは？ 「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。一昔前はAdobe Flashが「Open Screen Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。 尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」（オープンエフエル）というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。つまりOpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロス
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
「iOS 7」で採用されるかもしれない「フラットデザイン」とは何か？
Windows8やWindowsPhoneでタイルが並ぶ特徴的なメトロデザインで採用された「フラットデザイン」は、非常に分かりやすく、「iOS 7でも採用されるのではないか？」と予想されているのですが、Designmodoでは現在トレンドになっている「フラットデザインとは何か」ということを6つの原則としてまとめており、ウェブデザインやプロジェクトのデザインなど、デザインを行う人や興味のある人にとって知っておくと非常に役立つ指針となっています。 Principles of Flat Design - Designmodo http://designmodo.com/flat-design-principles/ ◆01：余計なエフェクトがない フラットデザインの特徴として挙げられるのが、余計な装飾物がないこと。影や傾斜、エンボス、奥行きをつけたりせず、画像のフレームからボタン、ナビゲーション
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flutterでスマホアプリ開発するときに必ずやってること
流行に乗っていいの？フラットデザインの落とし穴