- ベストアンサー
リストの記号を括弧付きの文字にしたい
htmlでリストの記号を(a)、(1)のような丸括弧付きの文字にするにはどうしたらよいでしょうか。例えば、次のようにしたいのです。 (1)○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○。 表を使えばできるというのは分かるのですが、表に入れてしまうと文章を修正したときに正しく折り返されるように1行の文字数を調整しなければならないのでそれも面倒です。文章を修正しても文字数の調整などを必要としない、表以外の、何かいい方法はないでしょうか。 padding、ol、liを用いて丸括弧の付かないただの記号を用いて上の図のように配置する方法は http://oshiete1.goo.ne.jp/qa3015526.html で教えていただきました。
- piyo_1986
- お礼率83% (874/1053)
- ホームページ作成ソフト
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
これでいかがでしょうか？ わたしも同じ要望を持っていたのですが、あるサイトのソースで下記を見て、なるほど～と思いました。 ブラウザの幅をせばめて見てください。また、数値は半角がお好みの場合は、適宜数値を調整してください。 <html> <head> <style type="text/css"> div { text-indent:-2em; margin-left:3em } </style> </head> <body> <div>（１） ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div> <div>（２） ×××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××</div> </body>
その他の回答 (4)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
( ) と書いた画像を用意してbackground-imageとbackground-positionで指定すれば括弧付き数字に見えるかもしれません。 文字サイズを変えれば奇妙なことになるかもしれませんが、 IEはフォントサイズを固定できますから、IEのみ画像で対応、という風にすればあるいは。 でなければ、テーブルにして自分で(1)(2)と入力するしかないのではないでしょうか。 それはそうとこの文を読んでませんでした。 > 正しく折り返されるように1行の文字数を調整しなければならないのでそれも面倒です。 もし折り返し位置を指定したいのなら、 <nobr>で行けるかもしれませんが、<ol>や<ul>の方法は使えません。 文字サイズを<font size="3">などで固定し、テーブルを使ってwidth指定するしかないと思います。 IE限定ですが、改行位置も固定されると思います。 > 横罫線のすぐ上の文字行とすぐ下の文字行との間隔が、罫線がない場合の文字行の間隔に比べて少し大きくなることですが、 スタイルシートで狭めて下さい。
補足
画像はやはり使いにくいと思うので文字だけで行きたいと思います。 でも、丸括弧付きはやっぱり無理なんですね。 表（＝丸括弧付き）を取るか丸括弧無し（＝丸括弧のない数字やアルファベット）を取るかとなると、素人だし、あまり難しいのは分からないしで、丸括弧無しを取ります。本当は丸括弧付きにしたいんですが...。 有り難うございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
すみません、Netscape8.1.2でした。 8.1.3にバージョンアップしましたが表示は変わらずですね。 HTMLやスタイルシートの問題ですから、このカテゴリーよりも、 [技術者向] コンピューター > プログラミング > HTML で質問された方が、より詳しい方からの回答が得られると思います。 OKWaveでは http://okwave.jp/c252.html ですが、 教えてGOOなど、提携サイトご利用ならカテゴリーメニューをたどってください。
補足
お教えのカテゴリーでも聞いてみます。 有り難うございます。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
なんとか出来ました。自分も使いそうなデザインなので。 DOCTYPEはHTML4.01 Transitional 標準です <style type="text/css"> ol{ margin-left: 1em; padding-left: 2em; } ol li{ list-style-type:none; list-style-position:inside; counter-increment: cnt; } ol li:before{ display: marker; content: "(" counter(cnt) ")"; width: 6em; text-align: center; margin-left:-1em; } /* safari \*/ html:\66irst-child ol li{ list-style-type:decimal; list-style-position:outside; } /* opera */ ;;html:\66irst-child ol li{ list-style-type:none; } /* end */ </style> <!--[if ie]> <style type="text/css"> ol li{ list-style-type:decimal; list-style-position:outside; } </style> <![endif]--> <body> <ol> <li>サブメニュー<br>１－１</li> <li>サブメニュー<br>１－２</li> <li>サブメニュー１－３</li> </ol> </body> CSS2ではcounter-incrementを:beforeの中に併記してもいいようですが、 Firefoxではincrementされませんでしたのでli{}の中に入れています。 Operaではコンソールにdisplay:markerのエラーメッセージが出ますが、 Operaがサポートしていないためで、CSS2の文法上はOKです。 IEとSafariでは:beforeをサポートしていませんので通常のリストの表示です。 SafariはCSSハック、IEはコンディショナルコメントです。 Opera用CSSハックはSafari用が適用されるための対処です。 文法上はNG（ブラウザのバグ利用）ですので、そのうち修正されるかも知れません。Opera9.02で確認。 <ul>でlist-style-type:decimalにすると、marginとpaddingがうまく行きませんでしたので、<ol>を使っています。 うまく調整すれば<ul>でも行けるかも知れません。 Netscape8.2はアウトです。リストの数字が表示されません。 スタイルシートの最後にNetscape用のハックを使えば、、、と思うんですが、 Firefox除外Netscape適用なハックってあるんですかねぇ。。。
補足
早速の御回答有り難うございます。 IEとSafariでは通常のリストの表示なんですね。私はIEなんですがやはり普通の「1.」のような記号になります。（残念！！！） IEでも括弧付きになるようにはできないでしょうか。IEを使っている人が多いと思うのでIEで見れるようにしたいのですが...。 無理をお願いしてすみません。
- calltella
- ベストアンサー率49% (317/635)
テーブル（表）が使えるのなら↓これではダメですか？ <table> <tr><td>(1)</td><td width="400">○○○○○○○○○○○○○○○○○○○○○○○○○</td></tr> <tr><td></td><td>○○○○○○○○○○○○○○○○○○○○○○○○○</td></tr> <tr><td></td><td>○○○○○。</td></tr> </table> これだと正しく折り返せますし文字数の調整の必要もありません。
補足
早速の御回答有り難うございます。 お教えの方法でうまくいきますした。 少しだけ気になるのが、横罫線のすぐ上の文字行とすぐ下の文字行との間隔が、罫線がない場合の文字行の間隔に比べて少し大きくなることですが、これは致し方ないんでしょうか...。
お礼
オ、オーっ！！ 何とーーーっ！！ やった！！ text-indentはタグ辞典を見ても載っておらず素人には意味が分かりませんが、この際理屈はさておいて、完璧です！！ 有り難うございました！！！