htmlでリストの記号を(a)、(1)のような丸括弧付きの文字にするにはどうしたらよいでしょうか。例えば、次のようにしたいのです。
(1)○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○○。
表を使えばできるというのは分かるのですが、表に入れてしまうと文章を修正したときに正しく折り返されるように1行の文字数を調整しなければならないのでそれも面倒です。文章を修正しても文字数の調整などを必要としない、表以外の、何かいい方法はないでしょうか。
padding、ol、liを用いて丸括弧の付かないただの記号を用いて上の図のように配置する方法は
http://oshiete1.goo.ne.jp/qa3015526.html
で教えていただきました。
No.5ベストアンサー
- 回答日時:
これでいかがでしょうか?
わたしも同じ要望を持っていたのですが、あるサイトのソースで下記を見て、なるほど~と思いました。
ブラウザの幅をせばめて見てください。また、数値は半角がお好みの場合は、適宜数値を調整してください。
<html>
<head>
<style type="text/css">
div {
text-indent:-2em;
margin-left:3em
}
</style>
</head>
<body>
<div>(1)○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</div>
<div>(2)×××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××××</div>
</body>
オ、オーっ!!
何とーーーっ!!
やった!!
text-indentはタグ辞典を見ても載っておらず素人には意味が分かりませんが、この際理屈はさておいて、完璧です!!
有り難うございました!!!
No.4
- 回答日時:
( ) と書いた画像を用意してbackground-imageとbackground-positionで指定すれば括弧付き数字に見えるかもしれません。
文字サイズを変えれば奇妙なことになるかもしれませんが、
IEはフォントサイズを固定できますから、IEのみ画像で対応、という風にすればあるいは。
でなければ、テーブルにして自分で(1)(2)と入力するしかないのではないでしょうか。
それはそうとこの文を読んでませんでした。
> 正しく折り返されるように1行の文字数を調整しなければならないのでそれも面倒です。
もし折り返し位置を指定したいのなら、
<nobr>で行けるかもしれませんが、<ol>や<ul>の方法は使えません。
文字サイズを<font size="3">などで固定し、テーブルを使ってwidth指定するしかないと思います。
IE限定ですが、改行位置も固定されると思います。
> 横罫線のすぐ上の文字行とすぐ下の文字行との間隔が、罫線がない場合の文字行の間隔に比べて少し大きくなることですが、
スタイルシートで狭めて下さい。
この回答への補足
画像はやはり使いにくいと思うので文字だけで行きたいと思います。
でも、丸括弧付きはやっぱり無理なんですね。
表(=丸括弧付き)を取るか丸括弧無し(=丸括弧のない数字やアルファベット)を取るかとなると、素人だし、あまり難しいのは分からないしで、丸括弧無しを取ります。本当は丸括弧付きにしたいんですが...。
有り難うございました。
No.3
- 回答日時:
すみません、Netscape8.1.2でした。
8.1.3にバージョンアップしましたが表示は変わらずですね。
HTMLやスタイルシートの問題ですから、このカテゴリーよりも、
[技術者向] コンピューター > プログラミング > HTML
で質問された方が、より詳しい方からの回答が得られると思います。
OKWaveでは http://okwave.jp/c252.html ですが、
教えてGOOなど、提携サイトご利用ならカテゴリーメニューをたどってください。
No.2
- 回答日時:
なんとか出来ました。
自分も使いそうなデザインなので。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適用なハックってあるんですかねぇ。。。
この回答への補足
早速の御回答有り難うございます。
IEとSafariでは通常のリストの表示なんですね。私はIEなんですがやはり普通の「1.」のような記号になります。(残念!!!)
IEでも括弧付きになるようにはできないでしょうか。IEを使っている人が多いと思うのでIEで見れるようにしたいのですが...。
無理をお願いしてすみません。
No.1
- 回答日時:
テーブル(表)が使えるのなら↓これではダメですか?
<table>
<tr><td>(1)</td><td width="400">○○○○○○○○○○○○○○○○○○○○○○○○○</td></tr>
<tr><td></td><td>○○○○○○○○○○○○○○○○○○○○○○○○○</td></tr>
<tr><td></td><td>○○○○○。</td></tr>
</table>
これだと正しく折り返せますし文字数の調整の必要もありません。
この回答への補足
早速の御回答有り難うございます。
お教えの方法でうまくいきますした。
少しだけ気になるのが、横罫線のすぐ上の文字行とすぐ下の文字行との間隔が、罫線がない場合の文字行の間隔に比べて少し大きくなることですが、これは致し方ないんでしょうか...。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/06/15 14:11
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/04/21 08:59
- オープンソース csvデータのダブルクォーテーションで囲まれた文字内にあるカンマを削除したい 3 2022/09/02 15:17
- Java Java 南京錠 2 2023/02/04 11:46
- Excel(エクセル) エクセルの数式で教えてください。 2 2023/03/09 10:07
- フリーソフト フォルダ、ファイル名の一括変換について 3 2023/03/16 09:23
- Word(ワード) Word文書で1,2,3...になっている脚注を、一括で(1),(2),...といった括弧つきに変更 2 2023/03/03 21:27
- Excel(エクセル) 【Excel】住所に郵便番号を付記する方法 3 2022/05/07 17:15
- Excel(エクセル) エクセルの数式について教えてください。 7 2023/06/18 10:16
- その他(形式科学) モル濃度 計算 質問 2 2023/06/02 16:43
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
td要素内のdiv要素をセンタリン...
-
テーブルの一部分のセルだけに...
-
Firefoxを使ってるのですがズー...
-
formのinputなどの幅100%指定
-
divで囲んだ文字が消える
-
Tableタグ内のspan styleが適応...
-
vbscriptで時計を作りたい
-
HTMLでテーブルタグ<table>を使...
-
テーブルの線を点線にする
-
Tableタグで作成した表の縮小
-
リストの記号を括弧付きの文字...
-
テーブル内のテーブルの高さを...
-
スタイルシートでpaddingを使う...
-
テーブル内に棒グラフを作る方法
-
Visual Studio で CLR 開発でデ...
-
自身のHPにYouTube動画を貼り付...
-
縦書きのテーブル
-
td width="180" と固定してるの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
特殊文字の検索方法
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
td要素内のdiv要素をセンタリン...
-
Tableタグ内のspan styleが適応...
-
テーブル内のテーブルの高さを...
-
formのinputなどの幅100%指定
-
divで囲んだ文字が消える
-
cssで、テーブルのtdの中の文字...
-
vbscriptで時計を作りたい
-
HTMLのテーブルでそれぞれの大...
-
td width="180" と固定してるの...
-
同じwidth=200でもセル内の文字...
-
ブラウザによってテーブルのセ...
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
<img>タグにCSSのclass設定可能?
おすすめ情報