SafariでCSS(スタイルシート)を無効にする方法

有名企業のサイトなんかでCSSをオフにしてみると、HTMLの骨格が見えてとても勉強になります。SafariCSSを無効にするにはどうやってやるんだろうと思って、調べてまとめてみました。前置きが長いので急いでる人はSafariでCSSを無効にするにはからどうぞ。

Safariを使うまでの経緯

前まではChromeをバリバリ使ってたんですけど、来年にはMacWindowsなどでのChromeのサポートは終了するみたいです。(2016年8月の記事より)

http://news.mynavi.jp/news/2016/08/22/034/

 ってことで、MacユーザーなんでSafariを使おうと思って、とりあえずブックマークと履歴を移行しました。その時参考にしたのはこの記事。

http://blog.skeg.jp/archives/2016/07/bookmark-chrome-safari.html

まあこれ以外にもChromeで保存してた各サイトのパスワードとか、移したいものは色々残ってるんですけど、とても骨が折れる作業になりそうなので、その辺はとりあえず放置にしています。Automatorで自動化とかできそうだったらまた記事にしたいと思います。(パスワードの一覧をCSVファイルでエクスポートするとこまでは下の記事を参照していけました。ただリンク先にも書いてありますけど、ベータ版的な機能らしく、自己責任でってことみたいです)

http://bashalog.c-brains.jp/16/10/06-122524.php

 CSSを消したい

まだ全然なんですけど、いつか自分でHTMLとCSSとフルで書いてみたいと思ってて、それ関係の書式とか色々調べてた時に、”有名なサイトのCSSをオフにしてみると勉強になる”的なことを知ったんですよね。で、Chromeの時は、1クリックでオンとオフを切り替え出来るプラグインを入れてたんです。

f:id:daikeiobachan:20170224005556j:plain

これめっちゃ便利でした。常にタブにあるんで、いつでも気軽に変えられるんです。

 

同じことをSafariでもやりたいと、ということで以下まとめました。

 

SafariCSSを無効にするには

Safari→環境設定→詳細で「メニューバーに”開発”メニューを表示」にチェック

f:id:daikeiobachan:20170224011508j:plain

②メニューバーの「開発」から、「スタイルを無効にする」をチェック

f:id:daikeiobachan:20170224011707j:plain

これでSafariCSSが無効になる。他にも画像とかJavaScriptとかも無効にできる。

Yahooだとこんな感じ。有名なサイトって骨格がしっかりしてるっていうのがわかる。

 

いつものYahoo

f:id:daikeiobachan:20170224012534p:plain

CSSを無効にしたYahoo

f:id:daikeiobachan:20170224012536p:plain

 

HTMLの中身を見るには

ちなみに、HTMLの中身とかも色々見れる。

①「開発」メニューから「Webインスペクタを接続」にチェック

f:id:daikeiobachan:20170224012248j:plain

②画面の下に出てくる。見やすくするには左上の重なってるのをクリックする。

f:id:daikeiobachan:20170224012857j:plain

③「リソース」をクリックするとHTMLの中身が見れる。

f:id:daikeiobachan:20170224013024j:plain

 最近はWordPressとか色んなサービスのおかげで、詳しい知識がなくても簡単にブログなどを書くことができますが、HTMLやCSSなどの基本的な知識は持っていて損はないと思うので、是非活用してみてください。