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

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

新規登録して質問してみよう
ただいま回答率
85.38%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

5385閲覧

!DOCTYPE html エラーの原因がよく分かりません。

taka_oct092018

総合スコア135

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2023/03/10 14:06

実現したいこと

idx.htmlファイルの<!DOCTYPE html>を削除すれば問題なく作動してくれますが、
doctype宣言を記述するとjQueryが外部のファイルを読み込めなくなってしまいます。
もし、理由をご存知の方がおられましたら教えて下さい。

発生している問題・エラーメッセージ

‘height’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:8:22 ‘width’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:9:22 ‘width’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:14:22 ‘left’ の値をパース中にエラーが発生しました。 このスタイル宣言は無視されました。 style.css:19:22

該当のソースコード

HTML

1<!-- <!DOCTYPE html> --> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>非同期通信サンプル</title> 6<!-- jQuery Core 3.6.3 --> 7<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="crossorigin="anonymous"></script> 8<link href="css/style.css" rel="stylesheet"> 9</head> 10<body> 11 <span id="scrollText"></span> 12 <div id="firstBlock"> 13 高さが800ピクセルの記事<br> 14 <br> 15 ウィンドウの高さ:<span id="winHgt"></span> 16 <br> 17 second_blockの位置:<span id="secondTop"></span> 18 </div> 19 <div id="secondBlock">読み込み中</div> 20 <script src="js/app.js"></script> 21</body> 22</html>

jQuery

1$(function(){ 2 3 const secondOffset = $('#secondBlock').offset(); // second_blockの位置を取得 4 const winHgt = $(window).height(); // ウィンドウの高さを取得 5 6 // ウィンドウの高さを表示 7 $('#winHgt').text(winHgt); 8 9 // second_blockのTOP位置を表示 10 $('#secondTop').text(secondOffset.top); 11 12 // スクロールされたときの処理 13 $(window).scroll(function() { 14 15 // 縦方向のスクロール量を取得 16 const scrollTop = $(window).scrollTop(); 17 18 // スクロール量をスクロール位置に表示 19 $('#scrollText').text(`スクロール量:${ scrollTop }`); 20 $('#scrollText').css({ top : scrollTop }); 21 22 // 条件式:secondBlockが表示されるかどうか 23 Number(winHgt) + Number(scrollTop) > Number(secondOffset.top) 24 25 // 真の場合:ファイルを読み込み表示 26 && $('#secondBlock').load('txt/second_data.txt'); 27 }); 28 29});

CSS

1body { 2 margin : 0; 3 padding : 0; 4} 5 6#firstBlock { 7 background-color : #ffc; 8 height : 800; 9 width : 600; 10} 11 12#secondBlock { 13 background-color : #cfc; 14 width : 600; 15} 16 17#scrollText { 18 background-color : #fcc; 19 left : 600; 20 position : absolute; 21}
designer👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/03/11 01:04 編集

そもそもどこにそのメッセージが出てるのでしょうか 再現する環境含めてご提示ください。
guest

回答1

0

ベストアンサー

pxなりの単位がスタイルに入ってないからと思われます。

DOCTYPEを入れることによって、その仕様が厳密になる、ということかと。
(宣言がなければ、厳密にならずで、pxと判別されるのかと)

投稿2023/03/10 14:14

miyabi_takatsuk

総合スコア9555

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka_oct092018

2023/03/13 07:42

miyabi_takatsuk様、回答ありがとうございます。 >> pxなりの単位がスタイルに入ってないからと思われます。 ご指摘の通りでした。 専門書で勉強した時はそれ程深く考えずに使っておりましたが、 いざ制作となると色々と不具合が生じて、自力では原因があやふやなままでした。 とても助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.38%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問