解決済み

リストの記号を括弧付きの文字にしたい

  • 困ってます
  • 質問No.3016470
  • 閲覧数4635
  • ありがとう数3
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 83% (874/1053)

htmlでリストの記号を(a)、(1)のような丸括弧付きの文字にするにはどうしたらよいでしょうか。例えば、次のようにしたいのです。

   (1)○○○○○○○○○○○○○○○○○○○○○○○○○
     ○○○○○○○○○○○○○○○○○○○○○○○○○
     ○○○○○。

表を使えばできるというのは分かるのですが、表に入れてしまうと文章を修正したときに正しく折り返されるように1行の文字数を調整しなければならないのでそれも面倒です。文章を修正しても文字数の調整などを必要としない、表以外の、何かいい方法はないでしょうか。

padding、ol、liを用いて丸括弧の付かないただの記号を用いて上の図のように配置する方法は
http://oshiete1.goo.ne.jp/qa3015526.html
で教えていただきました。

質問者が選んだベストアンサー

  • 回答No.5

ベストアンサー率 49% (58/118)

これでいかがでしょうか?

わたしも同じ要望を持っていたのですが、あるサイトのソースで下記を見て、なるほど~と思いました。
ブラウザの幅をせばめて見てください。また、数値は半角がお好みの場合は、適宜数値を調整してください。

<html>
<head>
<style type="text/css">
div {
text-indent:-2em;
margin-left:3em
}
</style>
</head>
<body>
<div>(1)&nbsp;○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div>
<div>(2)&nbsp;×××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××</div>
</body>
お礼コメント
piyo_1986

お礼率 83% (874/1053)

オ、オーっ!!
何とーーーっ!!
やった!!
text-indentはタグ辞典を見ても載っておらず素人には意味が分かりませんが、この際理屈はさておいて、完璧です!!

有り難うございました!!!
投稿日時 - 2007-05-22 17:37:48
たいせつな将来のこと。あえて、知らない人に聞いてみよう。

その他の回答 (全4件)

  • 回答No.4

ベストアンサー率 44% (1016/2281)

( ) と書いた画像を用意してbackground-imageとbackground-positionで指定すれば括弧付き数字に見えるかもしれません。
文字サイズを変えれば奇妙なことになるかもしれませんが、
IEはフォントサイズを固定できますから、IEのみ画像で対応、という風にすればあるいは。

でなければ、テーブルにして自分で(1)(2)と入力するしかないのではないでしょうか。

それはそうとこの文を読んでませんでした。
> 正しく折り返されるように1行の文字数を調整しなければならないのでそれも面倒です。
もし折り返し位置を指定したいのなら、
<nobr>で行けるかもしれませんが、<ol>や<ul>の方法は使えません。
文字サイズを<font size="3">などで固定し、テーブルを使ってwidth指定するしかないと思います。
IE限定ですが、改行位置も固定されると思います。

> 横罫線のすぐ上の文字行とすぐ下の文字行との間隔が、罫線がない場合の文字行の間隔に比べて少し大きくなることですが、
スタイルシートで狭めて下さい。
補足コメント
piyo_1986

お礼率 83% (874/1053)

画像はやはり使いにくいと思うので文字だけで行きたいと思います。
でも、丸括弧付きはやっぱり無理なんですね。

表(=丸括弧付き)を取るか丸括弧無し(=丸括弧のない数字やアルファベット)を取るかとなると、素人だし、あまり難しいのは分からないしで、丸括弧無しを取ります。本当は丸括弧付きにしたいんですが...。

有り難うございました。
投稿日時 - 2007-05-21 20:02:11
  • 回答No.3

ベストアンサー率 44% (1016/2281)

すみません、Netscape8.1.2でした。
8.1.3にバージョンアップしましたが表示は変わらずですね。

HTMLやスタイルシートの問題ですから、このカテゴリーよりも、
[技術者向] コンピューター > プログラミング > HTML
で質問された方が、より詳しい方からの回答が得られると思います。
OKWaveでは http://okwave.jp/c252.html ですが、
教えてGOOなど、提携サイトご利用ならカテゴリーメニューをたどってください。
補足コメント
piyo_1986

お礼率 83% (874/1053)

お教えのカテゴリーでも聞いてみます。
有り難うございます。
投稿日時 - 2007-05-21 18:24:21
  • 回答No.2

ベストアンサー率 44% (1016/2281)

なんとか出来ました。自分も使いそうなデザインなので。
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>1-1</li>
<li>サブメニュー<br>1-2</li>
<li>サブメニュー1-3</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適用なハックってあるんですかねぇ。。。
補足コメント
piyo_1986

お礼率 83% (874/1053)

早速の御回答有り難うございます。
IEとSafariでは通常のリストの表示なんですね。私はIEなんですがやはり普通の「1.」のような記号になります。(残念!!!)
IEでも括弧付きになるようにはできないでしょうか。IEを使っている人が多いと思うのでIEで見れるようにしたいのですが...。
無理をお願いしてすみません。
投稿日時 - 2007-05-21 18:10:07
  • 回答No.1

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

これだと正しく折り返せますし文字数の調整の必要もありません。
補足コメント
piyo_1986

お礼率 83% (874/1053)

早速の御回答有り難うございます。
お教えの方法でうまくいきますした。
少しだけ気になるのが、横罫線のすぐ上の文字行とすぐ下の文字行との間隔が、罫線がない場合の文字行の間隔に比べて少し大きくなることですが、これは致し方ないんでしょうか...。
投稿日時 - 2007-05-21 18:09:22
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
このやり方知ってる!同じこと困ったことある。経験を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


OKWAVE若者応援スペシャル企画

ピックアップ

ページ先頭へ