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

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

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

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

Q&A

4回答

13006閲覧

HTMLが上手くブラウザに表示されない。

Notstudylife

総合スコア12

HTML

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

0グッド

0クリップ

投稿2019/04/27 22:32

編集2019/04/27 23:06

イメージ説明
ドットインストールでHTMLの学習をしているのですが、ブラウザに上手く表示できません。何故でしょうか?

Windows10
Chrome

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

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

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

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

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

raccy

2019/04/27 22:58 編集

うまくいかないというHTMLの「全てのコード」と「何」が「どう」うまく表示できなのか質問文に追記してください。例えば「このAの部分は『太字』似なるはずなのに『斜体』で表示されています」と言う風にです。また、環境やブラウザについての情報、つまり、OS名とブラウザ名とそれぞれのバージョンも質問文に追記してください。質問は「編集」ボタンからいつでも編集できます。 具体的な情報が無いと「HTMLに関する技術力があなたにまだ身に付いていないから。書籍等でもっと勉強してください」以外の回答ができません。
Notstudylife

2019/04/27 23:00

スクリーンショットを撮ったので画像の貼り方を教えていただけませんか?
Notstudylife

2019/04/27 23:06

すみません。できました。ご教授よろしくお願い致します。
kei344

2019/04/28 02:09

コードはスクリーンショットだけでなくコードブロックにテキストでお書きください。コードブロックは ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答4

0

画像から見て取れる問題点は以下の通りです。

  • HTMLが完結していない

他の回答者様が提示されている通り、HTMLに必要なタグが不足しています。

  • ファイルの拡張子が違う

<img src= ... などのコードを書いたファイルを、 .html という拡張子で保存してください。
画像を見る限り、フォルダ名が index.html になっており、ファイル名は program (拡張子なし)となっています。フォルダはどのような名前でも良いので、 program というファイルの名前を index.html にしてみてください。

  • 画像のパスが違う

上二つの対応で一応はHTMLページとして閲覧できるようになると思いますが、コードの画像のパスが誤っているので、意図した画像は表示されないと思います。
<img src="...">...の部分には画像のパスを指定してください。上記の例だと、img/taro.png ではなく、 programing/taro.png とするのが適切かと思います。

投稿2019/04/28 04:38

R.Mizukami

総合スコア1086

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

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

0

ソースがないのでなんとも言えませんが、いかのことが考えられます。
・誤字、脱字
・全角で書いている
・拡張子が違う
・文字コードが違う

投稿2019/04/27 23:02

akinoatuyaki

総合スコア16

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

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

Notstudylife

2019/04/27 23:06

画像載せました。ご教授よろしくお願い致します
akinoatuyaki

2019/04/27 23:18

<html> <body> <img src="img/taro.png"> <h1>山田太郎</h1> <p>UI/UXデザイナー見習いです</p> </body> </html> このようにすればいいと思います
guest

0

文字コードを指定する前はascii扱いが正しい解釈です。
(IEはSJISがあると勝手に日本語表示したりします)

IE以外のブラウザで表示するとおかしくなるべきです。

日本語を記述する前に文字コードを指定してください

投稿2019/04/29 11:25

sage

総合スコア1216

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

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

0

上記回答と重複しますが <html>書かないとただの文字列になってしまいます。。

<html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/xxxx.css"> <body> <img src="img/taro.png"> <h1>山田太郎</h1> <p>UI/UXデザイナー見習いです</p> </body> </html>

投稿2019/04/29 09:57

wataame

総合スコア302

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

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

liveasnotes

2019/04/29 15:43 編集

正しいやり方ではありませんが,ブラウザは賢いので,拡張子が「html」であるファイルについては,htmlタグ等がなくてもマークアップされている部分を正しくレンダリングすることができます. 試しに,「<h1>title</h1>」とだけ書いたテキストファイルの拡張子を「html」に書き換えて,ブラウザで表示してみてください. cf. [HTML5 で省略できるタグ | Qiita | @labocho]( https://qiita.com/labocho/items/54fd70c73ced35c8ba49 )
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問