CSSでPタグの内外を修飾する方法



◇-?CSSでPタグの内外を修飾する方法-しん-08/15-08:56(123)-No.365210
 ┗?!Re:CSSでPタグの内外を修飾する...-テツヤ-08/15-10:36(121)-No.365220
  ┗?!【多分解決】Re:CSSでPタグの内...-しん-08/15-16:48(115)-No.365261
   ┗?!T!Re:CSSでPタグの内外を修飾す...-テツヤ-08/15-17:35(114)-No.365267
    ┗?!T!-Re:CSSでPタグの内外を修飾...-しん-08/16-08:26(99)-No.365358

▲このページのトップに戻る
365210CSSでPタグの内外を修飾する方法しん 2006/08/15-08:56

メーカー名:東芝
OS名:WindowsXp HomeEdition
パソコン名:PAEX522PDE3
ソフト関連:ソフトの使い方がわからない
--
CSSでPタグの内外を修飾する方法を2点お願いします。
Head内に記載する方法を考えています。

(1)Pタグで囲まれた文章をWordの様に数箇所タブを設定して表示出来ませんか。
<p>1.主催 町内会</p>
<p>2.開催日 平成 18年 9月 7日(木)</p>
<p>3.募集人数 大人 45名 (子供、小中高生は除く)</p>
<p>4.申込締切日 平成18年8月31日(木)</p>

・これを下記のように表現したい。
1.主催      町内会
2.開催日 平成 18年 9月 7日(木)
3.募集人数 大人 45名 (子供、小中高生は除く)
4.申込締切日 平成18年8月31日(木)

(2)Pタグで囲まれた複数行の文章でPタグ間の開きを制御したい。
<p>1.主催 町内会</p>
ブラウザで表示された時、この間の「1・」と「2・」の開きを調整したい。

<p>2.開催日 平成 18年 9月 7日(木)</p>

こんな事もWordでは自由なのですが。

これはPタグで記載しましたがPタグには拘りません。

▲このページのトップに戻る
365220Re:CSSでPタグの内外を修飾する方法テツヤ 2006/08/15-10:36

記事番号365210へのコメント
 以下の様でどうですか?。《
<PRE style="line-height:150%">
1.主催    町内会
2.開催日 平成 18年 9月 7日(木)
3.募集人数 大人 45名 (子供、小中高生は除く)
4.申込締切日 平成18年8月31日(木)
</PRE>

     ↓ここはタブ
1.主催   町内会

 line-heightで開きを調整。

▲このページのトップに戻る
365261Re:CSSでPタグの内外を修飾する方法しん 2006/08/15-16:48

記事番号365220へのコメント
テツヤさんは No.365220「Re:CSSでPタグの内外を修飾する方法」で書きました。

テツヤさんありがとうございます。
今こんな方法を考えています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>回覧</title>
<style type="text/css">
<!--
.top-disign {text-align:center;}
.disign-0 {
text-align:left;
display: block;
border: 1px solid #FF0000;
height: auto;
width: 600px;
position: relative;
padding:20px 20px 20px 50px;
}

.unnamed1 {
font-size: 18px;
font-weight: bold;
text-decoration: underline;
}

