【iOS18】Safari「気をそらす項目を非表示」の仕様を調査
iOS18でSafariに「気をそらす項目を非表示」という機能が追加されました｡
要は､手動による広告ブロック機能です｡
簡単に使い方を説明すると
サイトを開いた状態でアドレスバー左側をタップし「気をそらす項目を非表示」をタップ
非表示にしたい項目をタップし「非表示」をタップ｡ 最後に「完了」をタップします｡
ザワーっというアニメーションとともに広告が非表示になりました｡
項目を非表示にすると､アドレスバー左側に青い目のアイコンが表示されます｡
ちなみに､非表示状態をもとに戻すには､もう一度同じメニューを開き
「非表示の項目を表示」をタップします｡
いちブログ発信者としては広告が収入源なので複雑な思いではありますが､多くの人にとっては便利機能なのではないでしょうか｡
ここからは少し技術的な話､どの要素が非表示の対象なのか？どのように非表示にしているのか？
少し調査してみたので解説します｡
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/51fb8d45.a8a8bb3f.51fb8d46.91878c00/?me_id=1351067&item_id=10000179&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fniccou-store%2Fcabinet%2F12335494%2F12426802%2F2dgq-st2.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
目次
どの要素が非表示の対象なのか？
おそらく､非表示の項目の対象となるのは､HTMLにおけるすべてのブロック要素です｡
見出し(h2)やpタグ
ul liタグやdivタグなどが選択できます｡
ulタグ丸ごと選択したり､liタグ個別の選択もできました｡ div内のpにおいても同様です｡
![CIO NovaPort DUOⅡ 45W USB-C 2ポート PD 急速充電器 [世界最小級 NovaIntelligence NovaEngine搭載] ACアダプター Type-C iPhone 17 / Air / 16 / 15 Android Galaxy Macbook iPad向け ノートPC (ブラック)](https://m.media-amazon.com/images/I/715q70AWZAL._AC_SX425_.jpg)
CIO NovaPort DUOⅡ 45W USB-C 2ポート PD 急速充電器 [世界最小級 NovaIntelligence NovaEngine搭載] ACアダプター Type-C iPhone 17 / Air / 16 / 15 Android Galaxy Macbook iPad向け ノートPC (ブラック)
![CIO NovaPort DUOⅡ 65W USB-C 2ポート 充電器 [世界最小級 NovaIntelligence NovaEngine搭載] ACアダプター type-c 67W PD 急速充電器 ノートPC Macbook iPhone 17 / Air / 16 / 15 Android Galaxy iPad向け (ブラック)](https://m.media-amazon.com/images/I/71Zi4tqVRdL._AC_SX425_.jpg)
CIO NovaPort DUOⅡ 65W USB-C 2ポート 充電器 [世界最小級 NovaIntelligence NovaEngine搭載] ACアダプター type-c 67W PD 急速充電器 ノートPC Macbook iPhone 17 / Air / 16 / 15 Android Galaxy iPad向け (ブラック)
どのように非表示にしているのか？
非表示にしたところを､Macから検証ツールで見てみます｡
試しにこのdivタグを非表示にしてみます｡
非表示になりました｡
検証ツールで見てみると､該当のタグがdisplay:none!important;されてました｡ (それにしてもすごいセレクタ...)
じゃあCSSで非表示にしてるだけ？と思い､このdisplay:none!important;を消してみると...
なんか､divタグの領域だけ現れました｡ 中身が現れず...
子要素も他にスタイルは当たってないっぽいし､色々こねくり回したものの現れず...｡
やっぱりCSSだけではなく､システム的に消しているのでしょうか｡
ここでは､CSSだけで強制に表示させることはできない､と結論づけさせていただきます｡
TORRAS iPhone 17 Pro 用ケース 【カチカチ・多機能360度回転スタンド】リング Ostand O3 Fitness MagSafe対応 米軍MIL規格耐衝撃 スタンド 指紋防止 黄変防止 カメラコントロールボタン付き ストラップホール 半透明 撮影/動画視聴/日常の記録 手のひらサイズの映像革命 ブルー
【新型シリコーン・柔らかく快適な手触り】TORRAS iPhone 17 Pro Max 用 ケース シリコン製 360°回転スタンド MagSafe対応 指紋防止 米軍耐衝撃 柔らかい質感 風型立体ライン おしゃれ カメラコントロールボタンOstand Q3 Wind Flow 「かぜなみ」ブルー
実機確認用
実機確認用に主要なHTML要素を置いておきます｡
p (段落) タグ
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ul li (リスト) タグ
- この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
- この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
- この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
divタグ
3つのpタグをdivタグで囲っています｡これは1つ目のpタグです｡
3つのpタグをdivタグで囲っています｡これは2つ目のpタグです｡
3つのpタグをdivタグで囲っています｡これは3つ目のpタグです｡
sectionタグ
見出しとpタグ2つをsectionタグで囲っています｡
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
追従要素
お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡
筆者のマイベビーリスト (Amazon)
OFUSEで応援を送る
または以下のボタンからなにか買って応援
(リンク先の商品を買わなくても大丈夫です｡)
Amazonでなにか買う
楽天市場でなにか買う
Yahoo!ショッピングでなにか買う
PR