webデザイン初心者のための<p>タグ内の長文についての質問
- webデザイン初心者が<p>タグ内の長文についてわからない点があるため質問します。特に、<p>要素で記述した文章の折り返し地点や背景画像の指定方法に関して知りたいです。
- 添付画像の背景画像に対して、<p>要素に指定したwidth幅に合わせて自動調整する方法を知りたいです。また、<p>要素へのcss指定のみで解決する方法も教えていただきたいです。
- 初心者にもわかりやすく、<p>タグ内の長文についての質問にお答えいただけると助かります。よろしくお願いします！
- ベストアンサー
webデザインcss <p>タグ内の長文について
初歩的な質問失礼致します。 webデザイン初心者です。現在サイトの制作中なのですが、<p>要素の長文について何点かわからない所が出てきたので質問させていただきます。 (1) <p>要素で記述した文章の折り返し地点は、<br>を使用しない限り<p>要素に指定したwidth幅によってきまるのでしょうか？ (2) その場合、背景画像を<p>に指定したら自動的にその背景画像も同じwidthになるのでしょうか？ 添付画像の上の図のように、<p>要素にcssで背景画像を指定して、その上に上下左右それぞれ余白をとって長文を配置したいのですが、添付画像の下のような状態になってしまいます。 以下がcssです。 p { background: url(図の水色部分) no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } （リセットcssでmargin.padding.borderはそれぞれ０にしてあります。） <p>を囲む<div>を作ってそれに背景画像を指定して、<p>に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか？ 出来れば<p>要素へのcss指定だけで完結させたいのですが、方法がわかりません。 どなたか初心者にもわかりやすくご教授いただけないでしょうか？？ どうかよろしくお願い致します！
- lovesms
- お礼率85% (75/88)
- CSS
- 回答数3
- ありがとう数4
- みんなの回答 （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>
お礼
丁寧にご回答いただきありがとうございました！
関連するQ&A
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- [CSS]marginとpaddingについて
ブログのCSSを編集しています。 marginとpaddingの違いがいまいち分かっていなかったので、いろいろなCSS講座サイトを見て回ったのですが、少し混乱して来ました…。 自分なりに以下のような結論を出したのですが、何か問題はありますでしょうか。 ■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。 ■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。 ■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので) ■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので) ネガティブマージンは使用しません。 また、各エリアやテキストに、ボーダーと背景色は使用していません。 表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。(統一した方が気持ち良いので) この解釈で合っているか、教えてもらえると助かります。 よろしくお願いいたします。
- ベストアンサー
- HTML
- floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> （<body>前、</body>後省略） ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。
- 締切済み
- HTML
- html { } CSS設定の解釈を教えて下さい
お世話になります。 あるサイトのCSS設定が↓のようになっていました。 +------------------------------------------------------------------ html { margin: 0; padding: 0; min-width: 700px; } body { margin: 0; padding: 0; min-width: 800px; } +------------------------------------------------------------------ bodyの指定はわかるのですが、htmlにCSSをするのは 初耳です。また、min-widthの値が、bodyの同値より 少ないのですが、これは、どういった解釈になるのか、 教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- cssで、imgタグに、背景画像を敷きたい
cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 ＜HTML＞ <div id="hoge"> <img src～ ＜CSS＞ #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ？ width:？ height:？ margin:？ padding:？; ＜影の大きさ＞ ・width400px ・height200px ＜写真のサイズ指定＞ ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで、height:100%の中央寄せ
白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。 本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、 html, body, containerのそれぞれにheight:100%、 親要素にmargin, padding 0を指定したところ、 画面をスクロールさせたところから緑色の背景色が消えています。 どのようにすれば解決できるのでしょうか？ *{ margin:0; padding:0; } html, body{height:100%;} #container { height:100%; width:800px; background-color:#0A0; margin:0px auto; }
- ベストアンサー
- HTML
- CSSのpaddingは<body>タグに指定可能？
CSSのmarignは<body>タグに以下のような形式で指定されているのを見かけますが、 例： ｍargin-top:0px; margin-bottom:0px; margin-left:0px; margin-rigiht:0px; W3Cの規定によると、paddingは<body>タグに指定可能なのでしょうか？ 例： padding-top:20px; padding-bottom:20px; padding-left:20px; padding-rigiht:20px; W3Cの規定によると、marginとpaddingは、ブロックレベル要素及びインラインレベル要素に指定可能だと思います。 ブロックレベル要素とインラインレベル要素を区分けした表はよく見かけますが、<body>タグはブロックレベル要素に含まれていません。 ＜マージンとブロックレベル要素及びインラインレベル要素の関係＞ http://www.mozilla.gr.jp/standards/webtips0015.html ＜ブロックレベル要素とインラインレベル要素を区分けした表＞ http://riko.s235.xrea.com/shirley/reference008.htm <body>タグはブロックレベル要素と考え、ブロックレベル要素に適用できるスタイルは<body>タグにも指定できると解釈してよいのでしょうか？ ブロックレベル要素に指定できて、<body>タグにも指定できないスタイルってありますか？また、ブロックレベル要素に指定できずに（インラインレベル要素に指定できて）、<body>タグにも指定できるスタイルってありますか？
- ベストアンサー
- HTML
- CSS IEだけがずれます。
いくら頑張ってもずれます。。 どこを変更すればよいのでしょうか？ ご指導下さい。 CSSは以下です。 /******************************************/ body{/*全体的な設定*/ margin:0px; /*全体の余白*/ text-align:center; /*センタリングIEバグ回避用*/ background: url(04.jpg) left top repeat-x; /*全体の背景の設定*/ } /******************************************/ a:link , a:visited , a:hover , a:active{ /*リンクフォントの設定*/ color: #a44; /*リンクの色*/ text-decoration: underline; /*リンク下線の設定。 } /******************************************/ #baseBlock1{/*コンテンツ全体の設定*/ font-family:Verdana, "Tahoma,Arial,sans-serif,ＭＳ Ｐゴシック",MS UI Gothic, Osaka;/*フォントの設定*/ color:#aaa; /*文字色の設定*/ margin-left:auto; /*センタリングのための左の余白*/ margin-right:auto; /*センタリングのための右の余白*/ width:850px; /*コンテンツ全体の幅*/ text-align:left; /*IEセンタリングバグ回避用。*/ font-size: 0.82em; /*文字サイズ。 文字サイズはInternet Explorerの文字のサイズ－中、Firefoxの文字サイズ－標準サイズに合わせてあります。*/ } /******************************************/ #title{/*タイトル部分*/ margin-left:10px; width:1360px; /*タイトル部分の幅*/ height:200px; /*タイトル部分の高さ*/ background:url(01.jpg) no-repeat; /*タイトル部分の背景設定*/ border:1px solid #fff;/*枠線の設定*/ } /******************************************/ h1{/*タイトル部分のフォント、文字位置の設定*/ font-size:1.3em; /*タイトル文字の大きさ 1emでbaseBlock1のfont-sizeと同じ大きさになります*/ color:#fff; /*タイトル文字の色*/ padding-top:80px; /*文字上側の余白*/ padding-left:50px; /*文字左側の余白*/ margin:0px; /*Firefoxでの余分な余白を削除*/ } /******************************************/ h2{/*サブタイトル部分の設定*/ color:#fff; /*文字色*/ padding-left:50px; /*左に余白*/ padding-top:0px; /*上に余白*/ padding-right:50px; /*右に余白*/ font-size:1.0em; /*文字サイズ*/ margin:0px; /*余白の設定*/ font-weight:normal; /*文字の太さ*/ } /******************************************/ #main{/*メインコンテンツ部分の位置設定*/ width: 1078; /*メインコンテンツの幅*/ float: none; /*メインコンテンツ位置設定*/ padding-top: 31px; /*文字上部の余白*/ padding-bottom:30px; /*フッターとの間隔*/ ; padding-left: 226px;} /******************************************/ #maintext{/*IEとfirefoxのズレ対策用*/ padding:30px; /*文字左側の余白。*/ } /******************************************/ h3{/*見出しの設定*/ border-bottom:1px solid #acf; /*下に枠線*/ border-left:4px solid #acf; /*右に枠線*/ padding-left:4px; /*左に余白*/ font-size:1.1em; /*文字サイズ*/ font-weight:normal; /*文字の太さ*/} /******************************************/ #menu{/*メニュー部分の設定。*/ width:219px; /*メニューの幅*/ float:left; /*メニュー位置設定*/ font-size:0.9em; /*メニューの文字サイズ*/ text-align:center; /*文字位置の設定 padding-top:30px; /*上に余白*/ } /******************************************/ #me-top{/*メニュー上部画像用*/ height:34px;/*高さ*/ width:228px; background:url(02t.jpg) no-repeat; /*背景の設定*/ } /******************************************/ #me-mid{/*メニュー中部画像用*/ width:224px; background:url(03.jpg) repeat-y; /*背景の設定*/} /******************************************/ #me-bot{/*メニュー下部画像用*/ height:32px; /*高さ*/ width:228px; background:url(04b.jpg) no-repeat; /*背景の設定*/} /******************************************/ #menutext{/*IEとfirefoxのズレ対策用*/ padding-left:10px; /*左の余白設定*/ } /******************************************/ .m-title{/*メニュータイトルの設定。*/ height:20px; /*高さ*/ font-size:1.2em; /*テキストサイズ*/ border:1px solid #666; /*枠線の設定*/ color:#aaa; /*テキスト色*/ background:#fff url(05.jpg) no-repeat; margin-top:0px; /*上部に余白*/ margin-left:10px; /*左に余白*/ margin-right:22px; /*右に余白*/ margin-bottom:5px; /*下に余白*/ } /******************************************/
- 締切済み
- CSS
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
- テキストをボーダーで囲むCSS
CSSを本を見ながらやっていますが、 下記の例文でテキストをボーダーで囲むものをやってみました。 この中で、 margin-left:100px; margin-right:100px; というころですが、これはブラウザに対しての両サイド空きを意味していると思うのですが、逆に囲んでいる幅のほうを指定するにはどうしたらよいのでしょうか。 または、そのようなことはできないのでしょうか。 <STYLE TYPE="text/css"> <!-- P.text {text-align:justify; text-justify:distribute; line-height:154%; margin-left:100px; margin-right:100px; border-style:solid; border-width:2px; border-color:#dd8888; padding:10px} --></STYLE> *****HTML <P CLASS="text"> テーブルみたいになるテキスト</P>
- ベストアンサー
- HTML
お礼
すごくわかりやすかったです！ありがとうございました。 納得がいきました。 backgroundはpaddingまで表示されますもんね。 また機会があれば是非ご指導の程よろしくお願いします！