インデックスの設定

質問

現在、インデックス項目をリストでつくっています。
擬態てんには次に用になっています。

ＡＡＡ　　　　　　　　ＢＢＢ　 CCC　　
　ああああああ　　 あああ ああ
　いいいいい　　　　いいい　　　　いいい
　ううううう　　　　　　うううううう　　ううううう

ＡＡＡ，ＢＢＢ，ＣＣＣの部分を強調表示したいのでうすが、
現在これをＣＳＳにて表示しています。

ＡＡＡ以下の部分は現状で良いでなでしぃうあぁ。
それとも<strong>タぐに変更した方いいにでしょうか。
どれとも <h２>タぐの方が適切なんでしょうか？

皆様も意見をお待ちして居ります。

回答No.5

ORUKA1951 · ベストアンサー

＞自然科学、政治、経済でそれぞれ違う分野だと思ったんですが、
＞それでも、この部分もリストにした方がいいんでしょうか？
　あくまでインデックス・・ナビゲーションのためのリストですから、リストでマークアップしたほうが良いでしょう。

＞私としてはリンクの見出しは重要と思っているのですが、
＞その場合、下記の用法は認められるんでしょうか？
＞<li><strong>自然科学</strong>
　いいえ、リストで重要なのは、階層が上位のものです。strongは、段落中の特別な文字列(インライン要素)を他と区別する=HTMではフレーズ要素のうち、<strong>強調</strong>されるものです。<strong>HTML5では、「文章を強調するもの」に変わります。</strong>

　［リストで重要なのは、階層が上位のもの］具体的には、下記のようにマークアップされていれば、二階層目より一階層目が重要だとわかります。
<div class="nav">
＿<ol>
＿＿<li>自然科学
＿＿＿<ul>
＿＿＿＿<li><a href="">物理</a></li>
＿＿＿＿<li><a href="">化学</a></li>
＿＿＿＿<li><a href="">生物</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li>政治
＿＿＿<ul>
＿＿＿＿<li><a href="">政治史</a></li>
＿＿＿＿<li><a href="">行政</a></li>
＿＿＿＿<li><a href="">自治</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li>経済
＿＿＿<ul>
＿＿＿＿<li><a href="">国際経済学</a></li>
＿＿＿＿<li><a href="">数理経済学</a></li>
＿＿＿＿<li><a href="">環境経済学</a></li>
＿＿＿＿<li><a href="">経済史</a></li>
＿＿＿</ul>
＿＿</li>
＿</ol>
</ol>
だとすると、スタイルシートは
div.nav{width:70%;margin:0 auto;}
div.nav ol,div.nav ul,div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.nav ol li{width:33%;float:left;font-weight:bold;font-size:1.2em;}
div.nav ol li li{float:none; width:100%;font-weight:normal;font-size:0.8em;padding-left:2em;}
だけの簡単なものでよい。

　検索エンジンや、スタイルシートを読まないユーザーエージェント・・であっても、階層のあるインデックス(索引)だと理解できる。

　大事なことは、どう見せるかはスタイルシート、文書の構造はHTMLだと完全に分けること。そうすれば先で、このリストを縦に並べたくなったら、
div.nav{width:30%;position:fixed;top:100px;left:0;}
div.nav ol,div.nav ul,div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.nav ol li{font-weight:bold;font-size:1.2em;}
div.nav ol li li{width:100%;font-weight:normal;font-size:0.8em;padding-left:2em;}

すりゃいいし、プルダウンしたけりゃ
div.nav{width:70%;margin:0 auto;}
div.nav ol,div.nav ul,div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.nav ol li ul{display:none;}
div.nav ol li:hover ul{display:block;}
div.nav ol li{width:33%;float:left;}
div.nav ol li li{float:none; width:100%;font-weight:normal;font-size:0.9em;padding-left:2em;}
すればよい。

　HTMLさえ、きちんと文書構造にしたがってマークアップされていれば、いかようにもデザインできる。

お礼

どうもお手を煩わせて申し訳ありません。
私の寝ぼけまなこから宝物を頂戴しました。

多分、自分の力ではh2にしていたと思います。
修正は週末になりますが、どうも助かりました。

回答No.4

ORUKA1951

>副見出しとして横に３つあり、
>３つともh2タグは変ではないかと悩んでいました。

