重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：piyo_1986
  • 質問日時：
  • 回答数：5件

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

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： litton101
  • 回答日時：

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



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

<html>
<head>
<style type="text/css">
div {
text-indent:-2em;
margin-left:3em
}
</style>
</head>
<body>
<div>（１）○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div>
<div>（２）×××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××</div>
</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

有り難うございました！！！

通報する
お礼日時：2007/05/22 17:37

No.4

  • 回答者： taloo
  • 回答日時：

( ) と書いた画像を用意してbackground-imageとbackground-positionで指定すれば括弧付き数字に見えるかもしれません。


文字サイズを変えれば奇妙なことになるかもしれませんが、
IEはフォントサイズを固定できますから、IEのみ画像で対応、という風にすればあるいは。

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

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

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

この回答への補足

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

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

有り難うございました。

補足日時：2007/05/21 20:02
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： taloo
  • 回答日時：

すみません、Netscape8.1.2でした。


8.1.3にバージョンアップしましたが表示は変わらずですね。

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

この回答への補足

お教えのカテゴリーでも聞いてみます。
有り難うございます。

補足日時：2007/05/21 18:24
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： taloo
  • 回答日時：

なんとか出来ました。

自分も使いそうなデザインなので。
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で見れるようにしたいのですが...。
無理をお願いしてすみません。

補足日時：2007/05/21 18:10
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： calltella
  • 回答日時：

テーブル（表）が使えるのなら↓これではダメですか？



<table>
<tr><td>(1)</td><td width="400">○○○○○○○○○○○○○○○○○○○○○○○○○</td></tr>
<tr><td></td><td>○○○○○○○○○○○○○○○○○○○○○○○○○</td></tr>
<tr><td></td><td>○○○○○。</td></tr>
</table>

これだと正しく折り返せますし文字数の調整の必要もありません。

この回答への補足

早速の御回答有り難うございます。
お教えの方法でうまくいきますした。
少しだけ気になるのが、横罫線のすぐ上の文字行とすぐ下の文字行との間隔が、罫線がない場合の文字行の間隔に比べて少し大きくなることですが、これは致し方ないんでしょうか...。

補足日時：2007/05/21 18:09
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報