Home
Menu
Side
Twitter
Top
ホーム / HTML | ブログ | ブログカスタマイズ |

外部 CSS と Script の設置場所はココがオススメ

2019/09/09

HTML ブログ ブログカスタマイズ

こんにちは HARU（ @HARU ）です。

今回はブログのデザインを変える上でよく使われる外部 CSS と Script。実際に HTML 上のどこに記載するのかということを説明したいと思う。

結論から言うと外部 CSS も Script も HTML 上のどこに記載しても構わない。（ 一部例外はあるけど ）

しかし、いろいろな観点から推奨される記載場所というものは存在する。

特に HTML 初心者などはそもそもどこでも良いって言われても……となることは実体験済みなので、ある程度書く場所がわかってもらえたら書いた価値があるというもの。

参考サイト

外部 CSS とは

CSS は基本的にデザインを反映させたい Web ページと同じ HTML 上に書くことが一般的である。

このブログももちろん同じ HTML 上に CSS を書いている。

外部 CSS とは違う Web ページに CSS を書き、そこからリンクすることで CSS を反映させる方法である。

読んでそのままな意味ではあるよね。

  
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

上記例のような <LINK> タグで囲まれていて .css の拡張子の形になっている。

外部 CSS を使う理由

同じ HTML 上に CSS を書いているこのブログも、外部 CSS を使うことがあるの？って思った人はなかなか鋭い。

実はそれでも、このブログは外部 CSS をたくさん使っている。何に使っているのか。それは表示したいアイコンや追加した Script の基本 CSS などにである。

アイコンっていうのは とか 感じのやつね。

このアイコンは画像を挿入しているわけではなく、HTML 上は文字として書いているけど、外部 CSS でアイコンとして表示されるようになっている。

アイコンだけに限って言えば画像をブログに挿入し、アイコンとして表示させる方法もある。しかし Script に関してはそもそも外部 CSS を読み込ませるまでがセットとなっていることが多い。

まぁ、特別使いたいアイコンが無いとか Script を使うことが無い場合は、外部 CSS を使うことは無いとは思う。

Script とは

トップへ戻るボタン だったり、画像比較プログラム だったり、ブログの装飾を変更している中で追加したい機能とかのプログラムのこと。

  
    <script>
      $.fn.BeerSlider = function ( options ) {
        options = options || {};
        return this.each(function() {
          new BeerSlider(this, options);
        });
      };
      $('.beer-slider').BeerSlider({start: 50});
    </script>

上記例のような <script> タグで囲まれているものになる。

外部 CSS や Script の設置場所を決める理由

HTML 内に外部 CSS や Script の設置場所を決めてしまう理由は以下の通りだ。

  • 場所を決めればメンテナンスが楽
  • Web ページ表示速度に影響する

場所を決めればメンテナンスが楽

使わなくなった外部 CSS や Script などを放置しておくと、その分だけページの表示速度が遅くなる。

Web ページの表示速度は SEO にも影響してくる項目なので、HTML の適度なメンテナンスは必要になってくるはずだ。

そこで使わなくなった CSS や Script はもちろん削除することが推奨される。そのときどの辺りに書かれているか決めていれば、メンテナンスが楽にできるということだ。

Web ページ表示速度に影響する

Script に関して、設置された場所によってはページ表示速度に影響する場合がある。

HTML の特性上、上から読み込まれることが基本になるが、Script を読み込んでいる間は、HTML を読み込まないという特性があるからだ。

つまり Script が HTML 上で上の方に設置されてしまうと、ページの読み込みの途中で Script の読み込みが割込み、全体的なページの読み込み速度が遅くなってしまう。

外部 CSS の設置場所

外部 CSS は基本的には他の CSS と同様に <head> </head> 内に記載したほうがいいだろう。

私の場合 <head> の直下に外部 CSS を記載することで統一し、メンテナンス等をしやすくしている。

また基本 CSS を外部に委ねている Script を自分好みに CSS にてデザインを変える際、HTML の基本である上から読み込まれるというのを考えると、自分のブログ HTML の CSS より上にあったほうがいいと考えている。

Script の設置場所

Script の設置場所については Web ページ表示速度に影響する で示した通り、なるべく HTML 上、下の方に設置するほうがいいだろう。

Script は </body> の直上に設置することで、ページ読み込みで全体が表示された後、Script の読み込みがされるのでページ速度への影響が少なくなる。

例外も存在する

基本的に Script は </body> の直上に書くことによって、ページ速度に影響を及ばさないようになるが、Script の内容によっては <head> </head> 内に記載する必要なものなどが存在する。

</body> の直上に書くものは後から読み込まれても問題ない Script であり、ページを表示するのに必要になってくる Script は先に読み込ませる必要がある。

例えば JQuery の Script は先に読み込ませておかないと他の Script に影響してしまうため、<head> の直下に記載している。

いろいろな機能追加である Script を導入するときは Script の記載場所が指定されていないか確認しよう。

また Script 自体がうまく動作しなかったり、表示しなかったりする場合、Script の記載場所を変更することで解消されることもある。

JQuery に関してはこちら

大体の設置場所

Blogger ブログの場合のテンプレートにて外部 CSS と Script の設置場所の例を以下に記載する。

  
    <html>
    <head>

      外部 CSS は <head> の直下に書く

    <b:skin>
    </b:skin>
    </head>
    <body>

      Script は </body> の直上に書く
      ※例外あり

    </body>
    </html>

まとめ

外部 CSS と Script の設置場所は基本的にはどこでも OK だが、HTML のメンテナンス性と Web ページの表示速度に影響を与えないために、推奨される場所に書く必要がある。

外部 CSS は <head> の直下。Script は </body> の直上に書くことが推奨される。

ただし Script を書く場所は Script の内容によって異なってくるため、基本的には </body> の直上とし、Script がうまく動作しなかったり表示しなかったりする場合、書く場所を変更する必要がある。

QooQ