Q&A
知りたいことに詳しく特化して書いて頂けたので、ベストアンサーとさせて頂きました。
ちなみに、jQueryで「Lazy Load」という画像を遅延読み込み（スクロールされて表示領域に入ったら読み込むもの）を<body>タグの一番下に書いているのですが、これは<body>タグの一番上の方が良いでしょうか？
少ないコードでそのhtmlファイルでしか使っていない場合、
<head></head> のタグの中にcssを記述したりしていますが、ときどき、<body></body>タグの中に記述しているソースも見かけますが、<body>の中に書いた方が良いケースもあるのでしょうか？
回答2件
0
CSSを記述するstyle要素の場合、原則としてhead要素内にのみ記述します。body要素内には記述できません。
(W3CのHTML検証ツールで試しましたが、body要素内にstyle要素を記述する事はできませんでした。)
ただし、style要素にscoped属性が導入されたため、これが指定されている場合に限りbody要素内に記述する事ができます。
hamashun me : HTML5のstyle要素が持つscoped属性について
しかし、scoped属性に対応しているブラウザはまだ殆ど存在しません。
このため利用できる状況ではなく、scoped属性は例外として考えたほうが良いでしょう。
JavaScriptの場合、script要素が存在する位置でJavaScriptの読み込み・実行を行ってから以降のHTMLを解析します。
このため、head要素内に記述されているとbody要素内のHTMLの解析が開始されるまでに時間がかかり、表示速度が低下します。
これを避けるため、最近ではscript要素はbody要素内の最後に記述した方が良いと言われています。
[JS] JavaScriptの読み込み位置をページ最後にしたほうがよい理由 ｜ memocarilog
ただし、HTML解析前に実行する必要があるJavaScriptもあるため、闇雲にbody要素内に移動すれば良いという話でもありません。
また、以下のような意見もあります。
ssig33.com - JavaScript を最下段で読み込むのがあまり有効ではない理由
結論、
JavaScriptはbody要素内に書いた方が良いケースも存在します。
CSSはbody要素内には記述できません(例外有り)。
投稿2015/05/02 04:43
編集2015/05/02 04:47
総合スコア697
0
ベストアンサー
CSSに関しては、bodyの中に書いたほうがいい理由は特にないと私は思います。
ブラウザはHTMLを上から順番にパースしていくので、
デザインを規定するCSSは上の方で記述または読みこむべきだと言われています。
逆にJavaScriptは、実行に時間がかかるとそこでHTMLの読み込みが中断してしまうので、bodyタグ内の一番下に書くのが良いとされています（jQueryなどのライブラリやGoogle Analyticsのトラッキングコードなどは例外で上に書く）。
なのでベストプラクティスとしては、「CSSは上、JavaScriptは下」という原則に則ってcssはheadタグの中、JavaScriptはbodyタグの一番下にまとめて書くのが良いかと思います。
ただ小さいコードだとしてもCSSとJavaScriptは別ファイルにして読み込むのがよいです。今後コードが増えた時も管理しやすいですし、一つのファイルにCSSやJavaScriptとHTMLがあんまり混在しているとコードが汚くなってしまうので・・・。
投稿2015/05/02 04:38
総合スコア462
ベストアンサーをいただけて光栄です。
速度計測などはしていないので憶測ですが、LasyLoadは画像読み込み（imgタグのレンダリング）を遅延させるものなので、HTMLの読み込みの前、つまり上で読み込ませればよいのではないでしょうか。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/02 10:05