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

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

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

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

CSS

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

Q&A

解決済

2回答

3970閲覧

横並びのカード型ボックスの中からpタグのテキストがはみ出る。中央寄せもできない。

bariko

総合スコア31

CSS3

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

CSS

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

0グッド

0クリップ

投稿2020/03/11 04:09

編集2020/03/11 04:11

横並びのカード型のボックスをdivで作り、その中にh1見出しとpタグで囲ったテキストを納めたいです。
イメージ説明

問題1:pタグのテキストがはみ出る
h1見出しは文字数が増えても、ちゃんとdivで作ったボックスの中で改行されて収まってくれるのですが、pタグで囲ったテキストは文字数が増えた分だけ、どんどんはみ出して行ってしまいます。
pタグにwidthとheightを指定すれば、その中で収まるのかな、と思ったので、pタグに指定してみましたが、できませんでした。

pタグもh1も同じブロック要素だと思うのですが、どうしてこの2つではみ出したり、はみ出さなかったりするのでしょうか?また、pタグを外側の赤いconteボックスの中におさめる方法はないでしょうか?

問題2:h1をボックス内で中央寄せにできない
今はh1もimgも左端に寄っています。これを、中央寄せにしたいのですが、できません。text-alain:center;にしてみても、h1はブロック要素だからなのか、できません。

今のコードは以下の通りです。

html

1<div class="conte"> 2 <div class="box"> 3 <h1>見出し見出し見出し1</h1> 4 <img src="http://placehold.it/50x50" alt=""> <p>texttexttexttexttexttexttexttexttexttexttexttext</p> 5 </div> 6 <div class="box"> 7 <h1>見出し2</h1> 8 <img src="http://placehold.it/50x50" alt=""> <p>texttexttexttexttexttexttexttexttexttexttexttext</p> 9 </div> 10 <div class="box"> 11 <h1>見出し3</h1> 12 <img src="http://placehold.it/50x50" alt=""> <p>texttexttexttexttexttexttexttexttexttexttexttext</p> 13 </div> 14</div>

css

1.conte{ 2 display:flex; 3 justify-content:center; 4 margin:0 auto; 5} 6.box{ 7 background-color:red; 8 margin:20px; 9 padding:10px; 10 width:200px; 11 height:200px; 12} 13.box h1{ 14} 15.box img{ 16} 17.box p{ 18 width:100px; 19 height:100px; 20}

Codepen用意しました。現状がすぐ確認できるので、もしよかったら検証に使ってください。
https://codepen.io/bariko/pen/NWqyxwZ

皆さんのお力を貸していただけますと幸いです。何卒よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

問題1:pタグのテキストがはみ出る

アルファベットが切れ目なく続いているので折り返しされないのです。
単語を半角空白で区切ればそこで折り返えされます。
また、全角文字なら折り返されます。

overflow-wrap: anywhere;でアルファベットが連続していても強制的に折り返す設定にできます。

問題2:h1をボックス内で中央寄せにできない

h1 に text-align: center; を設定すれば中央寄せになるはずです。
ただ、画像も中央寄せにしたようなので、親要素の.boxに設定するといいでしょう。
ただし、子孫に継承するので、p要素も中央寄せになります。
p要素は左寄せにしたいなら、それにtext-align: left;を設定します。

あと、画像では画像の垂直位置を揃えたいようなのでh1に適切なheightを設定します。

css

1.conte{ 2 display:flex; 3 justify-content:center; 4/* margin:0 auto; */ 5} 6.box{ 7 background-color:#E03737; 8 margin:20px; 9 padding:10px; 10 width:200px; 11 height: Auto; 12 text-align: center; 13} 14.box h1{ 15 height: 80px; 16} 17.box img{ 18} 19.box p{ 20 text-align: left; 21 overflow-wrap: anywhere; 22}

投稿2020/03/11 05:06

hatena19

総合スコア33620

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

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

bariko

2020/03/11 07:14

大変丁寧にご説明いただきありがとうございました。 >アルファベットが切れ目なく続いているので折り返しされないのです。 >単語を半角空白で区切ればそこで折り返えされます。 >また、全角文字なら折り返されます。 こちらの情報は、初めて聞く情報でしたので、大変驚きました。 pタグはブロック要素だとは言いますが、中に入れるテキストによって振る舞いが違うんですね。 その他、中央寄せのやり方についても、丁寧にありがとうございました。
guest

0

.contetext-align を設定、.box.box p から height を削除、.box poverflow-wrap を指定するといい感じになりそうです

css

1.conte{ 2 display:flex; 3 justify-content:center; 4 margin:0 auto; 5 text-align: center; 6} 7.box{ 8 background-color:#E03737; 9 margin:20px; 10 padding:10px; 11 width:200px; 12} 13.box h1{ 14} 15.box img{ 16} 17.box p{ 18 width:100px; 19 overflow-wrap: anywhere; 20}

投稿2020/03/11 04:30

SeieiMiyagi

総合スコア247

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

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

bariko

2020/03/11 07:15

回答いただきありがとうございました。 お恥ずかしながらoverflow-wrapのプロパティは知らなかったため、大変勉強になりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問