質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.63%

自作サイトのバリデーションの結果がよく分かりません。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 403

taka_oct092018

score 17

https://practice2017.web.fc2.com/root_jan312020/idx.html
自作のサイト

Unicorn - W3C 統合検証サービス
https://validator.w3.org/unicorn/?ucn_lang=ja
上記のサイトで自作サイトを検証してみました。

入力欄にURLを記入してみると、下記のような結果になりました。
https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Fpractice2017.web.fc2.com%2Froot_jan312020%2Fidx.html&ucn_lang=ja&ucn_task=conformance#

(HTML)
「125 ここまで↑ --> <script type="text/javascript"><!-- v The “type” attribute is unnecessary for JavaScript resources.」の
メッセージは全く意味が分かりません。
FC2ホームページの仕組みによる影響かもしれません。

(CSS)
css変数が全てエラー扱いされてしまいました。
こちらも理由が不明です。

解決方法を教えて頂けないでしょうか。
よろしくお願い致します。

【追記】
https://practice2017.web.fc2.com/original_juice/root/idx.html 
アドレスを変更しました。

【追記】
HTMLファイルに編集を施しました。
https://practice2017.web.fc2.com/original_juice/root/idx.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オリジナルジュースの紹介|架空株式会社</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0"><!-- Google Fonts Montserrat -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="fontawesome/css/all.css" rel="stylesheet"><!-- fontawesome ver5.10.2 -->
<script src="https://kit.fontawesome.com/abda8f59ff.js"></script><!-- fontawesome ver5.3.0 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="idx"><!-- 【.idx】 ここから↓ -->
<header class="hdr"><!-- 【ヘッダー】 ここから↓ -->
  <section class="cont-01">
    <h1>オリジナル<i class="fas fa-leaf"></i>ジュース</h1>
    <p>おいしい うれしい</p>
    <div class="outer-01">
      <div class="wrap-01">
        <div class="inner-01">
          <h2>オリジナル<i class="fas fa-leaf"></i>ジュース</h2>
          <div class="wrap-02">
            <img class="thumb-01" alt="">
            <ul class="ul-01">
              <li class="list-01"><span class="txt-blk">肌荒れ</span></li>
              <li class="list-01"><span class="txt-blk">便秘</span></li>
              <li class="list-01"><span class="txt-blk">不眠症に</span></li>
            </ul><!-- /.ul-01 -->
          </div><!-- /.wrap-02 -->
        </div><!-- /.inner-01 -->
      </div><!-- /.wrap-01 -->
      <div class="bg-top-01">
      </div>
    </div><!-- /.outer-01 -->
  </section><!-- /.cont-01 -->
  <nav class="nav-hdr"><!-- 【ヘッダーのナビゲーションメニュー】 -->
    <ul>
      <li class="li-hdr"><a href="idx.html">製品情報</a></li>
      <li class="li-hdr"><a href=".html">CMギャラリー</a></li>
      <li class="li-hdr"><a href=".html">キャンペーン</a></li>
      <li class="li-hdr"><a href=".html">Q&A</a></li>
    </ul>
  </nav><!-- 【ヘッダーのナビゲーションメニュー】 ここまで↑ -->
</header><!-- 【ヘッダー】 ここまで↑ -->

<div class="wrap-boxes">
  <div class="wrap-col-01">
    <section class="box-01"><!-- 【.box-01】 ここから↓ -->
      <div class="ctr-01"><!-- 【.ctr-01】 ここから↓ -->
        <h2><i class="icon-01 fas fa-wine-glass-alt"></i>スムージーみたいな飲み心地</h2>
        <div class="inner-02">
          <p>当社独自の製法で、スムージーみたいな飲み心地を実現しました。癖が少なくさらっと飲めるジュースになっております。</p>
          <i class="icon-02 fas fa-glass-whiskey"></i>
        </div>
      </div><!-- 【.ctr-01】 ここまで↑ --> 
    </section><!-- 【.box-01】 ここまで↑ --> 

    <section class="box-02"><!-- 【.box-02】 ここから↓ -->
      <div class="ctr-02"><!-- 【.ctr-02】 ここから↓ -->
        <h2><i class="icon-01 fas fa-poo"></i>便秘予防に</h2>
        <div class="inner-02">
          <p>白菜5この食物繊維を含んだオリジナルジュースなら、便秘の予防にも効果的です。</p>
          <i class="icon-02 fas fa-apple-alt"></i>
        </div><!-- .inner-02 ここまで↑ -->
      </div><!-- 【.ctr-02】 ここまで↑ --> 
    </section><!-- 【.box-02】 ここまで↑ --> 

    <section class="box-03"><!-- 【.box-03】 ここから↓ -->
      <div class="ctr-03"><!-- 【.ctr-03】 ここから↓ -->
        <h2><i class="icon-01 far fa-grin-wink"></i>手間いらずで毎日続けられる</h2>
        <div class="inner-02">
          <p>粉末を溶かすタイプだけでなく、そのまま飲めるペットボトルタイプもご用意しております。</p>
          <i class="icon-02 fab fa-pagelines"></i>
        </div><!-- .inner-02 ここまで↑ -->
      </div><!-- 【.ctr-03】 ここまで↑ --> 
    </section><!-- 【.box-03】 ここまで↑ --> 
  </div><!-- /.wrap-col-01 -->

  <div class="wrap-col-02">
    <section class="box-04"><!-- 【.box-04】 ここから↓ -->
      <div class="ctr-04"><!-- 【.ctr-04】 ここから↓ -->
        <h2><i class="icon-01 far fa-star"></i>肌荒れ予防に</h2>
        <div class="inner-02">
          <p>ビタミンCやβカロチンなど、不足しがちな美容に良い成分をたっぷり配合しています。</p>
          <i class="icon-02 fas fa-child"></i>
        </div><!-- .inner-02 ここまで↑ -->
      </div><!-- 【.ctr-04】 ここまで↑ --> 
    </section><!-- 【.box-04】 ここまで↑ --> 

    <section class="box-05"><!-- 【.box-05】 ここから↓ -->
      <div class="ctr-05"><!-- 【.ctr-05】 ここから↓ -->
        <h2><i class="icon-01 far fa-sad-tear"></i>不眠症に</h2>
        <div class="inner-02">
          <p>不眠症の改善に効果があると言われているメラトニンも豊富に含んでいる原料を使用しています。</p>
          <i class="icon-02 fas fa-bed"></i>
        </div><!-- .inner-02 ここまで↑ -->
      </div><!-- 【.ctr-05】 ここまで↑ --> 
    </section><!-- 【.box-05】 ここまで↑ --> 

    <section class="box-06"><!-- 【.box-06】 ここから↓ -->
      <div class="ctr-06"><!-- 【.ctr-06】 ここから↓ -->
        <h2><i class="icon-01 fas fa-yen-sign"></i>一杯あたり84円</h2>
        <div class="inner-02">
          <p> オリジナルジュースは一杯あたり84円のお手頃価格。家計にやさしく無理なく続けられます。</p>
          <i class="icon-02 fas fa-wallet"></i>
        </div><!-- .inner-02 ここまで↑ -->
      </div><!-- 【.ctr-06】 ここまで↑ --> 
    </section><!-- 【.box-06】 ここまで↑ --> 
  </div><!-- /.wrap-col-02 -->
