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とかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
iOS7におけるMobile Safariの主な変更点
iOS7上のSafariがどのように変化したかについて、Maximiliano Firtman氏（@firt）がブログで詳細に解説しています。 この記事では、同氏のブログから、Web制作者／開発者にとって重要と思われる情報を引用して、Web技術者にとっても大きな影響を持つこのアップデートについて紹介していきたいと思います。 元記事は非常に長大、かつ詳細なため、全てのポイントを紹介することはとてもできません。素晴らしい記事ですので、関心のある人は、ぜひ元記事を参照してください。 ちなみに、最初にガッカリさせることになってしまいますが、@firt氏によれば、「1.0以降最もバグの多いバージョンだ」（this is the buggiest Safari version since 1.0）だそうです… UIが大幅に変更、フルスクリーン（に近いサイズ）がデフォルトに Webブラウジングをしている
iPhoneやiPadでページを見ながらウェブデバッグが可能に！iOS 6から搭載された「Webインスペクタ」が超絶便利！ | gori.me（ゴリミー）
【img via iOS 5.1 Update. by MJ/TR (´･ω･)】 iPhoneやiPad向けにウェブ制作をしている人は知らないと損！ 最近頻繁にgori.meのチューニングを行なっているのだが、iPadで見ると崩れてしまう表示を長らく修正できずにいた。というのも、Macで見るとどのブラウザでも問題なく表示されていたから。 そんなところに先輩が「Safariのウェブインスペクタを使うと良いよ」と。基本的にGoogle Chromeで開発をしている僕としては「なぜわざわざSafari？」と思っていたが、iOS 6搭載端末を繋げるだけでSafariのウェブインスペクタはGoogle Chromeの何倍も便利になる。iOS 6からの新しい機能で、iPhoneやiPadでページを見ながら直接ウェブデバッグができるのだ！！ そもそも「Webインスペクタ」って何？ そもそもWebインス
スマホサイトの確認に便利！PC（safari）でできるスマートフォンサイトの検証方法のやり方 | HTML5でサイトをつくろう
スマートフォンサイトを制作する際に、iPhoneやAndroid両方の機種での検証や、もう発売されていないようなOSのバージョンの対応も必要になる機会があるかもしれません。 本来ならば一通りの機種を用意して実機で検証できる環境が必要ですが、個人での制作や、ちょっとしたサイトのスマートフォンサイトの対応の場合もう少し手軽な検証方法が必要になります。 また、PCでコーディングなどのサイト制作時のちょっとした確認は、やはりPCブラウザで見た方が楽です。 今回はPC版safariのユーザーエージェント指定を使用したスマートフォンサイトの検証方法を紹介します。 なぜPC版safariなのか？ 現状のスマートフォンのブラウザは主に、iPhone向けのsafariとAndroid向けブラウザの二つに分かれます。 また、BlackBerryなどのその他のスマートフォン機種もWebkit系ブラウザを使用する
iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 - くらげだらけ
iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。PhoneGapみたいにWebAppをネイティブにパブリッシュするツールや、Titanium MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。 iOS4までのMobile SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。 先日公開されたiOS5では今まで「なんで使えないの？」といったところが少し修正されて、
Safari 5 で :visited の挙動が変更に : Safari Realized
2010年06月13日12:03 Posted incolumn Safari 5 で :visited の挙動が変更に Safari5（及び Safari4.1） では :visited の挙動に大きな修正が入っています。 Safari 5.0 および Safari 4.1 のセキュリティコンテンツについて 対象となるバージョン：Mac OS X v10.4.11、Mac OS X Server v10.4.11、Mac OS X v10.5.8、Mac OS X Server v10.5.8、Mac OS X v10.6.2 以降、Mac OS X Server v10.6.2 以降、Windows 7、Vista、XP SP2 以降 影響：悪意を持って作成された Web サイトにアクセスすると、ユーザがアクセスしたサイトを特定できる可能性がある。 説明：WebKit による CSS
Safari5の新機能解説 | ライフハッカー・ジャパン
Windows/Mac：Appleの新しいブラウザ『Safari 5』には、これといった斬新さはないようです。しかし、速度、より読みやすいページ、速度、より良いタブブラウジング、速度、将来的な拡張機能対応、そして、しつこいですが、そう、速度に焦点が当てられています。 Apple公式の「What's New inSafari 5」に、機能の詳細が掲載されています。その内容は、なかなか興奮する内容で、失望する点は少ないです。さっそく、Safari 5を紐解いてみましょう。 ■Safariリーダー Safari 5で実際に使える、注目すべき新機能は「Safari Reader」です。特定のサイトにアクセスしていると、アドレスフィールドに小さなボタンが現れます。 クリックすると、そのサイト上の主要記事の文書がセンタリングされ、印刷に適したビューとして表示されます。「Readability」や「In
Apple - Safari - Introducing Safari 4 - See the web in a whole new way
Safari is the best way to experience the internet on all your Apple devices. It brings robust customization options, powerful privacy protections, and optimizes battery life — so you can browse how you like, when you like. And when it comes to speed, it’s the world’s fastest browser.1 Learn how to make Safari your default browser With a blazing-fast JavaScript engine, Safari is the world’s fastest
Google Font API のウェブフォントを使うと iPhone で日本語が表示されない理由 | ブログ | SINAP - 株式会社シナップ
この記事の最初の公開後、さらに調査を続けていたところ、内容に不正確な部分があることがわかりましたので、訂正いたしました。詳細は本文中の追記・訂正をご覧ください。（2010/06/01） 先日、Google から、画期的なウェブフォントサービスの Google Font API が発表されました。既にたくさんの方々が、様々な実験をしたり記事を書いたりいらっしゃいますが、そんな昨日。 「Google Font API で日本語が表示出来ない」という話を小耳に挟みました。 もとより、Google Font API で提供されるフォントは現時点では欧文フォントのみで、日本語の字形データは含んでいませんが、仮にそうしたフォントが日本語を含む文字列に指定されたとしても、本来そこで期待されるのは「指定フォントで表示できない文字は、表示できる別のフォントで表示する」という挙動であって、真っ白になってしまう
CSSだけでSafariブラウザを作ったデモ | Web活メモ帳
Safariの外観をCSSだけで作成したデモをご紹介。 面白いデモだったので思わずエントリー。 画像なし、JavaScriptなし、Canvasも使用していません。 以前にもCSS だけで各種ソーシャルメディアのアイコンを作る方法というエントリーをご紹介しましたが、新しいCSSのデモになります。 詳しくは以下 動作デモ Safari in Safari. これはすごいですね。ブラウザの中がiframeになって無限ループさせたらちょっと面白いかもしれません。 Safariをお持ちの方はぜひご覧になってみてください。 ※Firefoxだとうまく表示できませんでした。 Chromeがかなり近いレンダリングをしれくれます。
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
GoodReader用の便利なブックマークレット ダウンロードはこれで！ | iPhone plus +
■GoodReader 用の便利なブックマークレット Safariでブラウズしてて即GoodReader起動、 ダウンロードは便利ですね。 作り方わかる人は、下記コピペで。 本当に素晴らしいアプリです。 1.見ているページをダウンする場合 →gをつけるブックマークレット (よりシンプルに、コメントを頂きましたありがとうございます） >>テキスト表示 （表示されたテキストをコピペ） javascript:window.location=’g'+window.location 2.ページを見てて、リンク先を ダウンロードしたい時 →リンク先に、gをつけるブックマークレット >>テキスト表示 （下記コピペでうまくいかない場合はこちらのリンク先をコピペ） javascript:(function()%7Bvar%20a=document.getElementsByTagName(‘a’);for(
美女採点 for iPhone -美女の画像をランキング化：iPhone Webアプリケーション
美女採点は次々と表示される美女2名を比較し、どっちがより好みかを選び続けるiPhone専用のWebアプリケーションです。 美女系アプリは海外系のアプリが多いですが外人ばかりでどうしても好みにどんぴしゃで来ません。そんな最大多数の意見を持つentrypostmanのような人ためのWebアプリです。 下記、アクセス後の画面。画面下の方に進むとランキングが見れます。 ページ上にある「採点開始」ボタンをタップすると採点スタート！ あとはひたすら採点するのみ！ かわいい女の子の写真を見ているだけで幸せです。 なお、美女採点はiPhone用のsafariに特化して作られていますが、実はPCでもアクセスできます。 もちろん、iPhoneのsafariでアクセスするのが個人的には最高だと思いますが、AppStoreでアプリをダウンロードする必要なく、safariで快適にサービスを体験できるって最高です
エロゲ注意：Webアプリケーション。iPhone safariで「くぱぁ」。
ゴールデンウィークなのでたまにはこういうのも……普段は紹介しません。 2個紹介します。iPhone safari限定のWebアプリケーションです。 PCでアクセスしても何も起きません。 iPhoneのsafariでアクセスすると面白いですよ。 いつもはAppStoreでダウンロードできるアプリばかり紹介しているAppBankですが、実はWebアプリケーションにもたまに注目しています。 面白いのがほとんどないんですよね。 面白いWebアプリケーションがあればタレコミよろしくお願いします！ くぱぁされてもパンツじゃないから恥ずかしくないも……ぁ… 【ニコニコ動画】【iPhone専用】くぱぁされてもパンツじゃないから恥ずかしく… アクセスはこちらから（iPhone safari限定です） ⇒ くぱぁされてもパンツじゃないから恥ずかしくないも……ぁ… エロゲ注意：ゆのっち剥き 【ニコニコ動
はてなブックマーク用ブックマークレット for iPhone - sarusaruworld lab - Web Lab
上記を、ひとつのブックマークレットでやりますよ、for iPhone Safari。 画面イメージはこんな感じ（※うっすら、下のサイトが透けて見えます） 。 黒い部分をクリックすると、画面が閉じます。 ・hateb.iPhone（Safariで登録するかた用） ・hateb.iPhone（iPhoneで登録するかた用） ご要望があれば、はてなRSSの登録ボタンの追加なり、なんなりする用意はありますよ！こちらには！どんと来やがれ、こんちくしょう。できる範囲で、こんちくしょう。 手前ミソですが、なかなか手放せないツールになりつつあります。 はてブコメントが画面遷移なしで見れるのが良い！ちなみにiPhoneがすぐ再読み込みに行くの、なんとかならんかのぅ。 ※追記 関連ブックマークレット「ブックマークレットをまとめたブックマークレット for iPhone / iPod touch」も公開しました
[iPhone] iPhoneのSafariと1Password Proの連動のさせかた @ ｉのある生活
iPhoneの1Passwordの話だけど、周りから1Password内蔵のブラウザじゃなくてSafariでWebページが開けたらいいのに、という声が聞こえてきたのでそれに反応。 開けます。といっても、1PasswordからSafariを開くんじゃなくて、Safariから1Passwordを呼び出すことになるんだけどね。 Javascriptをブックマークに組み込むブックマークレットはiPhoneのMobile Safariでも使えるんだけど、その方式でSafariから1Passwordを呼び出すやり方が1Passwordのヘルプに書かれてる。 でも、ヘルプなんてほとんどのユーザーが読まないからか、知らない人が結構多いみたいなので1Passwordのブックマークレットの作り方をざざっと。(最低でも1つはなんらかのサービスのアカウント/パスワードが登録してあると、すぐに試せてよいかも。) ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ごりゅご.com
worldending.jp
http://www.css-lecture.com/log/css3/css3-gradient.html