例えば、こんな場合でも

<ol>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li>
            <ul>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </li>
        </ol>
      </li>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ol>

こんな場合でも

<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li>
        <ul>
          <li></li>
          <li></li>
          <li>
            <ul>
              <li></li>
              <li></li>
              <li>
                <ul>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ul>
  </li>
  <li></li>
  <li></li>
</ul>

どの階層上のol、ulでも

ulのliには、list-style-typeのdisc(・)が付き、
olのliには、list-style-typeのdecimal(1、2、3…)が付く

cssのシンプルな記述方法を教えて下さい。


何も設定しないと、ulのliが階層によってcircle(○)だったりsquare(■)だったり。

ul liで設定すると、ul内にあるol liが意図しないマークになる。
liのみ設定すると、ulかolのどちらかで意図しないマークになる。

ひょっとしたら、いろんな階層に居る場合を想定した記述方法(ul ol liとか ol ol liとか)
をするしかやり方はないのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (4件)

ul{list-style-type:disc;}


ol{list-style-type:decimal;}
ブラウザの持つスタイルは優先順位最下位です。
1)優先順位
 ユーザーの最重要宣言されたスタイル
  >著者の最重要宣言されたスタイル
   >著者のスタイル
    >ユーザーのスタイル
     >ユーザーエージェントのスタイル
2)継承
 list-style-typeは、liについての指定ですが、継承されるプロパティです。
list-style-type'( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
  ★Inherited: yes

よって、上記の二行で良いです。この場合詳細度はタイプセレクタのみですから、[0 0 0 1]になりますから、必要に応じてセレクタを追加して変更できるでしょう。

 ⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 ⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

 は、list-style-typeなどのプロパティより先に、正確にきちんと身につけるべきです。最低でもこれらについて、プロパティより前に詳しく説明していない参考書やサイトは利用したらダメです。
    • good
    • 0
この回答へのお礼

ORUKA1951さん

ありがとうございます。ホント一番簡単で誰でも思いつきそうな設定で良かったんですね。何で気づかなかったのだろう・・・恥ずかしい・・。

ホントにありがとうございました。

お礼日時:2013/07/02 11:20

>ホント一番簡単で誰でも思いつきそうな設定で良かったんですね。

何で気づかなかったのだろう
 実は、これは仕様書にも明確に書かれているのです。
 ⇒リスト: 'list-style-type'、'list-style-image'、'list-style-position'、'list-style'
  ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
の一番最後に
引用______________ここから
子孫セレクタのみを使うと意図した結果を得られないことがある。 次の文書で考えてみよう:
・・・【中略】・・・
「level2」のリスト項目に'disc'のマーカーを意図している。 しかし、最初の規則はクラスセレクタを含んでいるので、カスケード処理の順序に従うと2つ目の規則が上書きされてしまう。 それに対して、次に示す規則のように子供セレクタを使えば問題は解決する:
・・・【中略】・・・
もう1つの解決法は、'list-style'をリスト種類の要素にのみ設定する方法である:
・・・【中略】・・・
'list-style'の値はOL要素からLI要素へと継承されることになる。
リスト形式を指定するのにはこの方法を用いるよう推奨する。
引用 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで

 仕様書を読むのは、確かに面倒ですが、探せば必要な情報が見つかります。
なお、現行のCSS2.1はこの仕様書(邦訳CSS2.0)からいくつか改訂されています。
 ⇒変更点(CSS2.1 Appendix C 邦訳)( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )
 ⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
もあわせて目を通しておくと良いでしょう。
 セレクタやカスケーディングというCSS(カスケーディングスタイルシート)の根幹を学ばれると、スタイルシートだけではなく、HTMLもとっても簡潔に分かりやすくなります。
    • good
    • 0

No2です。


基本がいかに大事か。
>ul liで設定すると、ul内にあるol liが意図しないマークになる。
 基点となるせれくたがulで、半角スペース(子孫セレクタ)でliが指定してあるため、デフォルトのスタイルでol liにdecimalが指定されていても、ul/olに関わらず、子孫であるliには ul li{}の指定(詳細度0002)が利かなければならない !!はずですよね。

>liのみ設定すると、ulかolのどちらかで意図しないマークになる。
 liはタイプセレクタです。

 とっても単純な事です。これができてないと言うことは、明らかに大事な基礎をすっ飛ばしています。
★なお、詳細度の計算は現行のCSS2.1では変更になっています。
 ⇒6.4.3 Calculating a selector's specificity( http://www.w3.org/TR/CSS2/cascade.html#specificity )
    • good
    • 0

https://www.google.co.jp/search?&q=css+%E5%AD%90 …

ul > li
でul直下のliのみ適用。
ただしIE(7以下だったかな)は対応できないので、結局はごちゃごちゃと指定するかいわゆる「ハック」を使う羽目になると思います。
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

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

Qコンピューターの”階層”と”環境”を英語で言うと?

英語でコンピューターのフォルダの“階層”は何といえばいいのでしょうか?
“これらのファイルはXXXと同じ階層に置いてください”というようなことを伝えたいと思っています。 また、上の階層、下の階層はそれぞれ“Upper, Lower”でいいのでしょうか? 2つ上の階層、3つ下の階層はなんと表現すればいいのでしょうか?

もうひとつ、コンピューターの“環境”(OSやハードウェア、使用ソフトなど)は何といえばいいのでしょうか?
“問題がある場合はそちらの環境を教えてください”というようなことを伝えたいと思っています。

よろしくお願いします。

Aベストアンサー

こんにちわ。
ソフトウェア会社でローカライズをしています。私にとっては日常用語の「階層」です。定訳は「hierarchy」です。
今やっているマニュアルにも、hierarchyっていう単語の
オンパレードです。USのライターがhierarchyと表現しているから、これは間違いありません。

上の階層であれば、hierarchy one level up
下の層であれば、hierarchy one level down

と表現したほうがクリアです。階層の深さはマチマチなので、upperやlowerと漠然と表現するよりも、基準の位置からいったいどれくらい離れている階層なのかを明確に数字で表現したほうが読み手にとっても分かりやすいです。

だから、
2つ上の階層であれば、hierarchy two levels up
3つ下の階層であれば、hierarchy three levels down

でいいと思います。

あと「環境」は、日常生活ではenvironmentですが、
コンピュータの世界でも一緒です。コンピュータの世界には、この手の単語がたくさんあります。日常生活で使われている単語なんだけど、特殊な意味を持つものが。

“問題がある場合はそちらの環境を教えてください”は、

If you have any problems, please let us know what environment you are using.

で十分、通じると思います。

以上、ご参考になればと思います。

こんにちわ。
ソフトウェア会社でローカライズをしています。私にとっては日常用語の「階層」です。定訳は「hierarchy」です。
今やっているマニュアルにも、hierarchyっていう単語の
オンパレードです。USのライターがhierarchyと表現しているから、これは間違いありません。

上の階層であれば、hierarchy one level up
下の層であれば、hierarchy one level down

と表現したほうがクリアです。階層の深さはマチマチなので、upperやlowerと漠然と表現するよりも、基準の位置からいったいどれくらい離...続きを読む

QCSS:

CSS:<ul>と<li>の間に<!--と-->を入れても、Dreamweaverでソースフォーマットの適用をおこなうとソースの改行が自動的に変わてしまうので、ナビゲーションの並びが崩れてしまいます。
適用は必要なので困っております。
ナビゲーションが崩れないほかの方法はないものでしょうか?

Aベストアンサー

> 現象が見られなかったということですが、ごめんなさい、私が間違っておりました。
> リストでGlobalNavigationをつくる場合、横並びにしたときだけ勝手に改行される話でした!
> 今回は縦並びなので関係ありませんでしたね!

えーと…"#hdr-nv li"で"display:inline;"と定義されていますので、「縦並び」にはならない筈ですが?
どうも状況がよく飲み込めませんが、問題があったのは"#hdr-nv"ではなく、別スレッドでポストされている"#nv-global"まわりのことだった、ということでしょうか。

まあいずれにせよ多分 http://oshiete1.goo.ne.jp/qa3900200.html スレッドの方で解決策を得られているかと思いますので、本件は終了ということですね。

蛇足ですが:

> ただ、リストのGlobalNaviを横並びに配置したときは本当になるんです。
> コメントタグをつけて改行無しで<li>から</li>までを記述しないと
> ナビゲーション画像群が途中で改行してしまうんです。
> Dreamweaverの例の処理をしてしまうと、一行で記述していても勝手に改行させて整形されてしまうので問題となる、という話です。

その場合は先程回答した様に、<li>を横並びにする手段を"display: inline;"ではなく(displayは初期値のblockのまま)"float: left;"で置き換えれば、コードの改行の有無(</li>と次の<li>の間でも、<li>とその子要素の<img>の間でも)に関係なく余分な隙間はできなくなりますから、フォーマットの適用をしたとしても問題はなくなると思います。

> 現象が見られなかったということですが、ごめんなさい、私が間違っておりました。
> リストでGlobalNavigationをつくる場合、横並びにしたときだけ勝手に改行される話でした!
> 今回は縦並びなので関係ありませんでしたね!

えーと…"#hdr-nv li"で"display:inline;"と定義されていますので、「縦並び」にはならない筈ですが?
どうも状況がよく飲み込めませんが、問題があったのは"#hdr-nv"ではなく、別スレッドでポストされている"#nv-global"まわりのことだった、ということでしょうか。

まあいずれ...続きを読む

Q【英語】webページの「第二階層」

webページの「第二階層」て何て言うのがふさわしいですか?
two level
second class
・・

色々調べたのですが分からず、教えていただきたくお願いします!

Aベストアンサー

添付辞書の用例で


a second directory hierarchy

•The second directory belongs to a second directory hierarchy which is lower hierarchy than the first directory hierarchy.

第2ディレクトリは、第1ディレクトリ階層よりも下位の第2ディレクトリ階層に属する。


http://www.sophia-it.com/content/%E9%9A%8E%E5%B1%A4%E5%9E%8B%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E9%80%A0

参考URL:http://ejje.weblio.jp/content/directory+hierarchy

Q番号付きリスト(
  1. ・・・
)の数字を全角に。

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

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

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

Aベストアンサー

HTML5は<li>にvalue属性が持たせれる
http://dev.w3.org/html5/spec/grouping-content.html#the-li-element
解釈間違ってるか?
そこで、ついでに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>

HTML5は<li>にvalue属性が持たせれる
http://dev.w3.org/html5/spec/grouping-content.html#the-li-element
解釈間違ってるか?
そこで、ついでに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</...続きを読む

Q英語マニュアルの表現を教えてください

英語マニュアルで、なんて書いてありますか?

Explorerで目的のファイルに階層をたどって行く操作を、ドリルダウンって表現使いますか?

ドロップダウンでしょうか・・・・


どの様に記述されているか教えて下さい。

Aベストアンサー

Drill down until you get to this location: [ディレクトリ]

または

Click to drill down to display [ファイル名].

とかを使うこともあるようです。
きりで穴を開けていく感覚、かなと思います。

選択しなくても次にクリックする場所が操作者にわかっている時のみ使えますので
マニュアルでは「ここをクリックして」「次にここをクリックして」などのように、その都度指示をする方が多いと思います。

QCSSでの

<ul><li>を使用して文章入れても、その文章が長いと改行した時に
文字の始まりから、表示できません。(<li>の背景に矢印等の見出しマークを使用)
見出しマーク+スペース+文字の始まり・・・で改行されても、2行めの始まりが1行目の始まりに合わせて設定する方法をご存じないでしょうか?
よろしくお願いします。

Aベストアンサー

ちょっと、目指している仕上がりがよくわからなかったんですが
text-indent(とpadding)で調整してみては

<style type="text/css">
ul{
list-style-type:none;
border:solid 1px black;
width:8em;
}
li{
border:solid 1px red;
padding-left:1em;
}
li.type2 {text-indent:1em;}
li.type3 {text-indent:-1em;}
</style>


<ul>
<li class="type1">未調整のリスト、一行目と2行目以降が揃います。</li>
<li class="type2">1行目だけ一桁後ろから始まるように調整した例。</li>
<li class="type3">2行目以降を一桁後ろから始まるように調整した例。</li>
</ul>

Qページ丸ごと保存するソフトの設定にある「階層」とは?

Gethtmlや巡集などのソフトの設定にある「階層」の意味が分りません。
1階層、2階層、3階層・・・と階層を増やしていくと具体的になにが変わってくるのでしょうか。漠然と階層を増やすとダウンロードするファイル数が増えるのは分るのですが

1階層、テキスト
2階層、画像  

とかでは無いですよね?

Aベストアンサー

No2です。

> / (区切り)を1階層と考えていいでしょうか
多くの単純なHPだと、そう考えていいです。

ただし、保存ソフトの使い方という面から見ると注意が必要です。
現在のページのリンク先にある、ファイルをターゲットとする場合、
リンク先自体、1階層下にあると、考えてください。

中には、プログラムで他のサーバーから、ファイルを呼び出している場合もあります。
その場合は、階層外となり、保存ソフトでは、ダウンロードできなかったはずです。
(最後の部分は、最近の保存ソフトを使ってないので、追跡機能があるかどうか自信有りません)

QCSSで

.ul {
width: 120px;
height: auto;
float: left;
font: 12;
line-height: 150%;
padding: 0;
list-style-image: url(img/side-tab.gif);
}
.li {
font-size: 12px;
margin-left: 1.5em;
}

<ul class="○○○">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>

このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。
横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。
唯一firefoxだけが思うように表示できました。
IE6と7でも違う表示になりました(IE6だとかなり右寄り)
operaに関しては画像とテキストの縦位置がずれてしまっていました。

CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・
これを一つのCSSできれいに表示することは不可能でしょうか?
どうかよろしくお願致します。

.ul {
width: 120px;
height: auto;
float: left;
font: 12;
line-height: 150%;
padding: 0;
list-style-image: url(img/side-tab.gif);
}
.li {
font-size: 12px;
margin-left: 1.5em;
}

<ul class="○○○">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>

このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。
横幅は185pxまででお...続きを読む

Aベストアンサー

こんにちは

<style type="text/css"><!--
ul {
margin:0px;
padding:0px;
line-height: 150%;
}
li {
padding-left:20px;
background-image:url(img/side-tab.gif);
background-repeat:no-repeat;
width:120px;
font-size: 12px;
}
--></style>

<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>

とか?(幅は140px)
画像が切れるようだったらpadding-left,line-height,widthで調整
幅 = padding-left + width

QSDカードの階層について

 カーナビでSDカードに取り込んだ音楽再生ができません。4階層ではなく、3階層を指定してあげれば良いということですが、階層ってなんですか?階層はどのように表示、変更ができますか?教えてください。

Aベストアンサー

階層というのはフォルダー構造のことです。
何もフォルダーが作られていない状態のとき1階層でここを特にルートと呼びます。

ルートに作られたフォルダーの中が2階層目。
2階層目のフォルダの中に作られたフォルダーの中が3階層目。
以下どんどん深くフォルダーをツリー状に作成していけます。

QCSSでの

初めて質問させて頂きます。仮に作ったサイト名が次の通りです。
http://yusukeinoue.web.fc2.com/271p/271p.html

Firefox、Operaで<#sidenavi>での<ul><li id=n><a>のCSSが間違っているのかimgが表示されないのです。CSSは以下の様な感じで
}
#wrapper #sidenavi ul {
list-style-type: none;
font-size: 10px;
margin: 0px;
padding: 0px;
display: block;
}
#wrapper #sidenavi li a {
display: block;
margin: 0px;
padding: 0px;
height: 30px;
width: 200px;
font-size: 12px;
text-decoration: none;
}
#sidenavi li#1 {
background-image: url(images/bButton1.gif);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 30px;
width: 200px;
}
#sidenavi li#2 {
background-image: url(images/bButton2.gif);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 30px;
width: 200px;

id=liはそのあとも続くのですが、<em></em>で非表示にしています
}
#sidenavi em {
visibility: hidden;
}

使用環境はMacOX10.4.7、DreamweaverMXです。safariでは問題なく表示されます。

参考書籍通りに<ul><li>をボックス化して、インラインにし背景画像を
埋め込むと言う作業でした。
それ以上は書いていないので分かりません。。。
ご教授のほどお願いいたします

初めて質問させて頂きます。仮に作ったサイト名が次の通りです。
http://yusukeinoue.web.fc2.com/271p/271p.html

Firefox、Operaで<#sidenavi>での<ul><li id=n><a>のCSSが間違っているのかimgが表示されないのです。CSSは以下の様な感じで
}
#wrapper #sidenavi ul {
list-style-type: none;
font-size: 10px;
margin: 0px;
padding: 0px;
display: block;
}
#wrapper #sidenavi li a {
display: block;
margin: 0px;
padding: 0px;
height: 30px;
width: 200px;
font-size: 12px;
text-dec...続きを読む

Aベストアンサー

I.Eでは、表示できていません。

 画像で無理な場合は、一度はずして、背景色を適当に指定して、表示されれば画像のデータがアップできていないか、画像までのパスが間違っていると思います。

 見本では、リストテキストが見えませんが、リストのブロック状態になっていますので、背景画像指定だけが問題だと理解します。

 それと、サーバーのデータに、この背景画像がアップされているかも確認する必要があります。

 ちなみに #xx #yy liというのは、
 ID xx の中にある ID yy の●● 
 というように指定方法は間違っていないと思います。
 No.1の方の言うように、数字の前に英字で名前をつける必要があります。
 


人気Q&Aランキング

おすすめ情報