- ベストアンサー
箇条書きを飾り枠内に配置して表示させる方法
- 箇条書きを飾り枠内に均等に配置する方法について教えてください。
- 添付のような飾り枠内に箇条書きを配置したところ、1行目が枠の下端に近づいてしまいます。箇条書きを均等に配置して、文章全体が中央に行くようにする方法を教えてください。
- テーブル内の箇条書きを均等に配置して、文章全体が中央に行くようにする方法を教えてください。
- JZ302
- お礼率92% (1106/1202)
- レンタルサーバ・ASP
- 回答数6
- ありがとう数8
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
NO.3.4 naokitaです。 補足への回答。 今回は、NO.4での下部の方法にHTML,CSSを変更済み。 HP内への部分挿入可能。 あとは、各所の違いを見比べて NO.3の方法か、このNO.5部分のどちらかを選択後、微調整して下さい。 急がないのなら、 意味がわかるように細かく追加補足を頂けたら細かく回答出来ますが、 急ぐのなら、部分的に別質問を各たてた方が他者からの回答も付き早いですよ。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>CSSサンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body{ text-align: center;} #table1{ width:654px; margin:0 auto; padding: 10px 18px; background:url(red.gif); text-align:left; border:3px solid #dfe8bd;} #table2{ padding: 32px 15px 20px 60px; background:#e6ffe6 url(tyoutin.gif) no-repeat 568px 32px;} #table2 dl{ width:520px; margin:0; padding:0;} #table2 dt{ font-weight:normal;} #table2 dd{ margin: -1.1em 0 0 4em; padding: 0 0 0.8em 0;} --> </style> </head> <body> <div style="margin:0 auto; width:740px; background:#FFC;"> <!-- 見やすく一旦設置。↑中配置 ↑枠幅 ↑枠内色↑ --> <div> <h1 style="margin-top:0;">タイトル</h1> <h2>H2 見出し</h2> <p>本文 文章 本文 文章 本文 文章 本文 文章 本文 文章 </p> </div> <!-- ■↓ここから↓■ --> <div id="table1"> <div id="table2"> <dl> <dt>日付</dt><dd>○○○○○○○○○○○○○○○</dd> <dt>日付</dt><dd>適切なマークアップを。微調整はCSS各値を変更。</dd> <dt>日付</dt><dd>○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ </dd> </dl> </div> </div> <!-- ■↑ここまで↑■ --> <div> <p>本文 文章 本文 文章 本文 文章 本文 文章 本文 文章 </p> <p>本文 文章 本文 文章 本文 文章 本文 文章 本文 文章 </p> </div> </div> </body> </html>
その他の回答 (5)
- naokita
- ベストアンサー率57% (1008/1745)
naokitaです。 NO.5の補足へ 表示されない画像は、red.gif・tyoutin.gif以外の全画像でしょうか？ red.gif・tyoutin.gifは表示されているのでしょうか？ その２行を元に戻せば全部の画像が表示されるのでしょうか？ 本当に、そこだけの変更（上書き）ですか？ その２行を変更しただけで、画像が非表示なる事は無いはずです！ 試してみましたが、別画像を設置しても表示されますよ。 HTMLの誤記も無いですし、特に特殊な記述はしていません。 ------------------------------------------------ 基本に戻って、画像の表示方法を試してみたり、（フォルダ設定も含め） 別の画像を新規で貼り付け、テスト表示してみたり、 red.gif・tyoutin.gifを <img src="red.gif" alt="レッド.gif"> <img src="tyoutin.gif" width="70" height="90" alt="提灯.gif"> と、別の場所（上下の本文文章内）に表示してみたり。 画像は相対パスか？ red.gif・tyoutin.gifと同じフォルダ内に画像があるのか？ それは、ローカル環境なのか？ ウェブ環境なのか？ 更新（再読み込み）は？ フレーム構造とかCMSやブログではないですよね？ 何か別のところで間違っている可能性があります。 全HTMLや全体のスクリーンショットがあれば判断出来るのですが。 URLやその別画像URLとか。 全体を検証出来ないと、その部分の判断は、ちょっと難しいです。 ついでに、ご自分のHTMLを下記サイトでチェックしてみて下さい。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ここの回答のHTMLをそのままコピペした場合に、、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ↑こう＆＃8203;があったなら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ↑こう削除訂正して下さい。 この質問欄の何かの仕様かバグで＆＃8203;が追加される場合があるようですから。 それでも画像には支障ないはずですが・・・
お礼
ありがとうございました。お蔭様で何とかできました。
補足
いつもすみません。 最初の2行上書きして本当に画像が全部消えました。 教えていただいたチェックサイトでチェックしてみたら、121個のエラーがありましたので、それを改善してみて、またご報告したいと思います。​は追加されていませんでした。
- naokita
- ベストアンサー率57% (1008/1745)
NO.3 naokitaです。 補足への回答。 --------------------------------- #table2{ padding: 32px 15px 2px 60px; background-color:#e6ffe6;} /* 数値が内枠の隙間設定。↑↑↑↑の60pxを変更で左右移動 */ #table2 dl{ width:480px; margin:0; padding:0; float:left;} /* 文章枠の幅。↑↑↑の480pxを変更で文章幅を調整 */ /* これらの枠を大きくしすぎると tyoutin.gif が下に落ちます。 */ ------------------------------------------------------ また、（別な方法としては） 画像が１枚だけなら（先のCSSは画像が複数ある事も考慮した設定） <IMG src="tyoutin.gif" width="70" height="90" alt="*" style="float:right;"> <hr> を削除してから、先のCSSを #table2{ padding: 32px 15px 2px 60px; background:#e6ffe6 url(tyoutin.gif) no-repeat 568px 32px;} と部分変更して 568px 32px の数値を微調整すれば良い。 先のwidth:480px;を同時に大きくしても良い。 この場合には、下幅が狭くなるので、今変更した、 #table2{ padding: 32px 15px 2px 60px; background:#e6ffe6 url(tyoutin.gif) no-repeat 568px 32px;} の 2pxの部分を20px程度に大きくすれば下幅が開く。 ------------------------------------------------------ これで分からなければ、変更しないように。
お礼
ありがとうございました。お蔭様で何とかできました。
補足
丁寧に教えてくださってありがとうございます。 480pxを変更して収まりましたが、HPの途中（前後に記事があるものの途中）に持ってくると、IEの場合、右の雷文枠が何行も出て、幅広になってしまうのです。 基本的なことですみませんが、このソースはこれ単独のページのソースですよね。 既存のHPの中に、この飾り枠部分を入れるのには、ソースの開始と終了はどこからどこまでなんでしょうか。
- naokita
- ベストアンサー率57% (1008/1745)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>CSSサンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body{text-align: center;} #table1{ width:654px; margin:0 auto; padding: 10px 18px; background:url(red.gif); text-align:left; border:3px solid #dfe8bd;} #table2{ padding: 32px 15px 2px 60px; background-color:#e6ffe6;} #table2 dl{ width:480px; margin:0; padding:0; float:left;} #table2 dt{ font-weight:normal;} #table2 dd{ margin: -1.1em 0 0 4em; padding: 0 0 0.8em 0;} #table2 hr{ clear: both; visibility: hidden;} --> </style> </head> <body> <div id="table1"> <div id="table2"> <dl> <dt>日付</dt><dd>○○○○○○○○○○○○○○○</dd> <dt>日付</dt><dd>適切なマークアップを。微調整はCSS各値を変更。</dd> <dt>日付</dt><dd>○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ </dd> </dl> <IMG src="tyoutin.gif" width="70" height="90" alt="*" style="float:right;"> <hr> </div> </div> </body> </html>
お礼
ありがとうございました。お蔭様で何とかできました。
補足
ありがとうございます。tyoutin.gifの左の余白調整（または3行目の末尾の右余白）は、どこでやるのでしょうか。いろいろやってわからないのですが。
- foitec
- ベストアンサー率43% (1080/2457)
これで良いのでは？ 文字列の上に一行挿入し立て配列を「上」にします。 （本当は行数分のセルを作った方が崩れないと思いますが） <TD width="649" height="147" align="left" valign="top" bgcolor="#e6ffe6"> <IMG src="tyoutin.gif" width="70" height="90" border="0" hspace="15" vspace="20" align="right"> <dl> <DD> <br></DD> <DD>日付 ○○○○○○○○○○○○○○○<br><br></DD> <DD>日付 ○○○○○○○○○○○○○○○<br><br></DD> <DD>日付 ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</DD> </dl></TD>
お礼
ありがとうございました。お蔭様で何とかできました。
補足
</DD>は必要なんですね。 前よりよくなったのですが、IEとFireFoxで見え方が違うのですが。IEは枠内１行目上の余白が狭くなるようです。
- fantasyman
- ベストアンサー率48% (83/170)
セル内の余白の事でしょうか？ だとしたら上から16行目の <TABLE bgcolor="#e1e9c2" width="100%" cellspacing="2"> に「cellpadding」を追加し希望の数値の入力すると良いです。 <TABLE bgcolor="#e1e9c2" width="100%" cellspacing="2" cellpadding="ここに数値入力">
お礼
ありがとうございました。お蔭様で何とかできました。
補足
それでやると枠の内側がぐるりと空いてしまい、３行目の下がさらに広くなってしまいます。 枠内の１行目と上枠下端の余白をもう少しあけて、３行目の下の余白と同じくらいにしたいのですが。
お礼
ありがとうございました。お蔭様で何とかできました。
補足
言葉が足りなくてすみません。前後に文章のほか、画像などもあるHPなんです。 それで、指示されている最初の2行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> を、今までの所に上書きしたら、今まで表示されていたいくつかの画像が消え、alt部分しか表示されなくなってしまいました。 飾り枠部分のみ、改善したいのですが、他に影響が及んでしまうので、困っています。