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

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

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

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

HTML5

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

Python

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

HTML

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

Q&A

解決済

3回答

1126閲覧

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

keito

総合スコア8

Django

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

HTML5

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

Python

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

HTML

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

0グッド

0クリップ

投稿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>

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

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

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

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

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

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

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

回答3

0

ベストアンサー

原因

質問記載のコードをブラウザで立ち上げてデベロッパーツールの「要素(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
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

keito

2022/10/23 07:59

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

0

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

投稿2022/10/23 07:52

a.com

総合スコア871

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

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

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

総合スコア80850

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

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

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問