</div><!-- /.wrap-boxes -->

<footer class="ftr"><!-- 【フッター】 ここから↓ -->
  <nav class="nav-ftr">
    <ul>
      <li><a href="#">会社情報</a></li>
      <li><a href="#">利⽤規約</a></li>
      <li><a href="#">プライバシーポリシー</a></li>
      <li><a href="#">サイトマップ</a></li>
    </ul>
  </nav><!-- /.nav-ftr -->

  <div class="copyright"><!-- 【コピーライト】 -->
    Copyright (C) 2019 オリジナルジュース All Rights Reserved.
  </div><!-- 【コピーライト】 ここまで↑ -->
</footer><!-- 【フッター】 ここまで↑ -->
</body><!-- 【.idx】 ここまで↑ -->
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2020/02/12 17:24

    「指定された文書は存在しません。」となりました。
    アドレスはあってますか?

    キャンセル

  • taka_oct092018

    2020/02/12 17:48

    アドレスを変更しました。

    キャンセル

  • x_x

    2020/02/14 18:30

    結果の意味が分かっていないと思って回答したのですが、そうではなく「info さえ出したくない」という目的なのですか?
    HTML5 で検証する以上、FC2 で自動挿入されるのであれば避けられないことなのでは?(検証サービス側の設定で出ないようにできるかもしれませんが)

    キャンセル

  • taka_oct092018

    2020/02/14 20:46

    x_x様
    返信ありがとうございます。

    結果の意味が分かっていません。
    「info」についてもよく分かりませんが、私のコード自体に問題がなければそれで構いません。
    自動挿入に関しても単なる私の推測です。

    キャンセル

回答 2

checkベストアンサー

0

すみません、Unicornは使ったことがないのですが、

CSSと組み合わせたHTML文書、もしくはCSS単体の文書

とかいてあるのでCSS用ですかね?
htmlだけでしたら↓こちらで可能です。
https://validator.w3.org/

The “type” attribute is unnecessary for JavaScript resources

上記のエラーは検索すると以下のような記事がでてきますね。scriptタグにtypeをつけていることが原因で出るエラーみたいですね。

CSS や JavaScript を読み込むときのタグに type attribute は HTML5 では不要、というか非推奨とのこと。
https://ohbarye.hatenablog.jp/entry/2017/06/28/222517

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/14 18:10

    返信ありがとうございます。

    ファイルを編集して再度検証してみました。

    エラーメッセージ 『Error: Element img is missing required attribute src.』
    <img>のsrc属性は変更するとレイアウトが大幅に崩れてしまうので、今回は修正を諦めました。
    今後は<img>にsrcを記述します。


    エラーメッセージ 『Warning: The type attribute is unnecessary for JavaScript resources.
    From line 126, column 1; to line 126, column 31』

    162行目に警告と、ありますが、そこにjavascriptは何も記述していません。
    私が利用しているFC2ホームページでは「Powered by FC2ホームページ」の
    文節が画面下に自動的に挿入されるので、それが影響しているのかもしれません。

    キャンセル

0

HTML5 から type 属性は必須ではなくなっていて、"text/javascript" だから省略せよというメッセージです。これは info になっていて、エラーでも警告でもないものです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types

カスタムプロパティについては、いろいろ試してみましたが対応していないように見えます。
https://github.com/w3c/css-validator/issues/111

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる