ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
まず、iPhone Xに対応していないWebサイトはSafariブラウザではどのように表示されるのでしょうか？ ポートレートモードでは一見正しく表示されます。 下向きにスクロールするとステータスバーが表示されなくなり、画面下部のラウンドした領域にもコンテンツが表示されます。 早い話が、追尾型広告のようなページ下部に表示されるコンテンツに重要なコンテンツやナビゲーションを配置すると、クリックされない可能性が高くなります。 また、ランドスケープモードでははっきりと違いがわかります。 ツールバーやステータスバーは全画面で表示されます。 中央左右に安全領域がありますが、それ以外の部分もbody要素のbackground-colorで描画されます。 なお、背景画像を指定していても無視されるということを覚えておきましょう。 そのほかにも、セーフエリアの存在でデザイナーが意図した描画がされない状態になり
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
[iOS] iOS Safari の Web インスペクタが便利すぎる
自分のブログのスマホ版をチェックする時とかに いまさらですが iOS 6 の Safari に備わっている Web インスペクタを試してみました。 まずは上図の通り、Web インスペクタ機能を ON に設定します。設定は iOS の設定から Safari＞詳細 と進めば OK です。 これだけでは全然不十分なので、上図にもある通りコンピュータ (Mac) 側の設定も行います。
CSSでiPhoneのアイツ（アクションシート）を消す方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 戦：54 僧：59 魔：53 武：60 盗：60 旅：55 レン：60 パラ：54 マ：51 ス：49 賢：40 バ：25 CSS：2 鳥よしです。 (あ、一応ちゃんと仕事もしてます) 今日は、iPhoneのsafariでリンクを長押ししたときに出る ↓コイツ（アクションシート）を消し去る方法を書きます。 <img loading="lazy" class="size-medium wp-image-18740" src="https://liginc.co.jp/wp-content/uploads/2013/03/toriyoshi_test-168x300.png" alt="例のヤツ" width="168" height="300" /> 例のヤツ[/caption] ほとんどの方がご存知なのかもしれませんが、 僕はこれを知ったときウレしょん寸前でした。 今までは、
iPhone、Android position:fixed 対応状況と対応方法 – LIQUID BLOG
iPhone、Androidなどのスマートフォンは、これまで position:fixed に対応していませんでした。 固定メニューの実装などに困っていたのですが、iOS 5で対応していました！ iOS 5 iPhoneやiPad、iPod TouchのMobile Safariは、iOS 5から position:fixed に対応しました！ 他にも、overflow:scroll などに対応しています。 via New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 Android 2.3 viewport で、content=”user-scalable=no” にすると対応できます。 Android 4.1
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
Aquoria.com Domain Name For Sale – OYZTA
✓ Best Price ✓ Initiate instant domain transfer ✓ All registrars ✓ 30-day money-back guarantee Aquoria.com is a versatile domain name that holds a myriad of potential. Its unique and catchy nature makes it a memorable name that can easily become the face of your online presence. Drawing from the serenity and clarity symbolized by water, the name can be brilliantly suited for a diverse array of ind
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
【iPhone】「ホーム画面に追加」のアイコンから全画面で開く | バシャログ。
今年の頭に始めたダイエットは、割と順調だったものの、最終的な目標達成はならない可能性が高くなってきた kimoto です。 1年で -20kg はなかなか厳しかったか... ちょっとした小ネタです。 iPhone の Safari には「ホーム画面に追加」という機能があり、サイトをアプリのようにアイコン化する事ができます。 その際に、meta タグでちょっとした指定ができます。 apple-mobile-web-app-capable この指定では、URL や検索窓のあるバーを消すことができます。 apple-mobile-web-app-status-bar-style この指定では、上部の電池や時計などのバーの色を指定することができます。 指定できるのは以下。 default：デフォルト色 black：黒 black-translucent：半透明 これを指定すると これを、head
iPhoneのSafariで動くWebアプリを作ったときのメモ - 星屑日記
iPhoneではSafari上で動くWebアプリをいかにもネイティブのiPhoneアプリであるかのように見せかけて作ることができます。これだとApp Storeの審査などを通さずにリリースできるので、リリースやフィードバックのサイクルが速く、手軽に作れます。今回、ある画像ビューワーをWebアプリとして作って、そのときにいろいろ調べたのでそのメモを以下に書きます。 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />これはiPhone用ページとしては基本のviewport。今回は拡大できないようにしました。 <meta name="apple-mobile-web-app-capable" content="yes" />これが今回の肝。これを記述することでSafari
iPadでWebアプリ | iPad Techfirm Lab
はじめに みなさんiPad使ってます？私もかなり使ってます。macbookを滅多に使わなくなってしまったぐらい活躍しています。iPadは気軽に使えて便利なので気に入っているのですが、やはりSafariでPC向けページのブラウジングが面倒。A4プロセッサが速いとは言っても重いページの表示はちょっとつらいし、小さいリンクをクリックするのが難しいです。世の中ではFLASH非対応が問題視されてますが、それより私は通常のWebページのナビゲーションが引っかかります。小さいリンクが多いページは見ないようになってきました。 でもこういうニーズが出てくる事をAppleはiPhone発売の頃から予測していて、Webアプリなるモノを提案していたんですよ。Webアプリと言ってもサーバサイドのWebアプリケーションの事ではなく、ブラウザ上で動くクライアントアプリケーションです。今回はこのWebアプリをご紹介したい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webamb.com
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報
公海555000kk线路检测—首页（欢迎您）
売れるiPad/iPhoneアプリのためのデザイン必須知識
iPhone画面名称 - iPhoneアプリ開発の虎の巻