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

解決済

質問者：lovesms
質問日時：2014/02/26 13:30
回答数：3件

初歩的な質問失礼致します。

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指定だけで完結させたいのですが、方法がわかりません。

どなたか初心者にもわかりやすくご教授いただけないでしょうか？？

どうかよろしくお願い致します！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「P」に関するQ&A：マザーボード　P7H55D-M PRO で両方

さらに表示

「日本語 W3C」に関するQ&A： W3C Markup Validation Serviceの意味と日本語版について

「意味 padding」に関するQ&A： *{margin:0px;padding:0px;}というＣＳＳのタグの意味について教えてください。

「br 意味」に関するQ&A： htmlでの /> や <br /> の意味

「PAD 図」に関するQ&A： PAD図の書き方

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： H240S18B73
回答日時：2014/02/27 04:36

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

なので
width:691px;
padding: 16px 230px 16px 30px;
だとpの幅は691+230+30pxになります

width:431px;にしましょう

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

- 0
- 件

通報する

この回答へのお礼

すごくわかりやすかったです！ありがとうございました。
納得がいきました。
backgroundはpaddingまで表示されますもんね。

また機会があれば是非ご指導の程よろしくお願いします！

通報する

お礼日時：2014/02/28 10:06

No.2

回答者： ORUKA1951
回答日時：2014/02/26 15:22

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

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-html4 … )」します。HTML5では、見出しを伴うような集合ならsection( http://standards.mitsue.co.jp/resources/w3c/TR/h … )を使用し、そうでない場合は<div>です。

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

　

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。

通報する

お礼日時：2014/02/28 10:04

No.1

回答者： outbrave
回答日時：2014/02/26 14:41

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

自動で改行されないのは、改行しないように指定しているとか、「テキスト」のように日本語ではなく、「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>

- 0
- 件

通報する

この回答へのお礼

丁寧にご回答いただきありがとうございました！

通報する

お礼日時：2014/02/28 10:04

このQ&Aに関連する人気のQ&A

「P」に関するQ&A：相関係数についてくるP値とは何ですか？

さらに表示

「br 意味」に関するQ&A：あした　あさって　ささって　しあさって　ですよね

「日本語 W3C」に関するQ&A：デスクトップ画面で為替の値動きを確認できるソフトウェア

「PAD 図」に関するQ&A：中国の宇宙船神舟７号を打ち上げる技術について。

「意味 padding」に関するQ&A： form input テキストを上下中央に表示したい

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qｐタグによる段落間のアキ調整について

こんにちは。
HTMLのｐタグでくくった段落が連続すると、
多くのブラウザでは段落間に１行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか？

たとえば段落の「margin-bottom」に０ではなく
マイナス値を入れればなくせるようですが、
「ｐによる１行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか？

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え？　できますか？
　できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
　という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

他の回答も見る

Qテーブルタグの中にdivを含めてはダメ？

テーブルタグの中にdiv要素を入れるとダメなのでしょうか？
何か不都合でもあるのでしょうか？
何かご存知の方がいれば教えていただけませんか？

Aベストアンサー

以下、HTML 4.01での話です。（XHTMLでもほぼ同じだと思います）

tableタグ直下に書けるのは、caption，col，colgroup，head，tfoot，tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth，tdが書けることになっています（それ以外は不可）。

th，tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth，tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

他の回答も見る

QCSS、width100％でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか？

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
　これは常に入れておきましょう。

　なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

他の回答も見る

Qで配列（複数の要素）を渡したいとき？

こんにちわ，

今HTML＋PHPで
$hoge[]にいくつかの要素が入っているとき，
それをあるfoo.phpというページに渡したいとき，
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが，うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは？
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか？

他の回答も見る

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数（ボックスの内容）に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

他の回答も見る

Qformのinputなどの幅100%指定

formのinputやtextareaなどの幅を、100％の指定（テーブルの中などにぴったり収まるように）をしたいのですが、できないのでしょうか？

少しずつ様子を見ながら、ちくちくとsizeを指定していくしかないのでしょうか？

Aベストアンサー

　例えば、こんな感じでは如何ですか↓

<form method="POST" action="cgi-bin/xxx.cgi">
<table border=1 width=400>
<tr>
<td>
タイトル：
</td>
<td width=350>
<input type="text" name="title" style="width:100%">
</td>
</tr>
<tr>
<td colspan=2>
<textarea name="memo" style="width:100%" rows=4>
formのinputやtextareaなどの幅を、100％の指定（テーブルの中などにぴったり収まるように）をしたい
</tex...続きを読む

他の回答も見る

Q一つのリンクに複数のURLを指定

一つのリンクに複数のURLを指定できますでしょうか？

想像タグ
<a href="http://www.google.co.jp/" & "http://www.yahoo.co.jp/" target="_blank">検索</a>

JavaScriptでも　構いません。

ネットではこんなのが見つかりました。

Bridges | BridgeURL
http://bridgeurl.com/

Aベストアンサー

>書籍リストを作っていて、上下巻のある本を一つにまとめたいと考えています。
２つの新規ウィンドウで決まっているなら、簡単に以下の形式でもいけますよ。

タグ例：
<a href="http://www.google.co.jp/" onclick="window.open('http://www.yahoo.co.jp/')" target="_blank">リンク</a>

タグ説明：
<a href="アドレス１" onclick="window.open('アドレス２')" target="_blank">リンク</a>

これなら
<script type="text/javascript"></script>

は必要ありません。
タグだけでOKです。

他の回答も見る

Q
の使いかたについて

<div id="container">の使い方についてお尋ねします。

ページの上から下まで帯のようにしたいのですが、例えば以下のように書くとヘッダーのところまでしかcontainerが効いていません。

HTML
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="navi">ナビゲーション</div>
<div id="contents">ページの内容</div>
<div id="footer">フッター</div>
</div>
</body>

CSS
#container {
font-size: 21px;
line-height: 28px;
color: #353535;
width: 1050px;
marg...続きを読む

Aベストアンサー

＞HTML５とCSS3に関するおすすめの本があったら教えていただけないでしょうか？
　これがとても難しい。理由は
・進歩の激しいこの世界、出版時には古くなっている
・すべて仕様書に書かれている。それで事足りる物を書き下す意味がない。
　仕様書には、「なぜそうするのか」の理由も含めて完璧に書かれている。
　それを読めば解決する物を、著者の色眼鏡を通して記述しても正確ではない
　しばしば、仕様書を読んだことがあるのか疑問のものがある。

　これについては、No.1でいくつか説明しました。

　よって、一番早くて、しかも正確な参考書は仕様書ということになります。私もHTMLやCSSは仕様書で学びました。
　最初は冗長に感じますが、それは正確性を追求するために致し方ないでしょう。
　まずはHTMLをしっかり学ばれることをお勧めします。いきなり膨大なHTML5ではなく、HTML4.01strict【strictですよ。】を身につけてから、HTML5に進まれるほうが楽でしょう。

1.2 仕様の記述法( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )より
　本仕様書は、著者及び実装者という2種類の読者を想定している。著者である読者に対しては、本仕様書が、HTMLの実装詳細に必要以上に触れずに使える、効率的・魅力的でアクセス性のよい文書を著述する際に必要な道具となることを望む。けれども実装者である読者は、仕様に適合するユーザエージェントを作成する上で必要となるすべての情報を見つけることができるだろう。
　本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
・必要な情報に直接アクセスする。

　最初は、全体を通して読んで全体像を把握して、いつでも必要な情報にたどり着けるようになること。
　私のブックマークでは
HTML4.01詳細目次( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )

　ついで、スタイルシートはやはりCSS2.1あたりがベストです。
CSS 2.1目次( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html#toc )
　特に
4 構文と基本データ型
5 セレクタ
6 プロパティ値とカスケーディング、継承の割り当て
　ここを読まれるだけで、あなたが理解しているCSSが如何に不完全か理解できると思います。

　そのうえで、
HTML4からの変更点( http://www.html5.jp/trans/w3c_differences.html )
　で、変更部分を身につけるのが最も最短で効率的でしょう。

★HTMLやCSSの学習は、数学や理科の勉強方法ととても良く似ています。基礎から順を追ってなぜなのかを理解しながら学ぶと、小学生でも数検2級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。