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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

Q&A

2回答

730閲覧

VScode エディタ内で文字を改行すると開発画面でも改行されてしまう

退会済みユーザー

退会済みユーザー

総合スコア0

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

0グッド

1クリップ

投稿2020/12/12 06:17

前提・実現したいこと

VScodeでWEBサイトを制作している時にエディタ内で文字を改行すると
反映画面でも改行されてしまうので改行されないようにしたい

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

▼エディタ

<p>これは テスト です </p>

▼反映画面
これは
テスト
です

改善後のイメージ

▼エディタ

<p>これは テスト です </p>

▼反映画面
これはテストです

初心者での質問で勝手もわからず大変恐縮ですが
どなたかご存知でしたらご教示願います。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/12/12 06:29

html ソースはどうなっているのですか? 改行すると <br /> が入る設定になっていませんか?
退会済みユーザー

退会済みユーザー

2020/12/14 03:29

ご回答ありがとうございます! ご返信遅くなり申し訳ございません。 そういった設定があるのですね。。 探してみたもののそれ事態がよくわからず。。 引き続きそちらの設定方法調べてみます。
退会済みユーザー

退会済みユーザー

2020/12/14 03:33

> そういった設定があるのですね。。 VS Code は触ったこともないのでそういう設定とか拡張機能などがあるかどうかは自分は分かりません。なので「html ソースはどうなっているのですか?」と書きました。見ましたか?
退会済みユーザー

退会済みユーザー

2020/12/14 03:47

回答の仕方が正しいかわかりませんが、ソース上では<br />にはなっていません。
退会済みユーザー

退会済みユーザー

2020/12/14 03:52

「反映画面」というのは、「エディタ」で作った html ソースを、ブラウザ上で表示した結果と思っていたのですが、違うのですか? 違うのであれな何なのでしょう?
退会済みユーザー

退会済みユーザー

2020/12/14 03:59

「反映画面」というのは、「エディタ」で作った html ソースを、ブラウザ上で表示した結果ということであっています。
退会済みユーザー

退会済みユーザー

2020/12/14 04:15

であれば、html ソースに <br /> がないと改行されないはずですが???
退会済みユーザー

退会済みユーザー

2020/12/14 05:54

文章だけでは話が通じないかもしれないので、「html ソースに <br /> がないと改行されないはず」というのがどういうことか回答欄に画像を貼っておきます。
退会済みユーザー

退会済みユーザー

2020/12/14 06:47

であれば、html ソースに <br /> がないと改行されないはずですが??? >ですので不思議に思い、ご質問させていただいているのですが??? 画像など使用して詳しくご教示いただき誠にありがとうございます。 おっしゃっていることは認識しております。 バイナリのことについては詳しくありませんが。 html ソースが「<p>これは<br />テスト<br />です</p>」となっているとしか考えられないです。 >承知しました。ご回答ありがとうございました。
退会済みユーザー

退会済みユーザー

2020/12/14 06:53

回答に対するコメントは回答のコメント欄に書くようお願いします。
fana

2020/12/15 03:12

htmlはほとんど触れたことないのですが,cssとかいうのでpに関して余計なことを書くとそんなことになったような…?
guest

回答2

0

(もう質問者がいなくなってるし,内容としても全然関係ないかもしれないけれど)
「質問への追記・修正、ベストアンサー選択の依頼」欄に書いた

cssとかいうのでpに関して余計なことを書くとそんなことになったような…?

という微かな記憶について,気になったのでググったら

p { white-space: pre; }

というのが見つかった.
(実際に自身が過去に遭遇したのがこれだったのかは定かではないが…)

html見ても<br>が存在しない場合,
こんなものがどこかに存在している可能性もあるのかも??

投稿2020/12/15 04:18

fana

総合スコア11996

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

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

退会済みユーザー

退会済みユーザー

2020/12/15 05:06

その可能性はありますね。もしくは <p> ... </p> ではなくて <pre> ... </pre> とか。
guest

0

文章だけでは話が通じないかもしれないので、質問のコメントに書いた「html ソースに <br /> がないと改行されないはず」というのがどういうことか画像を貼って説明します。

VS Code は触ったこともないのですが、VS Code は Visual Studio のエディタ機能を抜き出したものということなので、Visual Syudio Community 2019 で html を書いたのが以下の画面です。

Visual Syudio Community 2019 のデフォルト設定では、エディタで Enter キーを押して改行しても自動的に <br /> が入るということはありません(上側のように)。ブラウザの表示で改行したい場合は自分で <br /> とタイプする必要があります(下側のように)。

イメージ説明

これをブラウザに表示すると以下のようになります。

イメージ説明

上の画像の html ソースを表示すると以下のようになります。Visual Studio のエディタの表示と同じです。<br /> がブラウザ上では改行になっているのが分かりますか?(逆に言えば <br /> がないとブラウザでは改行されません)

イメージ説明

下の画像は html ソースをバイナリエディタで見たものです。エディタで Enter キーを押してエディタ上で改行した場合は改行コード 0D 0A (16 進数) となっているのが分かりますか? <br /> は 3C 62 72 20 2F 3E (16 進数) になっています。

イメージ説明

というわけで、質問の「発生している問題・エラーメッセージ」のようになるのは、html ソースが「<p>これは<br />テスト<br />です</p>」となっているとしか考えられないです。

投稿2020/12/14 06:32

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2020/12/14 07:36

であれば、html ソースに <br /> がないと改行されないはずですが??? >ですので不思議に思い、ご質問させていただいているのですが??? 画像など使用して詳しくご教示いただき誠にありがとうございます。 おっしゃっていることは認識しております。 バイナリのことについては詳しくありませんが。 html ソースが「<p>これは<br />テスト<br />です</p>」となっているとしか考えられないです。 >承知しました。ご回答ありがとうございました。
退会済みユーザー

退会済みユーザー

2020/12/14 07:49

> ですので不思議に思い、ご質問させていただいているのですが??? 問題のエディタの編集結果を Edge または Chrome に表示させた画像と、ブラウザに html ソースを表示させて(ブラウザの画面を右クリックして出てきたメニューの「ページのソース表示」を選択)その画像を質問欄を編集して貼っていただけませんか?
退会済みユーザー

退会済みユーザー

2020/12/14 07:51

> は相手の文章を引用する場合に使うもので、自分のレスの頭に付けるものではありませんのでご注意を。
退会済みユーザー

退会済みユーザー

2020/12/14 14:14 編集

それは今回の質問とは関係ないかと思いますが、ご指摘ありがとうございます。 終始威圧的なコメントに初心者は心が折れそうなのでもうコメントは結構です。 ありがとうございました。
退会済みユーザー

退会済みユーザー

2020/12/15 02:38

ゆとり教育の成果(?)かな?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問