HTML/CSS/JS jQuery　jQuery読み込めません、、、

こんにちは
webデザインでjQueryを学んでいるのですが、初歩的なところで躓いております。
jQueryを読み込む際に、jQuery CDNでjQueryを読み込もうとしているのですが、うまく読み込めません。
下記にコードを記載しています。

見づらかった場合、どうやって共有すればいいか等
教えていただけると幸いです。
宜しくお願い致します。

HTML code (FileName:The_complete jQuery_course.html):

<!<!DOCTYPE html>
<html lang="en">
<!<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>
<head>
  <meta charset="utf-8">
  <!-- jQuery CDN　読み込み　 -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="java.js"></script>
  <link rel="stylesheet" href="index.css">
  <title>Udemy_jQuery_course</title>

</head>
<body>
  <div class="" id="content">
    <h1>The Complete jQuery course - Project Structure</h1>

    <div class="red-box">èµ¤</div> <!-- 文字化けの部分に「赤」といれている  -->
    <div class="green-box">ç·‘</div>　<!-- 文字化けの部分に「緑」といれている  -->
    <div class="blue-box">é’</div>　<!-- 文字化けの部分に「青」といれている  -->
    <div class="clear">

    </div>

  </div>
</body>
コード

CSS code(fileName: index.css):

.lightbox {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 30%;
  height: 60%
  padding: 15% 35% 25% 35%;
  color: #000000;
  background-color: rgba(200, 100, 0, 0.9);
  text-align: center;
  text-shadow: #333 0 1px 0; }

  .red-box {
    float: left;
    width: 80px;
    height: 80px;
    margin: 10px 10px 10px 0;
    padding: 10px;
    color: rgb(255, 255, 255);
    background-color: rgb(205, 11, 11);  }

    .green-box {
      float: left;
      width: 80px;
      height: 80px;
      margin: 10px 10px 10px 0;
      padding: 10px;
      color: rgb(255, 255, 255);
      background-color: rgb(17, 203, 67);  }


      .blue-box {
        float: left;
        width: 80px;
        height: 80px;
        margin: 10px 10px 10px 0;
        padding: 10px;
        color: rgb(255, 255, 255);
        background-color: rgb(7, 24, 223);  }

コード

JavaScript code(fileName: java.js):

  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 30%;
  height: 60%
  padding: 15% 35% 25% 35%;
  color: #000000;
  background-color: rgba(200, 100, 0, 0.9);
  text-align: center;
  text-shadow: #333 0 1px 0; }

  .red-box {
    float: left;
    width: 80px;
    height: 80px;
    margin: 10px 10px 10px 0;
    padding: 10px;
    color: rgb(255, 255, 255);
    background-color: rgb(205, 11, 11);  }

    .green-box {
      float: left;
      width: 80px;
      height: 80px;
      margin: 10px 10px 10px 0;
      padding: 10px;
      color: rgb(255, 255, 255);
      background-color: rgb(17, 203, 67);  }


      .blue-box {
        float: left;
        width: 80px;
        height: 80px;
        margin: 10px 10px 10px 0;
        padding: 10px;
        color: rgb(255, 255, 255);
        background-color: rgb(7, 24, 223);  }


コード

miyabi_pudding

2019/04/29 23:56

HTMLの文法がメチャクチャになってます。 doctypeは二回宣言されてる上、文法間違ってるし、 html要素は二回出現してる上に、二個目の閉じタグがないし。正しい文法で書き直し、それでも読め込めないなら、引き続き質問を続けられて下さい。

m.ts10806

2019/04/30 00:05

なぜ「CDN読み込めていない」と判断されたのでしょうか。また、なぜjava.jsにCSSが記載されているのでしょうか。

kei344

2019/04/30 02:10

JavaScript のコードも提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のように修正。
JavaScriptファイルをCSSファイルよりも先に読み込むのは
スタイルシートの適用が遅れて良くないためついでに修正したほうが良いです。

html
1<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
2<script src="java.js"></script>
3<link rel="stylesheet" href="index.css">
4↓
5<link rel="stylesheet" href="index.css">
6<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
7<script src="java.js"></script>