縦横とか、プレゼンテーションは考えない！！
　文書構造上どうなのかです。
　hは副見出しではなく、見出し(HTML4では2段目の)です。
　しかし、これでは実際の文章に合わないことが多いので、HTML5では、
・sectionは見出しを持つはず
・sectionには一つの見出し(複数あるときはhgroupで囲む。)
・レベルは親要素(section)の階層で決める
と修正されました。

>自分としては副見出しということもあり、強調したいのですが
　その(章のタイトルとしての)意味では見出しではありませんし、強調したいからhも間違いです。
　hは文字サイズを変えたり強調するためではなく、見出しであればhを使ってマークアップすると言うことです。

>strongが推奨のサイトと非推奨のサイトがあり、

　なぜ仕様書を確認しないのですか？
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
EM: 強調を示す。
STRONG: より強い強調を示す。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-STRONG )］より

※ 強調して表示するじゃないですよ。重要だから強調です。

階層のあるインデックス(索引)でしたら、リストでマークアップすべきでしょう。先の例に追加すると
<div class="nav">
　<li>ＡＡＡ
　　<ol>
　　　<li>あああ
　　　<li>いいい</li>
　　　<li>うううう</li>
　　</ol>
　</li>
　<li>ＢＢＢ
　　<ol>
　　　<li>あああ
　　　<li>いいい</li>
　　　<li>うううう</li>
　　</ol>
　</li>
　<li>ＣＣＣ
　　<ol>
　　　<li>あああ
　　　<li>いい</li>
　　　<li>うううう</li>
　　</ol>
　</li>
とマークアップしないと、それぞれの細項目が、親項目に含まれることがわかりません。

HTMLとは、このように文書構造にしたがってマークアップするためのものです。
「大きく表示したい」「目立たせたい」「縦に並べたい」は、プレゼンテーション--表現の問題ですから、HTMLの目的を外れます。それをするのがスタイルシートの役目です。

お礼

どうもご指導有り難うございます。
AAA～CCCの部分もリストとは目が点になりました。

AAAの部分は自然科学、その下にリストで関連項目にリンク。
BBBの部分は政治、CCCの部分は経済で同じ構造です。

自然科学、政治、経済でそれぞれ違う分野だと思ったんですが、
それでも、この部分もリストにした方がいいんでしょうか？

私としてはリンクの見出しは重要と思っているのですが、
その場合、下記の用法は認められるんでしょうか？

<li><strong>自然科学</strong>

回答No.3

noname#158634

「ＡＡＡ，ＢＢＢ，ＣＣＣ」が見出しなら<h2>、ただの強調なら<strong>。
HTMLのタグは見た目じゃなく「意味」によって決めるもの。

お礼

どうもご回答有り難うございます。
日本語が変で平謝りです。

h2って幾つあっても構わないのですね。
それが聞きたかった内容です。
今日勉強するつもりでしたが、勉強になりました。

回答No.2

ORUKA1951

意味が不明なのですが？？？
補足にて、質問の日本語を直して、より具体的にリストのマークアップをお示しください。

たとえば、
<div class="nav">
　<li><a href="/index.html">トップへ</a></li>
　<li><a href="/books/index.html">著書</a>
　　<ol>
　　　<li><a href="/books/program.html">プログラム</a></li>
　　　<li><a href="/books/web.html">ウェブ</a></li>
　</li>
・・とか。実物でなくとも良いです。

Q)それを、表のように表示したい
+--------------+---------------+
|トップへ　　　　　　 |著書　　　　　　　　　|
+--------------+---------------+
|　　　　　　　　　　　 |　　 　　 プログラム|
と表示したいとか。図のほうがよいかな

　超能力者はいません。誰でも質問内容がわかるようにしましょう。

お礼

これは先生にはご迷惑をおかけしました。
私も記憶がすっとんでいてびっくりです。

副見出しとして横に３つあり、
３つともh2タグは変ではないかと悩んでいました。

自分としては副見出しということもあり、強調したいのですが
strongが推奨のサイトと非推奨のサイトがあり、
その辺どうしようかと悩んでいました。

今はCSSにて p タグに font-size で調整しています。

回答No.1

noname#198951

日本語で

お礼

ご免なさい。今チェックして自分でもびっくりです。
確かに悩んではいましたが、質問した記憶がありません。
夢遊病みたいになっていたんでしょうか・・・