webデザインcss
タグ内の長文について

Question

初歩的な質問失礼致します。 webデザイン初心者です。現在サイトの制作中なのですが、

要素の長文について何点かわからない所が出てきたので質問させていただきます。 (1)　

要素で記述した文章の折り返し地点は、
を使用しない限り

要素に指定したwidth幅によってきまるのでしょうか？ (2)　その場合、背景画像を

に指定したら自動的にその背景画像も同じwidthになるのでしょうか？添付画像の上の図のように、

要素にcssで背景画像を指定して、その上に上下左右それぞれ余白をとって長文を配置したいのですが、添付画像の下のような状態になってしまいます。　以下がcssです。 p { background: url(図の水色部分) no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } （リセットcssでmargin.padding.borderはそれぞれ０にしてあります。）

を囲む

を作ってそれに背景画像を指定して、

に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか？出来れば

要素へのcss指定だけで完結させたいのですが、方法がわかりません。どなたか初心者にもわかりやすくご教授いただけないでしょうか？？どうかよろしくお願い致します！

H240S18B73 · Accepted Answer

widthの値は初期ではpaddingを含みません
なので
width:691px;
padding: 16px 230px 16px 30px;
だとpの幅は691+230+30pxになります

width:431px;にしましょう

蛇足ながらhtml5だと
box-sizing:border-box;
でwidthをpaddingを含んだ値にできますが
まだ時期的に早いかもしれません

outbrave · Answer

それで間違っていません。自動で改行されないのは、改行しないように指定しているとか、「テキスト」のように日本語ではなく、「abc」だとかです。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

ORUKA1951 · Answer

初心者の方だと思いますが、根本的にとても大きな--重大な---思い違いをされています。 HTMLは、Hyper Text Markup Language の略でマークアップ言語です。それは文書を構成する要素に分解して、それぞれの要素をタグを使用してマークアップするということです。　P要素は、Pargraph(段落) である要素で前後を

と

でマークアップします。　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣　段落の意味は小学校レベルですので説明しません。＞文章の折り返し地点は、
を使用しない限り　通常の文書では
要素は登場しないはずです。 HTML4.01では「(大住所と小住所のように)ひとつの段落でありながら視覚的に改行したいところ」HTML5では「(詩の内部の改行のうに)改行自体がコンテンツの一部である」とされています。　日本語の一般表記では、段落は改行されて、段落の最初の文字が１文字字下げされるように表示します。また段落間はマージンを取りません。　あなたの場合、画像を入れたい場所が文字通り!!!段落ごとなのか、複数の段落を持ちうるブロックなのか質問ではわかりません。　HTML4.01では、セクションをまとめてマークアップする要素(タグ)が用意されていませんから、「id属性及び class属性と併用することで、文書に構造を付加( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」します。HTML5では、見出しを伴うような集合ならsection( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を使用し、そうでない場合は

です。 ★HTMLを作成する段階では、それをどのようにプレゼンテーションするかは考えなくて良いです。 ★プレゼンテーションはスタイルシートに任せます。　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 　

webデザインcss <p>タグ内の長文について

それで間違っていません。

初心者の方だと思いますが、根本的にとても大きな--重大な---思い違いをされています。

widthの値は初期ではpaddingを含みません

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング