番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角に。

お世話になっております。
番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角にしたいのですが、
そのようなことはできるのでしょうか。

ご教授ください。よろしくお願いします。

A 回答 (2件)

HTML5は<li>にvalue属性が持たせれる


http://dev.w3.org/html5/spec/grouping-content.ht …
解釈間違ってるか?
そこで、ついでにSelectorAPIも使ってjavascriptで

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style type="text/css"></style>
</head>
<body>
<ol class="Z_ol">
<li value="1">aaaa<ol><li>xxx</li><li>yyyy</li></ol></li>
<li value="2">bbbb</li>
<li value="3">cccc</li>
<li value="4">dddd</li>
</ol>
<script type="text/javascript">
var Z=["0","1","2","3","4","5"];
var Z_li=document.querySelectorAll(".Z_ol > li");
for (var i=0;i<Z_li.length;i++){
Z_li[i].style.listStyleType = "none";
Z_li[i].insertBefore(document.createTextNode(Z[Z_li[i].value]+"."),Z_li[i].firstChild);
Z_li[i].normalize();
}
</script>
</body>
</html>
    • good
    • 0
この回答へのお礼

できた! すごい!
ありがとうございます。
勉強になりました。
感謝、感謝です。

お礼日時:2010/09/10 07:51

CSSだと漢数字は可能みたいですね。

ただし、対応しているブラウザは必ずしも多くはないようです。
 http://w3g.jp/css/list/list-style-type

当面はシステム的に付番するのはあきらめて、マニュアルで番号を振っていくのが確実では?
あるいは、スクリプトで付番してゆくとか…
    • good
    • 0
この回答へのお礼

早速のご回答、誠にありがとうございます。


>マニュアルで番号を振っていくのが確実では?
承知しました。
全角数字を使う場合は、そのようにしたします。
ご助言ありがとうございました。

お礼日時:2010/09/09 09:56

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Q数字の書き方

数字の書き方(1・4・5・6・7)について質問します。
添付した紙の左側に書いてある数字は、印刷物で見かける数字です。
添付した紙の右側に書いてある数字は、私が普段書く数字の書き方です。

印刷物で見かける数字と私が普段書く数字の書き方では、形がちょっと違います。書類に数字を書く時、
私が普段書く数字の書き方で書いた方がよいですか?

私が普段書く数字の書き方(1・4・5・6・7)は、正しく書けてますか?

細かい質問になりますが、宜しくお願いします。



                

Aベストアンサー

数字は実用的な目的で書かれると仮定します。つまり芸術ではなく、美を追求するものではないとします。そうすると誤解のない字であることが最大の条件になります。そのほかに早くかけるとか、親しめる文字であるとか、いくつかの付帯的な問題はありますが、この際それは無視しましょう。
 そういう条件で見ると質問者の数字は誤解される恐れはなく、「正しくかけている」といえます。
 書類に数字を書く時、
>私が普段書く数字の書き方で書いた方がよいですか?
これは何を聞きたいのか、わかりません。
 もっと左の字に似せたほうがよいかという質問ですか。それなら、その必要はないといえます。
 それとも個性の感じられる字の方が良いかということですか。別に取り立てて特徴があるとも見えないので、その場合もノーです。

Qテーブルタグの中に
  1. を入れても正常に数字が表示されません。

テーブルタグの中に<ol><li>を入れても正常に数字が表示されません。
例えばテーブルの外に<ol>を入れて中に<li>を入れても表示される数字が
全部1になってしまいます。またテーブルの中に<ol>を入れても同じようになってしまいます。どなたか解決法をご存知の方がいらっしゃりましたら、
アドバイスお願いいたします。

Aベストアンサー

一応、こんな感じで打ってみました。

<table border="1"><tr><td>
<ol><li>1行<br>
<li>2行<br>
<li>3行</td></tr></table>

こういう意味で良いのでしょうか…
自分のパソコンで確認した際は、テーブルの中に

1.1行
2.2行
3.3行

と表示されました。
違っていましたら済みません。

Q正式な数字の書き方

普通の数字(アラビア数字?)には、正式な書き方があったとおもうのですが、
それらをまとめたようなサイトはないでしょうか?

正式な書き方とは、3本か4本の線上に数字を書く書き方です。
説明が下手ですみません。よろしくお願いします。

Aベストアンサー

No.2です。
数字が上下に出入りするスタイルは"non-lining figures" というらしいですね。
これは小文字と一緒に使うもので、大文字と混ぜるときはベースラインをそろえるのだと説明がありました。
http://typo.lomo.jp/typo_13.html
http://www.fontsite.com/Pages/RulesOfType/ROT1297.html
http://www.emigre.com/EFoGC.php
http://www.usgennet.org/family/smoot/oldhand/romannumerals.html

質問の意味自体わかっていないので、「それのことだ」とか、「そんなのじゃない」とか、補足をください。

参考URL:http://www.fontsite.com/Pages/RulesOfType/ROT1297.html

Q
  • カテゴリ名

  • でh2の文字を小さくしたい

    H2の文字を小さくしたいと考えていますが、
    スタイルシートでなかなか再現できません。
    下記のように設定していますが間違いがありますでしょうか?

    xxx.html
    <div id="box-cat">
    <ul>
    <li><h2>カテゴリ名<h2></li>
    <li><h2>カテゴリ名<h2></li>
    </ul>
    </div>

    xxx.css
    #box-cat {
    width:200px;
    }

    #box-cat h2 {
    font-size:11px;
    font-weight:normal;
    }


    お力をお貸し下さい。

    Aベストアンサー

    ★そもそも<LI>タグで<H2>タグを使っているのが間違いかもね。
    ・どうして<H2>タグなの?→<LI>タグにいろいろと記述すればよいのでは?
     下に2つの解決策を載せます。どうぞ。

    解決策1:
    #box-cat H2{
     MARGIN:0em 0em 0em 2em; ←ここがポイント!
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』と『xxx.html』はそのままで良い。

    解決策2:
    #box-cat2 LI{
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』はそのままで良い。

    ●xxx.html
    <UL id="box-cat">
    <LI>カテゴリ名
    <LI>カテゴリ名
    </UL>

    ・以上です。これで一様、文字は小さくなりました。→私の環境での結果論!

    Q外国語で数字の「0(ゼロ)」の書き方と読み方を教えて下さい。

    どこの国の言葉でもいいのですが、外国語で数字の「0(ゼロ)」の書き方と読み方を教えて下さい。いろんな種類の「0(ゼロ)」を探しております。宜しくお願い致します。

    Aベストアンサー

    書き方というと、文字の形のことでしょうか?
    …多分違いますね。でも一応書いておきます。

    ゼロは大抵の言語で「○」型をしていますね。
    例外的にアラビア語では「・」で表します。
    また、マラヤーラム語という言語のゼロはσが右に伸びたような形をしているようです。
    あとは「零」。

    読み方では、大抵ヌル系かゼロ系です。
    ロシア語でноль[ノリ], нуль[ヌリ]
    フランス語でZe´ro[ゼロ]
    他には
    ギリシャ語でΜηδε´ν[メーぜン](←"ぜ"は英語のth)
    韓国語で零[ヨン(yeong)]
    中国語で零[リン(ling)]
    など。

    参考URL左下の「他の言語」から各国のゼロの表記が分かります。
    発音は分かりませんがローマ字なら大体想像がつくでしょう。

    参考URL:http://ja.wikipedia.org/wiki/0

    Q
    1. タグにて、こういう風にはできないのでしょうか???

    こんにちは(*- -)(* _ _)
    たびたびお世話になっています。

    今、HTMLを作成中なのですが、
    番号を振るタグで<OL><LI>がありますよね?
    あれだと、

    1. ●●
    2. ●●

    という風に出るのですが、

    1. ●●
     1-1. ××
     1-2. ××
          ×××
     1-3. ×××

    このように、1-1.みたいにはできないでしょうか・・・(T-T)

    ムリっぽいなぁ・。・。・とは思うものの。。。

    もし、「そのタグではムリなのでこうしてみたら?」というのがあれば是非教えてください!!!!

    Aベストアンサー

    それはタグでは無理ですね…。
    下記のようなテーブルを使ってみてはどうでしょう?

    <TABLE BORDER=0>
    <TR>
    <TD>1.</TD><TD COLSPAN=2>●● </TD>
    </TR>
    <TR>
    <TD></TD>
    <TD VALIGN="top">1-1</TD>
    <TD>××</TD>
    </TR>
    <TR>
    <TD></TD>
    <TD VALIGN="top">1-2</TD>
    <TD>××<BR>×××</TD>
    </TR>
    <TR>
    <TD></TD>
    <TD VALIGN="top">1-3</TD>
    <TD>×××</TD>
    </TR>
    </TABLE>

    Q調剤薬局事務に適した数字の書き方とは

     調剤薬局で働くため調剤薬局事務の資格を取るつもりです。
    しかし、最近、知人に調剤薬局で働くためには、資格より調剤薬局で働くのに適した文字があると聞きました。具体的には簿記の資格を持っておられる方、経理の仕事をされている方の様な数字の書き方が必要だと。初めて聞きました。私は決して上手な字を書くとは言えません。その分、丁寧な字を書く事を心がけてはおりますが・・・そこで質問です。やはり調剤薬局事務の仕事をするためには、簿記の資格を持っておられる方、経理の仕事をされている方の様な数字の書き方が必要なのでしょうか。また、その書き方とはどの様なものなのでしょうか。お教え頂ければ幸いです。よろしくお願いします。 

    Aベストアンサー

    医療系の仕事をしています。
    が、そんな話は聞いたことはありません。
    ただ、経理などには文字のかきかたはありましたけど・・・・

    自分が思うに、きちんとだれでも読める字ならありではないかと思います。
    私も自慢できるような字ではないですけど、メモなど残すときはちゃんと
    識別できるような文字を書くように心がけています。
    それでいいと思いますよ。
    調剤など医療系は命にかかわることですし、同じようなお薬はたくさんあります。
    その読みを間違えただけで・・・ぞっとしますね。
    それがなければいいのではと思いますよ。
    レセプトなどはシステムがするので書くことはまずないし…。

    QCSSで、リスト
  • の、アンカー行の、hover された行の、前行・次行の、色を変えたい
  • a:hover {色を指定する指示}
    という指定で、
    hoverしているアンカー行そのものに
    色を付けることまでは
    出来ています。

    しかし、ここで、
    hoverされている隣の
    hover次行をセレクトしようと
    CSSの直接隣接セレクタ(プラス記号)を用いて、
    a:hover + a {色を指定する指示} 
    のように書いてもダメなようでした
    しかも、
    この方法だと
    もし成功しても
    hover行の次行なら選べても
    hover行の前行を選ぶ手段が
    有りませんですしね。

    なので
    hoverされた行の
    前の行も
    次の行も
    選ぶことを可能にするには、

    一旦
    hoverしている当該行が
    リスト内の何番目かをしめす数値
    li:nth-child(数値)
    の数値を何らかの手段で取得して

    その
    数値-1
    数値+1
    を用いた何らかの指定方法で
    hover行の、前行・次行
    をセレクトするような
    セレクタを書かねば
    駄目なのかな??
    と思っています。

    これってCSSで出来ますでしょうか
    それか
    CSSにjavascriptを併用して
    やっと可能でしょうか

    どんなコード(スクリプト)
    になりますでしょう

    どなたか是非
    御指南くださいませ。
    よろしくお願い致します。

    a:hover {色を指定する指示}
    という指定で、
    hoverしているアンカー行そのものに
    色を付けることまでは
    出来ています。

    しかし、ここで、
    hoverされている隣の
    hover次行をセレクトしようと
    CSSの直接隣接セレクタ(プラス記号)を用いて、
    a:hover + a {色を指定する指示} 
    のように書いてもダメなようでした
    しかも、
    この方法だと
    もし成功しても
    hover行の次行なら選べても
    hover行の前行を選ぶ手段が
    有りませんですしね。

    なので
    hoverされた行の
    前の行も
    次の行も
    選ぶことを可...続きを読む

    Aベストアンサー

    ごく簡単なサンプルを。
    ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
     でチェック済みのHTML5+CSS3です。必ず試してください。
    ★タブは_に置換してあるので戻す。
    ★リキッドでデザインされています。
     HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。
    <!doctype html>
    <html>
    <head>
    _<meta charset="utf-8">
    _<title>サンプル</title>
    _<meta name="description" content="">
    _<meta name="author" content="IRUKA">
    _<link rel="stylesheet" href="css/style.css">
    <style media="screen">
    <!--
    html,body{margin:0;padding:0;}
    h1,h2,h3,h4{margin:0;line-height:1.6em;}
    header,section,footer{
    _width:90%;
    _max-width:1000px;margin:0 auto;
    _position:relative;
    }
    header nav{
    _position:absolute;
    _top:100%;
    _left:10px;
    _width:160px;
    _z-index:100;
    }
    header nav ul,header nav ul li{
    _text-align:center;
    _list-style:none;
    _margin:0;padding:0;
    _line-height:30px;
    _position:relative;
    }
    header nav ul,header nav ul li{
    _margin-top:5px;
    }
    header nav ul,header nav ul li a{
    _display:block;
    _width:100%;height:100%;
    _text-decoration:none;
    _z-index:100;
    _position:relative;
    }
    header nav ul li{
    _height:30px;
    _width:100%;
    _border:2px outset gray;
    }
    header nav ul li:hover{
    _background-color:lime;
    _position:relative;
    }
    header nav ul li+li:hover:before{
    _content:"\A";
    _display:block;
    _width:100%;
    _height:100%;
    _position:absolute;
    _top:-39px;
    _left:0;
    _z-index:5;
    }
    section h2,section p,section section{
    _margin:0 180px;
    }
    section{min-height:300px;}
    section section p,section section section{
    _margin:0 10px;min-height:0;
    }
    section aside{
    _position:absolute;
    _top:0;right:0;
    _width:160px;
    _height:100%;
    }
    /* 色づけ */
    header{background-color:rgb(200,255,255);}
    section,header nav{background-color:silver;}
    section section{background-color:white;}
    section aside{background-color:fuchsia;}
    footer{background-color:rgb(255,255,160);}
    header nav ul li{background-color:white;}
    header nav ul li:hover{background-color:lime;}
    header nav ul li:hover+li{background-color:yellow;}
    header nav ul li+li:hover:before{background-color:aqua;}
    -->
    </style>
    </head>
    <body>
    _<header>
    __<h1 id="title">Your title</h1>
    __<nav>
    ___<ul>
    ____<li><a href="/Some">Some</a></li>
    ____<li><a href="/nav">navigation</a></li>
    ____<li><a href="/Products">Products</a></li>
    ____<li><a href="/Books">Books</a></li>
    ____<li><a href="/Links">links</a></li>
    ___</ul>
    __</nav>
    _</header>
    _<section>
    __<h2>A smaller heading</h2>
    __<p>
    ___記事色々
    __</p>
    __<section>
    ___<h3>見出し</h3>
    ___<p>
    ____記事・・・・・
    ___</p>
    __</section>
    __<aside>
    ___<h3>Something aside</h3>
    __</aside>
    _</section>
    _<footer>
    __<h3>A nice footer</h3>
    _</footer>
    </body>
    </html>

    ごく簡単なサンプルを。
    ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
     でチェック済みのHTML5+CSS3です。必ず試してください。
    ★タブは_に置換してあるので戻す。
    ★リキッドでデザインされています。
     HTMLには文書構造しか書かれていないために、あとで自在にデザインは変更できます。またガラケーや印刷用に適用されません。必要ならガラケーや印刷用のスタイルシートを書き足してください。
    <!doctype html>
    <html>
    <head>
    _<meta charset="utf-8">
    _<title>サン...続きを読む

    Q数字の書き方色々

    7に横棒を入れたり、4の横棒をつきださなかったり、9を反対に書いたり、国によって数字の書き方が違いますね。

    それらの一覧できるサイトはないでしょうか。

    自分で探したのですが、うまく見つかりません。

    情報よろしくお願いします。

    Aベストアンサー

    国によって数字(1234567890)の書き方が『違う』ことはありません。全世界共通です。

    実際に手書きで、「7」に横棒を入れるのは、「1」との区別がその人の筆跡(というよりも「クセ」)で混同し易いので、横棒を入れているものです。私の実体験では、フランス人は「1」を、左上部分を大きく(長く)書く傾向にあり、一般日本人の目では「7」のようにも見えます。同国人でも多分同様で、誰かが横棒を入れることを思いつき、これが一般化したものでしょう。しかし横棒つきの「7」は、あくまでも便宜的な区別で『正しい』字ではありません。日本人でもそのように書く人が(まれですが)います。

    「z」の中央にヽを付けるケースも少なくないようですが、これは「2」と区別するためです。

    手書きでは一般化していませんが、「0」(ゼロ)と「O」(大文字のオー)を区別するために、前者に斜線を加えるのも同ケースでしょう。ただ(私の知る範囲で)「1」と「l」(小文字のエル)を区別する便宜的方法は、日本でも欧米でも無いようです。

    古い欧文タイプライターでは、「1」キーが存在せず、小文字のエルや大文字のアイに代えるのが普通でした。「0」も同様です。もちろんその当時、斜線入りの「0」は存在していませんでした。

    「9」の反対、というのは目にした体験がありません。ただ、欧米人は「8」を日本人のようにひと筆で書かず、マル2つで書く人が少なくありません。時として上のマルとしたのマルが離れてしまって、それこそ目をマルくします。ことによると、マルを書いて、その下に棒を引いて「9」にしているので、そのように見えるのかもしれません。

    国によって数字(1234567890)の書き方が『違う』ことはありません。全世界共通です。

    実際に手書きで、「7」に横棒を入れるのは、「1」との区別がその人の筆跡(というよりも「クセ」)で混同し易いので、横棒を入れているものです。私の実体験では、フランス人は「1」を、左上部分を大きく(長く)書く傾向にあり、一般日本人の目では「7」のようにも見えます。同国人でも多分同様で、誰かが横棒を入れることを思いつき、これが一般化したものでしょう。しかし横棒つきの「7」は、あくまでも便宜的な区別で『...続きを読む

    Q

    CSSの質問です。

    <ul>と<li>でリストマークを消すために
    list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

    どちらに設定してもリストマーク消えますけど。
    どちらに設定したら規格上違反とかありますか?

    Aベストアンサー

    整理すると
    <div class="nav">
     <ul>
      <li>
    において、
    div.nav{list-style-type:none;}
     では、リストマークは消えない。
     しかし、
    <div class="nav">
     <ul>
      <li>
       <div>
        <ul>
         <li>
    では、
    div.nav ul{list-style-type:none;}
    で、途中にdivがあっても、リストマークは消えます。

     仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
    【引用】____________ここから
    Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
     ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

     OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

     このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

     listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
     そこで、私は、
    div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
    といったんリセットしてから、様々な指定を付け加えていくことにしています。

     文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

    整理すると
    <div class="nav">
     <ul>
      <li>
    において、
    div.nav{list-style-type:none;}
     では、リストマークは消えない。
     しかし、
    <div class="nav">
     <ul>
      <li>
       <div>
        <ul>
         <li>
    では、
    div.nav ul{list-style-type:none;}
    で、途中にdivがあっても、リストマークは消えます。

     仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
    【引用】____________ここから
    Inheritance will transfer the 'list-style' values fr...続きを読む


    このQ&Aを見た人がよく見るQ&A

    人気Q&Aランキング

    おすすめ情報