CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
macOS Safariを12にしたらはてなブックマーク機能拡張がなくなった際の解決法
macOSでSafariが12にバージョンアップしました。喜びいさんでアップデート後、どんな機能が追加されたのかとわくわくしながら起動すると、こんなダイアログが…。 人によって違うと思いますが、私の場合は10個くらい機能拡張がやられた気がします。使っていないものもあったので大半は良いのですが、はてなブックマーク機能拡張が使えなくなったのが痛いです。ということで解決法。 はてなブックマーク機能拡張をダウンロード はてなのサイトから機能拡張をダウンロードします。 Safariでも快適ブックマーク！はてなブックマークSafari拡張登場！ 機能拡張を解凍 ターミナルを開いて、~/Downloads に移動します。 機能拡張はドキュメントなどのフォルダに移動しておいた方が良いはずです（未検証）。ダウンロードから消してしまうと動かなくなるかも。 Safariで開発者メニューを追加 Safariの環境
【追記あり】AppleのiOS 11、macOS High Sierra のWebブラウザSafariに搭載されるITP(Intelligent Tracking Prevention)ってどんな機能なの？｜アナグラム株式会社
【追記あり】AppleのiOS 11、macOS High Sierra のWebブラウザSafariに搭載されるITP(Intelligent Tracking Prevention)ってどんな機能なの？ 2017年9月20日、Apple社のiPhoneやiPad向けのオペレーティングシステム（以下、OS）であるiOS 11が日本国内向けにリリースされました。併せて、mac用のOSであるmacOS High Sierraのリリースも予定されています。OSのバージョンアップによってさらなる高機能化が図られる中、これらのOSに搭載されるWebブラウザ「Safari」のセキュリティ機能についても注目が集まっています。 その機能とはIntelligent Tracking Prevention（以下、ITP）と呼ばれるもので、SafariでWebサイトを閲覧する際のプライバシー保護と利便性のバラ
思い出せないパスワードをSafariから調べる方法を紹介
現在のiOSには、「iCloudキーチェーン」というしくみがある。ログインが必要なWEBサイトなどでユーザID/パスワードを入力すると、その情報がiCloud上に保存され、次回以降のログインで入力を省略できる機能だ。同じApple IDでサインインしているiOSデバイス/Macであれば、情報を共有できるというメリットもある。より噛み砕いていえば、「自分の持ち物のApple製品間でパスワード管理を自動化できる機能」なのだ。 しかし、iCloudキーチェーンが使えないスマートフォン/パソコンではそうもいかない。自宅のパソコンは家族共用でApple IDでのサインインはしていない、タブレットはAndroid OSだからiCloudの機能が使えない、というケースもじゅうぶん考えられる。ログインが必要なWEBサイトにユーザID/パスワードを入力しようとしたが、ふだんiCloudキーチェーンに頼り切っ
Safari Push Notifications - Notifications - Apple Developer
Use the Apple Push Notifications Service to send notifications to your website users, right on their Mac desktop — even when Safari isn’t running. Safari Push Notifications work just like push notifications for apps. They display your website icon and notification text, which users can click to go right to your website.
【神ツール】iPhoneはSafariだけどMacはChromeという人向け！メニューバーにiCloudタブを表示できる「CloudyTabs」が超便利！ | ゴリミー
【神ツール】iPhoneはSafariだけどMacはChromeという人向け！メニューバーにiCloudタブを表示できる「CloudyTabs」が超便利！ 【img via github】 iPhoneはSafariを使っているが、MacはChromeを使っている、と言う人も少なくないだろう。デバイス間のタブの同期が便利なのでiPhoneでもChromeを使いたいが、Appleがブラウジングを高速化するエンジンを解放していないため、なんだかんだで最終的にSafariに落ち着いている。 これでiPhoneやiPadでSafariを使っていても何も怖くない！ 「iPhoneやiPadでSafariは使いたいけど、タブの同期が便利だから仕方なくChromeを使っている」という人も「CloudyTabs」を使えばiCloudを使って同期している全てのデバイスのタブがリストとして表示される。 ダウン
iPhone向けSafari、HTML拡張属性を使いこなす | Webサイト開発
iPhone向けSafari、HTML拡張属性を使いこなす 2009.11.04 2020.09.10 Webサイト開発 HTML iPhone, demo iPhone向けSafariでは、W3C標準のHTMLタグ・属性をサポートしているのはもちろんだが、iPhone固有の拡張属性・拡張CSSプロパティが使用できる。具体的には、テキストの入力方法を制御するものからタッチパネル操作専用のイベントハンドラ、バックライトの制御といった機能まである。 今回はiPhone固有のHTML拡張属性を紹介したい。 関連記事： 円記号をiPhoneのブラウザに表示するには？ maxlengthで半角文字数で制限するには？ iPhone でHTTPプロキシを使用する際の制限 スマートフォンのラジオボタンを使いやすいサイズにするには？ スマホ向けページャデザイン 3選 CSS3 擬似クラス SafariのPC
iPhoneのChromeとSafariでキャッシュとクッキーを削除する方法｜男子ハック
Chromeのキャッシュ&クッキーの削除はアプリ内から可能です個人的にはSafariをメインでChromeをサブとして利用していますが、使っているからには溜まっていくのキャッシュやクッキーのファイル。 たまにはリセットしてリフレッシュするのもいいんじゃないでしょうか。 削除方法は簡単。Chromeのアプリを起動してメニューをタップ。表示されたメニューから「設定」をタップして「プライバシー」をタップ。 プライバシーの項目内に「閲覧履歴の消去」として削除することができる項目が表示されます。 Safariのキャッシュ&クッキーの削除は設定アプリから可能ですChromeだけじゃなくSafariのキャッシュとクッキーも削除したいという人のために、Safariでの方法もご紹介。 Safariの場合はアプリ内からではなく、「設定アプリ」から削除することが可能。設定＞Safariとタップすれば項目が表示さ
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
iOSシミュレータ内MobileSafariのWebインスペクタを有効にする方法
iOSシミュレータ内のMobileSafariを、スマートフォン向けWebサイトの開発に使っている人は多いのではないでしょうか。 Safariで言うところの「Webインスペクタ」、Google Chromeで言うところの「デベロッパー ツール」がiOSシミュレータ内のMobileSafariでも使えたらなぁ、と思いませんか？ 上記のサイトの情報によれば、プライベートメソッドを実行することでMobileSafari内でWebサーバを起動、iOSシミュレータの外からMac側のブラウザで「http://localhost:9999」にアクセスしに行くと、Safariで言うところの「Webインスペクタ」相当の機能がブラウザ越しに使えるということです。 実際にやってみました。大変便利ですね！ そこで、iOSシミュレータ内のMobileSafariの「Webインスペクタ」の有効/無効を切り替えるアプリ
iOS6のリモートWebインスペクタ
iOS6のリモートWebインスペクタ iPhone5が販売されて、それに合わせてiOS6がリリースされました。ちょっとアップデートは様子見をしようと思っていたのですが、iOS6のリモートWebインスペクタが気になったので検証用のiPhoneのiOSバージョンを4.3から一気に6にアップデートしました。 iOS6のリモートWebインスペクタの使い方 iPhoneの設定 iPhoneの設定→Safari→詳細でWebインスペクタをオンにします。 WebインスペクタをオンにしたらSafari6がインストールされているMacとケーブルで繋ぎます。 ちなみにiOS6ではこれまであったデバッグコンソールがなくなってるのでWindowsの人はアップデートしないほうがいいかも。 Macの設定 Safariを立ち上げて開発メニューから「WebKit Webインスペクタを使用」にチェックを入れます。 iPho
脱Google Chrome！MacのメインブラウザをSafariに完全移行した際にやったことと導入した機能拡張まとめ
先日、OS X Mountain Lionにアップグレードを済ませたのですが、それを機にメインブラウザをGoogleChromeからSafariへ移行しました。 なんだか最近Chromeを使用していると「重いな」と感じることが多くなってきたことと、機能拡張などを使用すれば今までと変わらないブラウジングが可能になるということがわかったからです。 そんなわけで今回はメインブラウザ移行に関してやったことと、導入した機能拡張をまとめ上げておこうかと思います。 気になる新機能などをまとめて一挙紹介！！Mac新OS、「OS X Mountain Lion」レビュー！ | OZPAの表4 ブックマークの移行 まずはGoogle Chromeで使用していたブックマークをSafariに移行。 プラグインの「Xmarks」を使えば問題なく移行できる…と思っていたのですが、なぜだか上手く働いてくれない私のエッキ
超絶便利！Safariでショートカットキーからブックマークレットを発動する方法 – 和洋風KAI
和洋風KAIは、Apple・水樹奈々・食べ歩きが三本柱のブログです。モットーは「楽しく」「便利で」「端的に」。 ⇒ アバウト ⇒ 免責事項 Keyconfigというショートカットキーでブックマークレットを発動することができる、すんばらしい機能拡張があるのですが、残念ながらSafariではそれがありません。 「うーん。どうしたものか。」 と悩んでいたら、ネタフルさんに「キーボードショートカットでSafariのブックマークレットを便利に使うTips」という超絶便利な記事がありました。 早速試してみたらSafariでもショートカットキーからブックマークレットを発動できたのです！ これは凄い！ヤバイ！ってことで和洋風でもシェアします！ Sfariでショートカットキーからブックマークバーにあるブックマーク・ブックマークレットを起動する方法。 shift + command + Bでブックマークバーを
[Mac] Mountain Lion の Safari で、横いっぱいまで広がるようになったタブを元の長さに戻す２つの方法。 | Appdrill
Mountain Lion の Safari 6 で横いっぱいまで広がるようになったタブを従来の長さに戻す方法です。２つのやり方をご紹介します。 cosyTabs １つ目は、タブの長さを戻すために作られた「cosyTabs」というSIMBLプラグインを使う方法です。 ダウンロードしたプラグインを /Users/<username>/Library/Application Support/SIMBL/Plugins/ にコピーしてSafariを再起動すればOKです。 Glims もう一つは、Safariに便利な機能を追加する人気のプラグイン「Glims」の中で設定可能です。 Glims の設定画面で、「一般」→「その他のタブ強化」を「ON」 「タブその他」にある「タブラベルの最小サイズを favicon のサイズにする」をチェック。 以上で従来の長さに戻ります。
![[Mac] Mountain Lion の Safari で、横いっぱいまで広がるようになったタブを元の長さに戻す２つの方法。 | Appdrill](https://cdn-ak-scissors.b.st-hatena.com/image/square/94c7daee7d6ee251e2f4cc70f2511dd90e8c6c3b/height=288;version=1;width=512/https%3A%2F%2Fappdrill.net%2Fwp-content%2Fuploads%2F2012%2F08%2F120802-0004-2.jpg)
サファリ6で表示フォントを指定したい|Mac Fan
文●編集部 MTライオンの登場に合わせ、OS標準のWEBブラウザ「サファリ」がバージョン6にアップデートされた。表示速度の高速化、アドレスフィールドと検索フィールドの統合などが図られより使いやすくなったが、一部なくなった機能もある。その1つがフォントの指定機能だ。サファリ6でフォントを指定するには、ちょっとしたテクニックが必要となる。 サファリ6の場合、フォントの指定がないWEBサイトでは日本語テキストが明朝体で表示されるようになっている。これをゴシック体に変更したい場合、ユーザが独自にスタイルシート（CSS）ファイルを作成し、フォントを指定する必要がある。例えば、以下のように記述したCSSファイルをサファリ6に読み込ませると、欧文がLucida Grande、日本語がヒラギノ角ゴシックで表示されるようになる。 body { font-family: "Lucida Grande", sa
Webフォントをキレイに見せるCSS(Windows版Safari編)
概要 ▶ “Conscience is a man's compass” Vincent van Gogh by Foto_di_SignorinaWebフォントをなるべくキレイに見せたい、ということで書いた「Webフォントをキレイに見せるテクニックを2つ紹介(Chrome編)」ですが、予想以上の反響があり驚いています。それだけWebフォントへの期待が高いと言えるでしょう。さて、その記事の中で以下 Webフォントをなるべくキレイに見せたい、ということで書いた「Webフォントをキレイに見せるテクニックを2つ紹介(Chrome編)」ですが、予想以上の反響があり驚いています。 それだけWebフォントへの期待が高いと言えるでしょう。 さて、その記事の中で以下の様に書きました。 それは本文組にWebフォントを使用して、Windowsのウェブブラウザで見ると『文字が欠ける』『文字が汚い』といった意見が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サードパーティCookie制限の時代、Safari 11のITPで到来。広告主はAdWordsとGAの連携で対策を! | リスティング広告運用でビジネススキルも磨く
PC
FacebookのテーマをカスタマイズするSocial Fixerを使ってみた。 – WEB DREAM Web会社社長の日報
Mac Fan.jp ログファーム社について重要なお知らせ