@makoxtiposted at 2021-04-17

<head>タグに書いたlinkタグが<body>タグ内に移動する

Q&A

Closed

解決したいこと

htmlでheadタグに書いたlinkやscriptタグがChromeのデベロッパーツールから見てもちゃんとheadタグ内に表示されるようにしたい

該当するソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<title>bootstrap</title>
</head>
<body>
    <div class="row">
        <div class="col-3">bootstrap1</div>
        <div class="col-5">bootstrap2</div>
        <div class="col-2">bootstrap3</div>
        <div class="col-2">bootstrap4</div>
    </div>
</body>
</html>

自分で試したこと

全角スペースが入っていないか確認
別の端末で同じコードをブラウザで確認

1Answer

@yoshi389111 posted at 2021-04-17

ご提示のソースを手元の環境で動かすと以下のようになっています（ちゃんと head の中に入っている）。

OS(Winddows 10)の違いや、ブラウザのバージョン(Chrome 90.0.4430.72)などが影響しているのかもしれませんが。

ちなみに、 meta と link を以下のように閉じてみたらどうなるでしょうか？
（HTML5 では不要だと思いますが、付けたら動きが変わりますかね？）

  <!DOCTYPE html>
  <html>
  <head>
- <meta charset="UTF-8">
+ <meta charset="UTF-8" />
- <link rel="stylesheet" href="css/bootstrap.min.css">
+ <link rel="stylesheet" href="css/bootstrap.min.css" />
  <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
  <title>bootstrap</title>
  </head>
  <body>
      <div class="row">
          <div class="col-3">bootstrap1</div>
          <div class="col-5">bootstrap2</div>
          <div class="col-2">bootstrap3</div>
          <div class="col-2">bootstrap4</div>
      </div>
  </body>
  </html>

あるいは、（可能なら）ブラウザを最新版にしたらどうなるでしょうか？

0Like

Comments

@makoxti
Questioner
ご確認頂きありがとうございます。

手元で上記のソースを適用して確認したところ、事象はかわりませんでした。

Chromeのバージョンですが、最新版になっておりました。
「バージョン: 90.0.4430.72（Official Build）（64 ビット）」

Are you sure you want to delete the question?