- ベストアンサー
webデザイン初心者のための<p>タグ内の長文についての質問
- webデザイン初心者が<p>タグ内の長文についてわからない点があるため質問します。特に、<p>要素で記述した文章の折り返し地点や背景画像の指定方法に関して知りたいです。
- 添付画像の背景画像に対して、<p>要素に指定したwidth幅に合わせて自動調整する方法を知りたいです。また、<p>要素へのcss指定のみで解決する方法も教えていただきたいです。
- 初心者にもわかりやすく、<p>タグ内の長文についての質問にお答えいただけると助かります。よろしくお願いします！
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
widthの値は初期ではpaddingを含みません なので width:691px; padding: 16px 230px 16px 30px; だとpの幅は691+230+30pxになります width:431px;にしましょう 蛇足ながらhtml5だと box-sizing:border-box; でwidthをpaddingを含んだ値にできますが まだ時期的に早いかもしれません
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
初心者の方だと思いますが、根本的にとても大きな--重大な---思い違いをされています。 HTMLは、Hyper Text Markup Language の略でマークアップ言語です。それは文書を構成する要素に分解して、それぞれの要素をタグを使用してマークアップするということです。 P要素は、Pargraph(段落) である要素で前後を<p>と</p>でマークアップします。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ 段落の意味は小学校レベルですので説明しません。 ＞文章の折り返し地点は、<br>を使用しない限り 通常の文書では<br>要素は登場しないはずです。 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 )を使用し、そうでない場合は<div>です。 ★HTMLを作成する段階では、それをどのようにプレゼンテーションするかは考えなくて良いです。 ★プレゼンテーションはスタイルシートに任せます。 ⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
お礼
ありがとうございました。
- outbrave
- ベストアンサー率60% (231/380)
それで間違っていません。 自動で改行されないのは、改行しないように指定しているとか、「テキスト」のように日本語ではなく、「abc」だとかです。 <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"> * { margin: 0; padding: 0; border: none; } p { background: #9ff url() no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } </style> </head> <body> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </body> </html>
お礼
丁寧にご回答いただきありがとうございました！
お礼
すごくわかりやすかったです！ありがとうございました。 納得がいきました。 backgroundはpaddingまで表示されますもんね。 また機会があれば是非ご指導の程よろしくお願いします！