正しい（と思われる）段落のと行間を空ける設定方法が知りたい。

[新着] Webテンプレートを仮オープンしました

0   名前： しげ吉 ： 2007/01/08（月） 15:04  ID:cXE2E9y0
【何をしたいのか】
→ 正しい（と思われる）段落のと行間を空ける設定方法が知りたい。

【現在の状況】

→ CSSの勉強を始めたのですが、段落の設定の方法や行間、（ここでは＋サブタイトル1とTESTの間の幅です）
これで良いのかいまいち自信がありません。
[サブらタイトル]と[TEST]と[QUESTION]を正しい設定で段行間の幅や落をつくりたいのです、出来れば段落の幅も自由に。
どなたかを教えていただけますか。


【何をしてみたのか】

※<br><br>を記述する。（HTMLの時の癖なのですが、ソースが見苦しいし正しいと思えない）
※段落の前の行に<p>を記述、（HTMLの記述でCSSとして正しいと思えない）
※段落を設定するごとに<p></p>で囲む、（とても面倒でもっとスマートな方法がありそうな気がする）

【備考】
インデントを施していますが、[＋サブタイトル1]とTESTの行間も開けたいのでこのように（line-height:28px;
）ラインハイトで何とか調節できるようにしています。
これもCSSとして正しいのかどうかも自信がありません。
宜しくお願いいたします。



<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<STYLE TYPE="text/css">

<!--
* { margin: 0; padding: 0; }
body {
background-color:#ffffff;
margin: 18px 0px 0px 20px;
}
#mainbox
{
width:250px;
height:230px;
text-align:left;
font-size:11px;line-height:11pt;color:#383838;
font-weight:500;
text-indent:-20px;
padding:0px 0px 0px 20px;
margin:0px auto;
border: solid 1px #FF0018;
}

.subtittle
{
width: 200px;
font-size:12px;line-height:28px;
color:#1F14B1;
}

-->
</style>
<body>

<div id="mainbox">
<span class="subtittle">＋サブタイトル1</span><br>

TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>

<font color="#ff0000">
QUESTION,QUESTION,QUESTION,QUESTION,QUES<br>
ION,QUESTION,QUESTION,QUESTION,QUESTION,Q<br>
ESTION,QUESTION,,QUESTION,,QUESTION,,QUESTI
QUESTION,QUESTION,QUESTION,QUESTION,QUES<br>
ION,QUESTION,QUESTION,QUESTION,QUESTION,Q<br>
ESTION,QUESTION,,QUESTION,,QUESTION,,QUEST</font>

</div>
</body>
</html>














1   名前： Z ◆XTzyosZXcL ： 2007/01/08（月） 15:04  ID:SAZVxjjY
>※段落を設定するごとに<p></p>で囲む、（とても面倒でもっとスマートな方法がありそうな気がする）
　いえ、これが一番正当な方法です。まして>>0は厳格型を宣言しているのですから、FONT要素も使えません。BODY要素内には直接テキストを記述することはできません（それを防ぐためにDIV要素やSPAN要素でくくられているようですが、考え方としては逆です）。CSSによるマージン調節は、まず本文を適切にマークアップしてから行うべきですね。

参考・簡単で、より適切なウェブサイト作成講座：
http://pasokon-yugi.cool.ne.jp/website_kouza/
2   名前： イサ ： 2007/01/08（月） 15:04  ［URL］  ID:0yJG31Zh
>>0
のソースの場合、僕なら以下のようにします。

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 
'http://www.w3.org/TR/html4/strict.dtd'>
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
</head> 
<STYLE TYPE="text/css">

<!--
body  {background-color:#ffffff;
       margin:18px 0 0 20px;}

h1
{ 
width: 200px;
font-size:12px;
color:#1F14B1;
}

#mainbox {width:250px;
          text-align:left;
          font-size:11px;
          line-height:11pt;
          text-indent:-20px;
          padding:0 0 0 20px;
          margin:0 auto;
          border:solid 1px #ff0018;}

