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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2140閲覧

boxでの文章の改行位置が異なるのはなぜか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/03 14:15

編集2018/02/04 04:48

私の作業場では、ホームページを丸々そっくりに作るという訓練をしています。
なので、文の改行位置も合わせることをしなければなりません。一応、指示者に改行位置を正確に合わせることは無駄だと言いましたが、聞き入れてくれませんでした。
家に持って帰って作業することやそのコードを公開することを指示者から禁止されています。
そういうわけで詳しいコードを貼ることができません

ただ、大まかなレイアウトの崩れであれば、家に帰って記憶を思い出して、コードを打つことも可能ですが、細かい改行位置までは記憶できません。

問題なのはflexで横並びした文の1行目に改行を合わせると1文字分前で違う行が切れます。
例えば、2番目のpタグの幅を任意指定した時に、
CSS

div{ display:flex; } div p+p[ width:〇〇px; }

HTML

<div> <img src="images/web.jpg" /> <div> <p>あいうえお</p> <p>あいうえおかきくけこさしすせそたちつてとはひふへほまみむめもらりるれろわおんあいうえおかきくけこさしすせそたちつてとはひふへほまみむめもらりるれろわおん </p> </div> </div>

あいうえお
あいうえおかきくけこさしすせそたちつて
とはひふへほまみむめもらりるれろわおん
あいうえおかきくけこさしすせそたちつ
てとはひふへほまみむめもらりるれろわおん

こういう感じで1行目が「て」できれるように幅を合わせると3行目の最後が「て」にならず「つ」できれることです。

逆に3行目を「て」できれるように幅を合わせると1行目の最後が「は」まで入るようになります。

あいうえお
あいうえおかきくけこさしすせそたちつてとは
ひふへほまみむめもらりるれろわおん
あいうえおかきくけこさしすせそたちつて
とはひふへほまみむめもらりるれろわおん

これは何が原因で起こるのでしょうか?
やはり同じ条件でコードを打ってみないと分からないでしょうか?
やってみたこと
見本の横並びがfloatで作られいるかと思い、floatとflexのboxで文章の改行される位置が違うかと思いコードを書いてみましたがダメでした。
Google検索でfloatとflexの文字の改行位置と調べてみましたがやはりこれもダメでした。

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

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

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

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

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

guest

回答3

0

ベストアンサー

Google検索でfloatとflexの文字の改行位置と調べてみましたがやはりこれもダメでした。

問題の原因はそこではありません.

CSSにおけるwidth値が(文字数ではなく)レイアウト時の幅を表すからです.

そもそも「文字」をスクリーンに表示する際に必要となる「フォント」は「文字の形」(これをグリフと呼びます)の集まりであり, 個々のグリフは固有の幅をもっています. この文字幅の情報をもとにWEBブラウザは(width値を超えないように)スクリーンに文字列を表示します.

そのためwidth値を調整すると, あと一個グリフが入るか入らないかの境界で改行の位置が変化するのです. で, この調整具合がWEBブラウザごとに全て異なるので, 本来「自動改行の位置をwidth幅で制御する」ことに本質的な意味はありません.

NOTE:
同様にグリフ幅はフォントの種類によっても変化します. 例えば「等幅フォント(monospace)」であれば, グリフ幅が固定となるため, 改行位置を予測しやすくなります.


ですが「提示されたデザインに近づける」ことを最優先課題とする(つまり改行の位置にデザイン上重大な意味が含まれている)のであれば, br要素を用いて改行を強制させればよいでしょう.

投稿2018/02/03 18:25

編集2018/02/03 18:45
defghi1977

総合スコア4756

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

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

退会済みユーザー

退会済みユーザー

2018/02/03 19:47

なるほどありがとうございます。 最終手段として<br />で改行することを考えていましたが、スマートではないと思い迷っていました。
退会済みユーザー

退会済みユーザー

2018/02/04 03:28

ありがとうございます。
guest

0

ホームページを丸々そっくりに作る・・・

これは、イメージ画像等から、自分でコードを考えて作成するのでしょうか?それともHTML・CSS等のコードは提示されているのでしょうか?

提示されているのであれば、該当コードのCSSをそのまま当てはめれば良いのではないでしょうか?
リセットCSS等の定義や各コンテンツの大きさ、フォントの種類や大きさ、文字送り間隔や均等割りの有無等分かれば、同じになるのではないでしょうか?

投稿2018/02/03 21:06

yoshinavi

総合スコア3521

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

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

退会済みユーザー

退会済みユーザー

2018/02/03 21:26 編集

説明不足ですみません。 例えばヘッダーのboxはid headerを使う、中身のboxはid contentsを使うという大まかboxの名前の指定はありますが、ほとんどはイメージ画像から自分でコードを作成します。
yoshinavi

2018/02/03 22:06

提示コードが無いのであれば「defghi1977」さんの回答にある「フォント」の問題が関わりますので、見本のテキストと似たフォントで、「1行の文字数が全て同じ数で改行」されていれば「等幅フォント」の使用で良いでしょうし、「行ごとにバラバラな文字数で改行」されていれば、文字送り間隔や均等割り等で調整するしかないと思います。
退会済みユーザー

退会済みユーザー

2018/02/04 03:29

ありがとうございます。
guest

0

提示していただいたコードだと全部1行で書かれていますが、実際にはコードを見やすくするために適宜改行(brではなく単なるテキストエディタ上の改行)していたりしてへんなスペースみたいなのが入ってしまっているとか?

投稿2018/02/03 14:23

dala00

総合スコア441

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

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

退会済みユーザー

退会済みユーザー

2018/02/03 14:26

回答ありがとうございます。 スペースや改行(<br />でない)は入っていないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問