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

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

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

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

Q&A

解決済

2回答

1406閲覧

atomで作成したhtmlをFinderからChromeに移したところ、<p></p>内の文字が画面を拡張させて改行されない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

0グッド

0クリップ

投稿2018/07/13 11:17

atomは1.28.1でHTML5だと思います。

プログラミング学習サイトで勉強しています。

これまでにやったこと
以前作ったのhtmlを今作業しているページにコピペしました。→改行しました
大文字、小文字の確認をしました。→ミスはなかったと思います。
atom、Chromeをそれぞれ終了させました。→改善されず。

atom内

イメージ説明

Hello!が画面を拡張させてしまっています
イメージ説明

サイト内の動画です
イメージ説明
イメージ説明

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

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

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

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

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

m.ts10806

2018/07/13 11:39

コードは画面ではなく、実際のコードをテキストで提示いただけますか?コードがコピペできませんので、再現確認がとれません。
退会済みユーザー

退会済みユーザー

2018/07/13 12:19

すいません!追加しました!よろしくお願いします!
退会済みユーザー

退会済みユーザー

2018/07/13 12:21

mtsさんのやり方で直りました!ありがとうございました!
m.ts10806

2018/07/13 12:22

質問編集できていませんよ。
guest

回答2

0

ベストアンサー

1つ前提ですが、「連続する半角文字列」は1単語として解釈されます

「サイト内の動画」にあるソースは画像を見た感じ、それぞれのHello! の間に半角スペースが入っていますよね。
そのため、1単語が短く解釈されて端っこで改行されています。
(正確には行はかわっていなくて**「折り返し」**です)

実際の英文では「-」で「折り返しても同じ単語だよ」と表現しますが、
html上はそういう単語とかどうとかいう概念はタグやscriptコード以外にはないので、
「単なる文字列の連続」→「1単語」として解釈されます。

例えばこんな感じ
※適当に打ってるので画面表示上ちょっと変わってます。

html

1<body style="width:100px;"> 2<p>qwerty1234567890^\!"#$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p> 3</body>

イメージ説明

概念的には1単語なので何もしなければ勝手に折り返しません。
CSSなどで指定する方法はあります。
それも「よろしく折り返す」か「指定した幅で折り返す」かで指定の仕方も違ってきますので、
その辺りは調べてみてください。

追記(というか蛇足)

蛇足なので参考まで。

ちなみに、検証がてら色々と試してみましたが、半角ハイフン[-]を入れると、英数字をつなぐ箇所に限り、
英単語の折り返し連結と同じくそこで折り返します。(ある程度法則はあり)

最初のほうに入れる

html

1<body style="width:100px;"> 2<p>q-werty1234567890^\!"#$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p> 3</body>

イメージ説明

英数字がある記号の前

html

1<body style="width:100px;"> 2<p>qwerty1234567890-^\!"#$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p> 3</body>

イメージ説明

記号の中

html

1<body style="width:100px;"> 2<p>qwerty1234567890^\!"#-$%&'()=~|asdfghjkl;:]zxcvbnm,./`+><?_*}{</p> 3</body>

イメージ説明

途中の英数字の中

html

1<body style="width:100px;"> 2<p>qwerty1234567890^\!"#$%&'()=~|asdfg-hjkl;:]zxcvbnm,./`+><?_*}{</p> 3</body>

イメージ説明

複数入れる

html

1<body style="width:100px;"> 2<p>qwe-rty123-4567890^\!"#$%&'()=~|asdfg-hjkl;:]zxc-vbnm,./`+><?_*}{</p> 3</body>

イメージ説明

いずれにしても「これ全部で1単語」の意味となり、bodyに指定したwidthは無視されますね。

投稿2018/07/13 11:53

編集2018/07/13 12:28
m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2018/07/13 12:22

おかげさまで直りました! ありがとうございました!!!
m.ts10806

2018/07/13 12:25

大元は「書き写しているつもりで実はコピペしてない」というところが原因ですしね。 蛇足に追記ですが?とかも折り返し効果はあるようです。 文章組む際に知っておいて損はないですね。
退会済みユーザー

退会済みユーザー

2018/07/13 12:36

いろいろ調べて頂きありがとうございます。 このレッスンで英語を使ったのは初めてだったので、半角スペースを開けて、単語としてコンピュータに理解させることを忘れていました。 -で折り返せるんですね! チャンスがあれば使って見ます!
guest

0

mtsさんの回答をベストアンサーにしたつもりが、下の自己解決方法がベストアンサーになっているようです。

同じ問題でお困りの方はmtsさんの回答をご覧下さい。

mtsさんのおっしゃる通り、連続した文字列だと単語と解釈されて、画面を拡張させて収めてしまいます。CSSからwidthの設定などをして防げることらしいですが、コンピュータに「一単語だよ」と理解してもらう為に半角スペースを開けることを意識するとイイです!

投稿2018/07/13 12:27

編集2018/07/14 03:10
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

m.ts10806

2018/07/13 12:35 編集

それだと私の回答を復唱しているだけなので「ベストアンサー」としてはどうなんだろう?という疑問が残ります。 だって、「CSSからwidthの設定などをして防げることらしい」って実際に試されたわけじゃないですよね?そのコードもありませんし。 いずれにしても回答した身としてあまりいい気分はしませんね。 選ぶのは質問者さんなので、こだわるとかではありませんが、 「ベストアンサーとは?」下記ヘルプを読んで一度考えてみては。 https://teratail.com/help/question-tips#questionTips4
退会済みユーザー

退会済みユーザー

2018/07/14 03:19

大変嫌な思いをさせてしまい、申し訳ありません。 mstさんの回答をベストアンサーにしたつもりが、私の至らなさで自己解決方法をベストアンサーになっていたみたいです。 今回の質問については、必ず、mtsさんの回答をベストアンサーにしたいと考えています。 まず、『未解決』にしてベストアンサーをmtsさんにさせて頂きました。 mtsさんの回答がベストアンサーになっているか、確認して頂けると幸いです。
m.ts10806

2018/07/14 04:07

変に責め立てた形となってしまい申し訳ありませんでした。 お互いの善意で成り立っている場なので、お互い気持ちよく、スムーズに問題を解決していきたいですね。
退会済みユーザー

退会済みユーザー

2018/07/14 04:12

mtsさんの回答は大変わかりやすく、補足も付けてくれて嬉しい気持ちになりました。 ベストアンサーについても今教えて頂き大変助かりました。 指摘されないままだと同じようなミスを繰り返していたかもしれないので、、 今回はありがとうございました。
m.ts10806

2018/07/14 04:17

今回私がしたような検証を他のことでもやるような癖をつけておくと問題解決までのプロセスもスムーズになるのでぜひ参考にしてください。
退会済みユーザー

退会済みユーザー

2018/07/14 04:20

はい! 参考にします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問