BootstrapのHello worldが出力できない。。。

前提・実現したいこと

bootstrapのベーシックテンプレートを出力したい

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

bootstrap１日目です。

パッケージをダウンロードしテンプレートをコピーしてTextEditに貼り付けてHTMLほぞんして、
ブラウザにドラッグして開くと、添付の画像のように書いたコードがそのまま表示されてしまいます。
Hello world！がヘッダーになった形で出力されるにはどうしたらいいですか？
ファイルは.htmlで保存しています。画像を添付しています。


<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Sample</title>

    <!-- BootstrapのCSS読み込み -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery読み込み -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- BootstrapのJS読み込み -->

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

    <h1>Hello, world!</h1>

  </body>

</html>



### 試したこと

ダウンロードがうまくいっていないのかなと思いCDNを利用してbootstrapを導入しようとしましたが、同じく書いたコードがそのまま表示されてしまいました。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

ベストアンサー

ファイル拡張子が.htmlではないのでは。

ちなみに拡張子.htmlで提示したコードコピペだとこうなります。

Bootstrap適用したらこう

.htmlでブラウザにドロップしたのでしたら「書いたコードがそのまま表示される」ということはありません。

間違ってそのテキストエディタで開いているか、
ファイル拡張子が正しくないか、どちらかです（全角混じってもダメです）

投稿2020/05/03 02:02

編集2020/05/03 02:30

m.ts10806

総合スコア80861

travela52887899

2020/05/03 02:04

早速回答ありがとうございます。ファイルは.htmlで保存しています

m.ts10806

2020/05/03 02:06

具体的なファイル名をコピペで提示してください。また、head内のlinkとscriptの記述を削除するとどうなりますか？

travela52887899

2020/05/03 02:57

ファイルの情報をみたところ General: HTML text Name& Extension: index_jp.html Open with: Google Chrome となっています。ファイルのアイコンもChromのえがついてるのでhtmlで保存されているのかなと思うのですが。

m.ts10806

2020/05/03 03:19

うーん。再現しないことにはなんとも。ファイル作りなおしてみてください。

travela52887899

2020/05/03 03:21

linkとscriptを削除しましたが、書いたコードがそのまま表示されてしまいます。ブラウザのアドレスバーには file:///Users/XXX/Documents/cordingpractice/bootstrap-4.4.1-dist/index2.html と表示されています。XXXは私の名前なので置き換えてます。以下が表示された内容です <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> </head> <body> <h1>Hello, world!</h1> </body> </html>

m.ts10806

2020/05/03 03:23

画面キャプチャご提示ください。

travela52887899

2020/05/03 03:29

画像キャプチャはどうやったらpastできますか？このサイト今さっき登録したので使い方がまだわかっていません

m.ts10806

2020/05/03 03:31

既に画像取れてるなら、マークダウンの機能ボタンの左から6番目のボタン（画像）クリックして選択するだけです。他の機能についても https://teratail.com/help/question-tips#questionTips3-3-1 の「アドバイス」の欄参照。

travela52887899

2020/05/03 03:45

ありがとうございます。ここの回答にはつけられませんでしたが、上に画像を貼り付けました。一つ目が、ブラウザにドロップオフした時の画像、二つ目がテンプレをTextEditにコピペしてhtmlで保存した時の画像です。

m.ts10806

2020/05/03 03:46

どう見てもブラウザではなく、テキストエディタそのまま開いてるようにしか見えません。

m.ts10806

2020/05/03 03:46 編集

コメント欄ではマークダウン使えません。質問に追記してください。

退会済みユーザー

2020/05/03 03:52

ツーか他のブラウザ使ったときどーなる？

travela52887899

2020/05/03 03:54

firefox safariを試しましたが、同じ結果になります。コンピューターを再起動させましたが解決しません。。。

m.ts10806

2020/05/03 04:11

BootStrapは関係なさそうなので、普通にHTMLが表示できるか、から確認してください。

