タグ

関連タグで絞り込む (15)

タグの絞り込みを解除

Safariに関するd4-1977のブックマーク (12)

  • 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%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
    iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
    d4-1977
    d4-1977 2020/10/04
    100vhというか、vhの上手い使い方がまだまだわからない…
    リンク

  • Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita

    やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro

    Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita
    d4-1977
    d4-1977 2016/05/31
    なるほど
    リンク

  • 【アプリ】Web Screenshot Extension – Safariのスクリーンショット撮影＆メール転送を可能にする拡張アプリ！ | 楽しくiPhoneライフ！SBAPP

    【アプリ】Web Screenshot Extension – Safariのスクリーンショット撮影＆メール転送を可能にする拡張アプリ！ | 楽しくiPhoneライフ！SBAPP

  • YappoLogs: iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った


    « iPhone とかの フリックで操作するカルーセル UIを jQuery mobile で作ってる話 (jquery.mobile.carousel) | Main | FizzBuzz最短回答 もしくは Yahoo!Japan 入社課題提出エントリ » iPhone で position:fixed な UIToolBar を簡単に作る jquery.mobile.iscroll.js を作った iPhoneのWebサイトを作っていて、良くあるアプリの上と下の position:fixed なメニューを実装しようとした時に、iScrollを使えばわりかし楽に実装出来ます。 jQuery mobile (1.0a2) を使ってると header/footer 要素に data-position="fixed" を書いておけばそれっぽい動きになるんですが、スクロールイベントを受け取るた

  • jQuery mobile で position:fixed をどうにかする - nihimotoの日記


    本日始めて知ったのですがmobile safariではCSSのposition:fixedは使えないそうです。 よって、画面の一部分にボタンを固定して置いておく、というUIが作れない。 もちろんそれでは困るので、各種対策を試みている先達たちがおります。 色々調べてみましたが、﹁fixedできない？なら、しないでも大丈夫なようにすればいいじゃん﹂ということで、iscrollというjqueryプラグインを使うのがよさそうです。 iScroll これは、本来画面をタッチして指を滑らすとウィンドウ全体がスクロールされるのですが、このイベントを乗っ取ってしまい、ウィンドウがスクロールするのではなくて特定のdiv内がスクロールされるように、差し替えてしまうjqueryです。 fixedしたいオブジェクトをスクロールされるdivの外に置いておけば、まるでfixedされているかのように画面のスクロールに関
    jQuery mobile で position:fixed をどうにかする - nihimotoの日記

  • HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-


    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blogはじめに こんにちは、EveryWhere開発部の久下孝順、高橋淳史と申します。 先日リリースされました、iPad用Webアプリ﹁えほんのじかん﹂︵iPad版︶の紹介をさせていただきます。 このサービスの内容はごく単純で、たくさん並んだサムネイルから気に入ったものを選択すると、アニメーションと朗読によって構成された絵本風の動画が流れる、というものです。 もともとこの﹁えほんのじかん﹂の元祖は、﹁テレビ版﹂でした。 インターネット対応テレビ向けに提供しているテレビ版Yahoo! JAPANやYahoo! JAPAN for AQUOSなどからみることができます。 iPad版より作品収録数は多く、30作品以上を掲載しています。 テレビ
    HTML5でiOS Webアプリを作ってみました -えほんのじかん(iPad版)-

  • Safari拡張の作り方 - os0x.blog


    Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
    Safari拡張の作り方 - os0x.blog

  • 中島聡氏が見せるhtml5の未来：前半6本 | AppBank


    本日鎌倉に来ていただいた中島聡さん、html5で何が実現できるのか？を現在果敢に挑戦されていまして、こちらのページ︵WidgetPad.com︶で実験作品を随時公開されているのですが、現在公開されている12個のhtml5で作成されたウェブアプリケーションをすべてご紹介いたします！ 信じられますか？これらはSafari上で動いているんですよ！？まずは前半6個です。 これがiPhoneのSafari上でスムーズに動いているんです。 まずは6本、個別に紹介していきます！ Gold Fish Simulation 小さなお魚さんが画面上をスイスイ泳ぎます。 このウェブアプリの動画はこちら。 Blob Sallad これが一番すごいかも！！！ 指で触れます。ぴょんぴょん触れます。2本指で触るとなんと分裂します！！！ このウェブアプリの動画はこちら。 YAHOO! Finance 3D ヤフーファイ
    d4-1977
    d4-1977 2009/09/30
    へぇ～
    リンク

  • Safari3.1の開発ツールがなかなかすごい - Webtech Walker

    Macをほとんど使わないので、Safariは動作確認程度でしか使ったことなかったんですが、Windows版の正式バージョンがリリースされたんでいろいろと使ってみました。デフォルトで入っている開発用ツールがなかなかいい感じでした。 メニューバーに開発メニューを表示する デフォルトでは開発メニューが表示されていないので、「編集」→「設定」→「詳細タブ」の「メニューバーに[開発]メニュー]を表示」にチェックをつけます。 そうするとメニューバーに開発メニューが追加されます。これで準備ＯＫ。 使ってみる いろいろと機能はあるみたいですけど、とりあえず便利そうなのをいくつか使ってみました。 ユーザーエージェント ユーザーエージェントを変更できます。「その他」から任意のユーザーエージェントも設定できます。FirefoxのUser Agent Switcherのようなものですね。 Webインスペクタ HT

    Safari3.1の開発ツールがなかなかすごい - Webtech Walker

  • Safari の JavaScript の不備 Days on the Moon


    ぱっと見はいいんだけど細かいところでちょこちょこ穴があるような気がする Safari (というより Apple WebKit) ですが、どのような穴がいつふさがれてきたのかまとめてみました。最初は JavaScript 関係だけ調べるつもりだったのですが Safari 2.0.3 で setSelectionRange がサポートされたというのを聞いたのでそっちのほうも少し。ただし、手元に Mac 環境がないので実際に Safari で試したわけではありません。すべてソースと変更履歴から推測しただけなのでそのつもりで。 下の表で﹁WebKit﹂というのはその機能が実装された WebKit の (正式公開) バージョン、﹁Safari﹂というのはそのときの Safari のバージョンをあらわしています。﹁-﹂はその機能が現時点 (Safari 2.0.3) でも未実装ということです。﹁-﹂は

  • はてなブログ

    31文字へのこだわりへの愛 短歌が好き はじめて短歌集に触れたのは小学生のころ、なんとなく訪れた学校図書館でなんとなくタイトルに惹かれてなんとなく手に取った俵万智さんの「チョコレート革命」、当時のわたしにはまだ解釈というか理解するのが難しいものもあったけれど、この時に短歌と初邂…

    はてなブログ
    d4-1977
    d4-1977 2006/10/19
    あ、これは便利。英語だけれど。
    リンク

  • Multi-Safari

    Important Notes: I’m no longer making up-to-date version of Multi-Safari. Newer Safari releases make it difficult to create self-contained version, and when they’re possible they usually won’t work on different OS versions, making them rather pointless. A workaround would be to keep old version of the OS, which includes Safari, inside a virtual machine image (such as VirtualBox, Parallels Desktop,

  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.