web関連
【HTML】body内で外部cssを読み込む方法
body内で外部cssって読め込めるのか気になって調べた時の備忘録
HTML5.2からbody内にlinkを埋め込めるみたい
2017年12月頃に発表されたHTML5.2からbody内で外部css読み込めるようになったみたい
<body>
…
<!-- ↓body内に書ける -->
<link href="style.css" rel="stylesheet">
…
</body>こういう風にbody内で外部cssを読み込めるようになった
外部css以外にlink要素を使って読み込めるものが他にもあるみたい
このサイトでbody-okって書いてあるlink要素のリンク種別？はbody内で使えるみたい
あと、style要素なんかもHTML5.2からbody内にかけるようになったみたい
<body>
…
<!-- ↓body内に書ける -->
<style>
body{
…
}
</style>
…
</body>body内で外部css何かが読み込めるようになったけど、極力使わない方がいいみたい
というのもcssファイルは読み込みが始まるとそのcssファイルが読み終わるまでHTMLコードの読み込みが中断してしまうからcssが当たってないhtmlページが表示される可能性があるっぽい
defer/asyncみたいなのがlink要素にあればいいのにね
だから、とりあえずは従来通りhead内に書いておくのが無難かも
javascriptを用いてbody内に外部cssファイルを読み込む
javascriptで外部cssを読み込む場合はこんな感じで書けばいいみたい
<body>
…
<script type="text/javascript">
var link = document.createElement('link');
link.href = 'css/style.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
</script>
</body>
これで外部cssを読み込ませることもできる
styleなんかはcssをとりあえず当てときたいとき普通に使ってたけど、HTML5.2からだったんだね
全然知らんかった、ほかにもdialog要素とか面白そうなタグ使えるようになってるから後で調べよ
body内に書く場合はjavascriptを使用していたみたい一応調べたのでせっかくだから書いておく↓