em {
font-style: normal;
color: #000000;
width: 130px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="top-disign">
<div class="disign-0">
<em>1.主催</em>町内会<br>
<em>2.開催日</em><span class="unnamed1">平成 18年 9月 7日(木)</span><br>
<em>3.募集人数</em>大人45名 (子供、小中高生は除く)<br>
</div>
</div>
</body>
</html>

▲このページのトップに戻る
365267Re:CSSでPタグの内外を修飾する方法テツヤ 2006/08/15-17:35

記事番号365261へのコメント
 Firefoxでは崩れました。対策としては以下の様。
<DIV class="top-disign">
<DIV class="disign-0" style="margin:auto">
<TABLE>
<COL style="width:130">
<TR><TD><B>1.主催</B><TD>町内会
<TR><TD><B>2.開催日</B><TD><B><U>平成 18年 9月 7日(木)</U></B>
<TR><TD><B>3.募集人数</B><TD>大人45名 (子供、小中高生は除く)
</TABLE>
</DIV>
</DIV>

▲このページのトップに戻る
365358Re:CSSでPタグの内外を修飾する方法しん 2006/08/16-08:26

記事番号365267へのコメント
テツヤさんは No.365267「Re:CSSでPタグの内外を修飾する方法」で書きました。


テツヤさんありがとうございます。
私、IE6でFirefoxを持ちませんのでTest出来ませんでした。

試行錯誤でCSSに取り組んでいますが、Tableのよるレイアウトは
避ける方向を推奨されているので、その方向で試行錯誤しています。

本当はTableで創る方が現在の私には楽で、また表示は安定している様な気がしますが。

まだ、テツヤさんご指摘の事項は対処していませんが、参考までに、<body>部分を掲載します。

<body bgcolor="#FFFFFF">
<h1><font color="#0000FF">回 覧<br></h1>
<div class="top-disign">
<div class="disign-0">
<div class="disign-1">至急回覧</div>
<div align="right">平成18年8月5日<br>
町内会</div>
<div class="disign-2">・・・ 動く市政教室のご案内 ・・・</div>
<em>1.主  催</em>町内会<br>
<em>2.開 催日</em><span class="unnamed1">平成 18年 9月 7日(木)</span><br>
<em>3.募集人数</em>大人45名 (子供、小中高生は除く)<br>
<em>4.会  費</em>施設見学料  鉄道資料館  100円<br>
                     県立植物園  480円<br>
           <u>  昼 食 代           1,000円  </u><br>
                         合計 1,580円<br>
              ※ 朝の集合時点で徴収いたします。<br>
<em>5.乗り物</em>全行程新潟市の「市政バス」</br> <em>6.申込締切日</em>平成18年8月31日(木)<br>
              ※ 参加希望者は別紙の申込用紙に必要事項<br>
                を記入して班長へ提出願います。<br>
<em>7.集合場所<br>
  集合時間</em> <span class="unnamed1">フジミショッピング前 午前9時15分</span></br> <em>8.行 程<br>
  (予定)</em>旧新津市にある施設を見学いたします。</br>
<div class="unnamed3">09:15 集合 フジミショッピング前</div>
<div class="unnamed3"> 09:30 出発    〃<br>
10:10 着 (1) 新津鉄道資料館 (見学1時間) </div>
<div class="unnamed3"> 11:10 発<br>
11:30 着 (2) 石油の世界館、観光物産館、(見学・昼食2時間) </div>
<div class="unnamed3"> 13:30 発<br>
13:45 着 (3) 県立植物園 (見学1時間) </div>
<div class="unnamed4"> 14:45 発<br>
15:30 着 フジミショッピング前解散</div>
<em>9.施設概要</em> </br>
<div class="unnamed3"> (1) <a href="http://www.city.niigata.niigata.jp/info/niitsu-mgr/railoil/rail/siryou/" target="_blank">新津鉄道資料館</a><br>
    鉄道の町と言われた新津。鉄道のあらゆる分野を網羅<br>
    した資料館で21の展示室が設けられている。 </div>
<div class="unnamed3"> (2) <a href="http://www.city.niigata.niigata.jp/info/niitsu-mgr/railoil/oil/kouen/kouen.html" target="_blank">石油の世界館</a><br>
    石油の資料と石油を掘り出す道具の展示など、<br>
    石油利用に関する資料を展示 </div>
<div class="unnamed4"> (3) <a href="http://botanical.greenery-niigata.or.jp/" target="_blank">新潟県立植物園</a><br>
    高低差15mの滝と550種の多様な植物を有する<br>
    熱帯植物園と季節の植物園の2っの温室がある。 </div>
<em>10.その他</em> </br>            ・全行程でアルコールの飲酒は出来ません。<br>
           ・新潟市の職員が同行します。<br>
<em>11.問い合わせ</em>町内会長</br> </div>
</div>
<p align="right">これより前に発行された回覧を見る場合<b><a href="K_main_kairan_7.htm">ここを</a></b>クリックして下さい。</p>
</body>


A1.本ページは参考になりましたか? 又はアドバイスがありますか?
解決 参考になった 参考にならなかった アドバイスする

A2.何度目の訪問ですか?
初めて来た   数度目(2〜4) 5回以上来ている   管理人:

A3.何か一言どうぞ(アドレスは書くことができません)

A4.アドレスがあればどうぞ(1つまで)


↑↑↑↑よろしければ押してください↑↑↑↑

何か一言(本ページで参考になったならないを含めて残してあります)
◎:解決 ○:参考になった ×:参考にならなかった !:アドバイスあり

参考回数投稿日時何か一言