HTML5でCSS/javascript読込「外部ファイル読込」と「インライン」

f:id:somegoro:20170917040519j:plain

HTML5でCSS/javascript読込

最近のマイブームは図書館で本を片っ端から読んでいくことです。仕事終わりから閉館までなので１日２時間程度しか居られないのですが、毎日読み込んでいることで早く深く読めるようになった気がします。「仕事を辞めて本を読むことに集中したらどれだけの知見を蓄えることが出来るのだろうか」という謎の向上心がちらついています。

さて、今回の記事では「読込」は「読込」でも「HTMLでCSS/javascriptの読み込み」についてご紹介します。
・外部ファイル読込
・HTMLファイル中に記述（インライン）

上記２つは基本的な読み込み方法でHTML文書のhead要素配下に記述します。この読み込み方法がHTML5ではとても簡単になりました。実際にコードを見ていきます。

外部ファイル読込

HTML4.01

<link href="sample.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="sample.js"></script>

type属性はMINEタイプを記述するところです。HTML4.01の頃は記述が必須だったんですね。HTML5では次のように省略して書くことが出来ます。

HTML5

<link href="sample.css" rel="stylesheet">
<script src="sample.js"></script>

このとおりtype属性が省略されていますね。
HTML5ではstyle要素と記述すると初期値としてCSSのMINEタイプとして扱ってくれるのです。script要素も同様にMINEタイプに何も記述しないと初期値としてjavascriptのMINEタイプとして扱ってくれます。

HTMLファイル中に記述

HTML4.01

<style type="text/css">
#sample {
  width: 100%;
}
</style>
<script type="text/javascript">
function sample(){
  console.log("sample");
}
</script>

HTMLファイル中に記述も外部ファイル読込のときと同様です。要素からMINEタイプを自動で認識してくれます。

HTML5

<style>
#sample {
  width: 100%;
}
</style>
<script>
function sample(){
  console.log("sample");
}
</script>

ちなみに

link要素、script要素には様々な属性があります。代表的な属性の意味をそれぞれ見てみましょう。

link要素

属性	意味
href	これは必須です。 URLを指定することでリソースとして扱うことができます。
rel	これも必須です。 Relationの意味ですね。ドキュメントとリソースとの関係を指定しています。
media	これは任意の属性です。メディアを指定しています。スマホ用、印刷用など用途ごとに指定出来ます。
type	これはHTML5で任意になったMIMEタイプを指定する属性ですね。（何も記載が無いとtext/cssが設定されます）

script要素

属性	意味
src	これは必須です。 URLを指定することでリソースとして扱うことができます。
async	これは任意の属性です。非同期で読み込んで、読込次第実行します。そのため実行順序は担保されません。
defer	これは任意の属性です。この属性を使用するにはsrc属性が必須です。HTMLを読み込んだ時点で実行開始します。
type	これはHTML5で任意になったMIMEタイプを指定する属性ですね。（何も記載が無いとtext/javascriptが設定されます）
charset	これは任意の属性です。文字エンコーディングを指定します。最近ではUTF-8ですよね。