.test   {color:#383838;}   

.red    {color:#ff0000;}

-->
</style>
<body>
<div id=mainbox">
<h1>サブタイトル<h1>
<p class="test">
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.TEST.<br>
</p>

<p class="red">
QUESTION,QUESTION,QUESTION,QUESTION,QUES<br>
ION,QUESTION,QUESTION,QUESTION,QUESTION,Q<br>
ESTION,QUESTION,,QUESTION,,QUESTION,,QUESTI
QUESTION,QUESTION,QUESTION,QUESTION,QUES<br>
ION,QUESTION,QUESTION,QUESTION,QUESTION,Q<br>
ESTION,QUESTION,,QUESTION,,QUESTION,,QUEST
</p>
</div>
</body>
</html>


テストしてませんので、参考としてお考え下さい。

要するに、タイトルやサブタイトルなどは、見出しとして＜Ｈ１＞や＜Ｈ２＞などにして、文字サイズや色・行間などをＣＳＳで、デザインする。

テストとクエスチョンを各＜ＣＬＡＳＳ＞で囲み、同じくＣＳＳで、デザインし、

囲まれた２つを＜ＤＩＶ＞で更に囲み、１つのグループとして、配置や枠線などをＣＳＳでデザインする。

大まかな考え方としては、こんな感じだと思います。

まだ僕も勉強中の身ですので、表現の間違いがあった場合は、勘弁してください。




3   名前： しげ吉 ： 2007/01/08（月） 15:04  ID:ESbBLHd6
Zさんアドバイスありがとうございました。

そうですね<font>はいけませんね、

勉強になりました。
4   名前： しげ吉 ： 2007/01/08（月） 15:04  ID:ESbBLHd6
イサさん早速の御回答ありあがとうございます。

イサさんの構造は完璧なのではないでしょうか、

説明不足でした。

私の言いたかったのは[mainbox]という常にブラウザの中心にある1つのボックス内でまずインデント（ここではサブタイトルと言う文字です）が必要で、<p>を使うことなく”段落”をつくるということができる方法はないものか、
ということなのです。

どうもありがとうございました。
5   名前： key-child ： 2007/01/08（月） 15:04  ID:2kGJVJwY
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

<head>

 <meta http-equiv="content-type" content="text/html; charset=shift_jis">
 <title>test html</title>

 <meta http-equiv="content-style-type" content="text/css">
 <style type="text/css">
<!--

body {
 font-size: medium;
 color: #000000;
 background-color: #ffffff;
}

#mainbox {
 width:250px;
 margin: 0 auto;
 border-width: 1px;
 border-color: #ff0000;
 border-style: solid;
 color: #383838;
}

#mainbox h1 {
 font-size: large;
 color: #1F14B1;
}

#mainbox p {
 margin-left: 1em;
}

.test {
 width: 50%;/* 段落の幅？ */
 margin-top: 2em;/* 段行間の幅？ */
 line-height: 2em;/* こっち？段行間の幅？ */
 /* 「落をつくりたい」は？？？ */
}
.question {
 color: #ff0000;

 width: 70%;/* 段落の幅？ */
 margin-top: 3em;/* 段行間の幅？ */
 line-height: 3em;/* こっち？段行間の幅？ */
 /* 「落をつくりたい」は？？？ */
}

-->
 </style>

</head> 

<body>

<div id="mainbox">
 <h1>＋サブタイトル1</h1>
 <p class="test">
  てすと。てすと。てすと。てすと。てすと。てすと。てすと。<br>
  てすと。てすと。てすと。てすと。てすと。てすと。てすと。
 </p>
 <p class="question">
  質問、質問、質問、質問、質問、質問、質問、質問、質問、<br>
  質問、質問、質問、質問、質問、質問、質問、質問、質問、
 </p>
</div>

</body>

</html>

こういう事なのかな？

> <p>を使うことなく”段落”をつくるということができる方法はないものか
段落ならp要素を指定すべき
6   名前： しげ吉 ： 2007/01/08（月） 15:04  ID:CQxzuDDN
key-childさん

全くそういう事でした。
段落には<p>なのですね、よく分かりました。
分かりやすく適切なアドバイス、感謝いたします。
一覧へ戻る