退会済みユーザー

2020/05/03 04:12

とりあえず、質問者さんは、拡張子を表示する設定でPC使っているのかね？？？

travela52887899

2020/05/03 04:31

保存したファイルの詳細の画像を質問に天武しました。種類がHTMLになっていると思うのですが。。

m.ts10806

2020/05/03 04:34

念のため、「テキストエディット」以外で作ってみては。フリーのテキストエディタでもいいですし、IDEでもいいですし。

退会済みユーザー

2020/05/03 04:36

あーー、もしかしてセキュリティソフトが余計なことしてるかも。

m.ts10806

2020/05/03 04:36

それはあるかもしれないですね。

travela52887899

2020/05/03 04:40

あり得そうですが。。。どうしたらいいでしょうか？ HTMLファイルの作成の仕方を調べて、勉強してきました。そのとうりにHTMLファイルを作成し、ブラウザにドロップオフしましたが、やはりコードがそのまま表示されるだけです。

退会済みユーザー

2020/05/03 04:42

どうしたらって言われても、あなたのPCにセキュリティソフトが入っているのかどうかも知らんし、

m.ts10806

2020/05/03 04:43

下記も確認してみてください。 https://q.hatena.ne.jp/1348806238 ※当方Macユーザでないため検証できません

travela52887899

2020/05/03 04:59

できたーーーー!!! Hello wold! ヘッダーで表示できました！やばいめっちゃうれしい！！ Macの場合、TextEditでHTMLファイルを作る場合はデフォルトのリッチテキストからプレーンテキストに変えて（TextEditのフォーマットタブから選択） .htmlで保存する必要があるんですね！ 12時間以上悪戦苦闘して(m.ts10806さんが添付してくださったサイトは見つけられませんでした。。）、この質問サイトにたどり着いて、質問したらすぐにレスもらえて、それでもなかなかうまくいかなかったですが、ずっと粘って付き合ってくださってありがとうございました。今日が１日目で、これできなかったら挫折でしたが、明日につながりました。本当にありがとうございます！！

m.ts10806

2020/05/03 11:35

Windowsのメモ帳然り、OS標準のツールはプログラミングに向かないと思います。 13:34 に書いたように、プログラミングのためのエディタ、できればIDEを入れてください。今回のような浪費は勿体ないです。

travela52887899

2020/05/03 18:30

Jupyter NotebookでPython3を勉強していて、 Jupyter Notebookでは質問したコードはヘッダーで表示できていたのですが、これをhtmlで表示させたくて、書いたコードをTexiteditにコピペして.htmlで保存したところでつまずきました。 Jupyter Notebookではノートの中に出力結果が出てくるのですが、それをwebページみたいに見れないのかなと思ってやってみました。 Jupyter Notebookに書いたコードをがそのままwebページで反映されるようにするにはどうしたらいいのでしょうか？

travela52887899

2020/05/03 20:15

あ！ Jupyter Notebookで保存じゃなくてdownload にして.htmlでダウンロードすれば Jupyter Notebookから.htmlファイルが作れました。これを開けば、いちいち Jupyter Notebookで書いたコードをTextEditerにコピペしてhtmlファイルを作る必要がなくなりますね！勉強になります！

m.ts10806

2020/05/03 22:59

プログラミングのためのエディタ、できればIDEを入れてください。

travela52887899

2020/05/03 23:24

JupyterはPythonようのIDEではないのですか？

m.ts10806

2020/05/03 23:29

使ったことないですけど、わざわざダウンロードしなければhtmlの挙動確認できないのであれば、手間が増えるだけです。中にはブラウザ機能持ってリアルタイムで修正した内容を確認できるものもあるので。はじめからエディタ(TextEdit以外)で作成、更新してブラウザリロードしたほうがマシです。

travela52887899

2020/05/04 01:04

確かにいちいちダウンロードして、動作確認ていうのはめんどく臭いですね。