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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

デベロッパーツールがおかしい

keito
keito

総合スコア8

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3回答

0グッド

0クリップ

581閲覧

投稿2022/10/23 07:00

編集2022/10/23 07:31

質問

一枚目の画像がGoogleのデベロッパーツールのElementsのもので、二枚目がSourcesのものなのですが、なぜこのようなことが起きるのでしょうか?
djangoのターミナルでサーバーを作ってもエラー当は出ず実際サイトにアクセスしてもエラー出ないので、もしかしたらHTML側に問題があるのでは?と初心者ながらに無い知恵を振り絞ったのですがどう解決できるでしょうか?
初心者ですので何かこれがないとわからないというものがありましたら質問お願いします。
イメージ説明

イメージ説明

追記:実際に書いたHTMLのコード <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>{{title}}<title> </head> <body> <div class="header"> <h1>{{title}}</h1> <a href="http://127.0.0.1:8000/App1">ホーム</a> <a href="http://127.0.0.1:8000/App1/about">自己紹介</a> </div> <p>{{message|safe}}</p> <form action="{ % url 'index' %}" method=post> {{form}} <input type="submit" value="送信"> </form> </body> </html>

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

2022/10/23 07:25依頼された後にこの質問は修正されています

こちらの質問が複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

m.ts10806

2022/10/23 07:09

どいうところが「おかしい」と思っているのでしょうか。
keito

2022/10/23 07:11

実際にかいたコードが何故反映されずElementsのように<body>からは何も書かれてないことになっているのがおかしいなと思って投稿させていただきました。
m.ts10806

2022/10/23 07:15

Sourcesのほうに{}などテンプレートエンジンのコードそのまま出ているのが気になります。 どのように動作確認しているのでしょう。
keito

2022/10/23 07:17

djangoを使ってviews.pyのほうで{{}}にかかれた値を送ってやってます。
keito

2022/10/23 07:17

画像など追記したほうがよろしいでしょうか?
m.ts10806

2022/10/23 07:20

Sourcesにそのまま出るということはDjangoのほうで正しくコンパイルされていないとも言えます。
m.ts10806

2022/10/23 07:20

画像よりコードを。手元でコピペで再現できる必要があります。 既に「現状での推測」は回答として投稿しましたが。
keito

2022/10/23 07:23

質問の編集でコードの追記画像を添付したほうがよろしいかと思ってました
m.ts10806

2022/10/23 07:25

何の画像か分かりませんが、画像ではコードのコピペが出来ないので、 コードはテキストで、マークダウンのcode機能で提示してください。 ただ、本質的には1つの前の質問と目的は同じですね。
keito

2022/10/23 07:29

実際にSpyderというテキストツールで書いたHTMLのコードもあるのですが、それはデベロッパーツールのSourcesと若干異なってます。
keito

2022/10/23 07:32

編集で追記しましたので見てくださると幸いです。

回答3

1

ベストアンサー

原因

質問記載のコードをブラウザで立ち上げてデベロッパーツールの「要素(elements)」タブを確認

<title> の終了タグ(</title>)が 開始タグと同じ <title>(頭にスラッシュなし)になっているため、 以降が title 要素として解釈されています。

イメージ説明
(デベロッパーツールの「要素」タブに表示されている、</head>直前の「</title>」 は、ブラウザによって自動的に挿入されたものと考えられます)

解決策

html

1 <title>{{title}}<title> 2


この行を下記のように直してください。

html

1 <title>{{title}}</title>

投稿2022/10/23 07:52

編集2022/10/23 10:47
qnoir

総合スコア7910

meg_👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

keito

2022/10/23 07:59

解決できました、ありがとうございます、、、まったく気づきませんでした、、、

0

タイトルタグが閉じられないからです。

投稿2022/10/23 07:52

a.com

総合スコア768

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

0

Sourcesのほうを見た感じだと<table>も何もないのに<tr>があります。
それによって「body内に表示するものがない」と判断されているのではないでしょうか。
HTML文法が間違っている箇所をChrome側が自動で精査してくれてそうなってるのかなと。

例えばbody内を以下のようにした場合

HTML

1aaa 2<tr><td>bbb</td></tr> 3<button>button</button>

Elementsでは<tr><td>部分が消えます。
全く同じソースではなく、バージョンやOSも違うかもしれないので全く同じ状況再現にはならないかもしれませんが、
HTMLが正しくないことでElementsに出ないというのはあり得る話です。
(もちろん、JavaScriptなど要素を操作するときはがっつり影響出ます)

投稿2022/10/23 07:19

編集2022/10/23 07:23
m.ts10806

総合スコア80038

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

keito

2022/10/23 07:34

追記したコードでは<table><tr><td>タグを使ってないのですが、どうしてSourcesではあるのでしょうか?
m.ts10806

2022/10/23 07:35

Djangoの仕様を知らないので何とも言えませんが、 {{form}}が出力している情報がそうなってるのではと。 まずは正しいHTMLタグが出るように設定など見直されてはどうでしょう。
keito

2022/10/23 07:38

わかりました、見直してみます。お力添えいただいてありがとうございます。
keito

2022/10/23 07:52

ありがとうございます
m.ts10806

2022/10/23 09:09

少し角度を変えると、結局プログラムは書いた通りにしか動かないので、 既存のツールを疑うのではなく自分のコードを疑いましょう・・・・というところです。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。