Web制作ブログ

制作関連やデザイン、コーディング、WordPress、SEOや集客のネタなどのブログ

コーディング

cssを圧縮するとデベロッパーツールで行数がわからない?!

カテゴリ:コーディング

この記事は約1分42秒で読めます。

こんにちは!グローイングスケールの竹林と申します。

Web業界15年以上でWordPress(100サイト以上構築)とSEOが得意なWebデザイナーです。
有料noteで「爆速!速くGoogleにインデックスしてもらう方法」を書いたので、ご興味ありましたらご覧ください。
「好き」なことを仕事にしたいという方のお役に立てればと思います。

ここら辺ブラウザのバージョンアップで変わったりしやすい部分。。

最近のchromeは圧縮されたcssの行数が表示されます。

もし、あなたがchrome以外のブラウザでsassの行数を知りたいのなら迷わず、chromeを使いましょう。

あ、その前にソースマップというファイルをコンパイラに出力するように設定しておいてください。

ソースマップというものは
sassファイルに圧縮されたcssが何行目に書かれてるか、マッピングされた情報が書かれているファイルです。

きっとあなたがお使いのコンパイラにはソースマップを出力するかしないかチェックボックスなどで選択できるようになっているはずです。

もう一つ忘れずに行ってほしいのは

ソースマップファイルをFTPでかならずサーバーにUPしてください。

そうしないとブラウザがソースマップファイルを認識してデベロッパーツールが行数を認識してくれません。

CSSの圧縮はwebページ表示速度の改善にもかなり効果的です。

しかもwebページの表示速度が改善されたらSEO的にも評価が上がります。

行数がわからないからといって、CSSの圧縮を拒んでいたら上記の方法をヒントにソースマップを活用してみくださいね!

合わせて読みたい「コーディング」の記事

この記事を書いた人

Growing Scale

コーディング歴約15年。WordPress化したサイトは約100サイト。SEOキーワードで上位表示経験多数。最近はGoogleのデーターポータルがおもしろい。ウェブ解析士。サイト制作実績

GrowingScale代表

記事タイトルとURLをコピーする

Web制作」の関連記事

アドセンスのクリック単価が低い原因

アドセンスのクリック単価が低い原因

AdSense(アドセンス)

アドセンスのクリック単価が低い原因は様々な原因が考えられます。 よくいわれるのは、 ページの内容が、クリ...

続きを読む

Google Analyticsで自分を除外する方法

SEO対策

Google Analyticsを使いアクセス解析をスタートすると、自分がアクセスした数を除外したくなります。そこで、...

続きを読む

wordpressの新規投稿 ができなかったけど解決!した話

WordPress

もっと言うと、投稿記事の更新もできない。記事に文書追加して更新ボタンをクリック。その後再読込すると追加した分が消えてま...

続きを読む

contact form 7のメール送信できない解消法

WordPress

contact form 7は、便利な分他のメール送信プラグインと比べエラーが多い印象がしますね。 しかし、メールの設...

続きを読む