【先着1,000名様!】1,000円分をプレゼント!

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

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はそれぞれ0にしてあります。)


<p>を囲む<div>を作ってそれに背景画像を指定して、<p>に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか?

出来れば<p>要素へのcss指定だけで完結させたいのですが、方法がわかりません。

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

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

「webデザインcss <p>タグ内の長文」の質問画像

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

A 回答 (3件)

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


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

width:431px;にしましょう

蛇足ながらhtml5だと
box-sizing:border-box;
でwidthをpaddingを含んだ値にできますが
まだ時期的に早いかもしれません
    • good
    • 0
この回答へのお礼

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


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

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

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


HTMLは、Hyper Text Markup Language の略でマークアップ言語です。それは文書を構成する要素に分解して、それぞれの要素をタグを使用してマークアップするということです。
 P要素は、Pargraph(段落) である要素で前後を<p>と</p>でマークアップします。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 段落の意味は小学校レベルですので説明しません。

>文章の折り返し地点は、<br>を使用しない限り
 通常の文書では<br>要素は登場しないはずです。
HTML4.01では「(大住所と小住所のように)ひとつの段落でありながら視覚的に改行したいところ」HTML5では「(詩の内部の改行のうに)改行自体がコンテンツの一部である」とされています。

 日本語の一般表記では、段落は改行されて、段落の最初の文字が1文字字下げされるように表示します。また段落間はマージンを取りません。

 あなたの場合、画像を入れたい場所が文字通り!!!段落ごとなのか、複数の段落を持ちうるブロックなのか質問ではわかりません。

 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 … )


 
    • good
    • 0
この回答へのお礼

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

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の方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

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

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%の指定(テーブルの中などにぴったり収まるように)をしたい
</textarea>
</td>
</table>
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>

参考URL:http://www.tohoho-web.com/css/reference.htm#width

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

<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ベストアンサー

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

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

タグ説明:
<a href="アドレス1" onclick="window.open('アドレス2')" 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;
margin: 0 auto;
}

ランディングページのようなものを作りたく、
ページの上からフッターの手前くらいまで<div id="container">を効かせるにはどのように記述すればよいでしょうか?

<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ベストアンサー

>HTML5と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級とかが取れるように、簡単なものなのです。結果を急いでうわべだけ学ぼうとしても反って時間と労力を無駄にして、しかもきちんと身についていないから応用問題に果ても足も出ない・・・ということになる。

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

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

 よっ...続きを読む


人気Q&Aランキング