このような見出しを作りたいのですが…

[新着] Webテンプレートを仮オープンしました

0   名前： Fumi ： 2006/06/20（火） 03:52  ID:imhjG1an
各素材のページを作っていて、そのタイトルはこういうデザインがいいなと考えたんです。

種類名（左揃え）
――――――――――　←罫線
　　名前（中央揃え）

それで、テーブルを使えば難しくないな、と思ったんですが、
見出し(今回はh3)にしたく、どうしたら出来るかと相談に来ました。
タグは別にh3のみで、ていうことはありません。（というか不可能？）
HTMLとスタイルシートが混ざっても問題ありません(というより無理矢理HTMLで組むよりこっちのほうがいいです)。
どなたかいいアイデアが思い浮かんだら是非教えてください。
1   名前： カヅサツ ◆ThCi95HEzw ： 2006/06/20（火） 03:52  ［URL］  ID:ESXFAM4l
ちょっとイマイチピンとこないです。
文章の具体的なサンプルはありますか？
2   名前： NullPo ： 2006/06/20（火） 03:52  ID:1Bb3RL38
h3？えっと、テーブル使うんですよね？
こんな感じかな？

<table>
<tr>
<th style="text-align:left; border-bottom:1px dashed;">
種類名（左揃え）
<th>
</tr>
<tr>
<td style="text-align:center;">
名前（中央揃え）
<td>
</tr>
</table>
3   名前： ????? ： 2006/06/20（火） 03:52  ID:zxjyFfJJ
<!--左寄せ-->
<h3 style="text-align:left;">▼▼▼</h3>
<hr />
<!--中央寄せ-->
<h3 style="text-align:center;">▽▽▽</h3>
こういった事でしょうか？しかし、これでは全体のBODY(又は、BOX)の横幅を決めてしまわないと　レイアウトとしては　漠然としていますか。
4   名前： カヅサツ ◆ThCi95HEzw ： 2006/06/20（火） 03:52  ［URL］  ID:ESXFAM4l
> っと、テーブル使うんですよね？

いや、使わないんです。
↓

> それで、テーブルを使えば難しくないな、と思ったんですが、
> 見出し(今回はh3)にしたく、どうしたら出来るかと相談に来ました。


5   名前： NullPo ： 2006/06/20（火） 03:52  ID:1Bb3RL38
>>4
本当だ。
ありがとう。

>>0
すごいごめんなさい。
>>2はシカトしてください。
6   名前： Z ◆XTzyosZXcL ： 2006/06/20（火） 03:52  ID:rvat93If
>>0
　一つ確認したいのですが、「見出し(今回はh3)にしたく」とおっしゃる理由は何でしょうか？
　h1〜h6は見出しレベルをあらわすわけで、全体の文章の中で大見出し、中見出し、小見出し、さらに・・・という風に6段階使うわけです。
　h1〜h6を単に「一般的なWebブラウザが文字の大きさを変えて表示するため」、「h3位の大きさで表示させたい」というのでしたら、それはお奨めできる話じゃないと思ったのですが（見出しレベル部分についてはご自分の文章に合わせて訂正してください、という話を付記するのであれば別ですけれど）。

仕様書参考部分：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.5
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

仕様書の読み方など：
http://www.kanzaki.com/works/2001/pub/wsd01.html
7   名前： sasame ： 2006/06/20（火） 03:52  ID:7OaPu6UI
「ある集合の名前(種類名（左揃え）)とその項目(名前（中央揃え）)をテーブルのようなイメージでレイアウトしたい」
っておっしゃってると想像してみます。

なので、「種類名」をH要素で表現しようとしてるのかと思いましたので下のように考えてみましたがどうでしょう？

<div style="width:40%;">
<h3 style="text-align:left;>種類名</h3>
<hr>
<ul style="text-align:center;">
<li>名前1</li>
<li>名前2</li>
・
・
</ul>
</div>


・テーブルを使うようなことをおっしゃっていたのでリストにしてみました。
・ひとつのテーブルでくくれる部分であると思ったのでdivで囲みました。
・divのスタイルは適当です。
・h3によって発生する隙間はスタイルシートで調整できると思います。

想像が間違ってたら適当にスルーしてください。
8   名前： Fumi ： 2006/06/20（火） 03:52  ID:yIwLt9R6
あまり返事が来ないかな、と思いきやいろんな方が書き込んでくださり、ありがとうございます。
>>3
横幅は決まっているので使えると思います。
>>6
もちろん、大きさそろえという目的ではありません。
スタイルシートを使えるぐらいですから、そういう目的ではなくて、別フレームにすでにh1とh2があるからです。
とび番号しなければいくつからはじめても問題ないみたいなので。
（ちょっと言葉の表現が悪かったらごめんなさい。）
他にも参考例を書いてくれた方々ありがとうございます。
色々試してみます。
9   名前： Z ◆XTzyosZXcL ： 2006/06/20（火） 03:52  ID:rvat93If
　済みません、ちょっと意味が分からなかったので確認なのですが、

>>そういう目的ではなくて、別フレームにすでにh1とh2があるからです。
とはどういうお話でしょうか？

　Frameset文書型によるフレーム定義ファイルＡに読み込ませた文書ＢにH1要素とH2要素が既にあるので、文書ＣではH3要素から始めたい、とのことだとすれば、文書Ｂと文書Ｃはそれぞれ独立した文書ですので（フレーム定義ファイルＡにより「一見」一つのように見えるというだけです）、文書Ｃの見出しレベルはやはり１から（H1要素から）定義するのが自然だと思います。

>>とび番号しなければいくつからはじめても問題ないみたいなので。
　確かに今のところ実害はないと思いますが、例えばHTML(XHTML)文書の見出しレベルにより索引生成を自動化してくれるプログラムなどが将来できたとすると、やはり仕様書にそったHTML(XHTML)文書の方が望ましいでしょう（理想として）。

HTML4.01仕様書該当部分：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.5
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

仕様書の読み方など：
http://www.kanzaki.com/works/2001/pub/wsd01.html
10   名前： Z ◆XTzyosZXcL ： 2006/06/20（火） 03:52  ID:rvat93If
　済みません、>>6ですでに仕様書該当部分を示していたことを失念していました。>>9の参考資料は下記に訂正します。

ウェブコンテンツアクセシビリティガイドライン(WCAG)1.0：
http://www.zspc.com/documents/wcag10/#gl-structure-presentation
http://www.w3.org/TR/WAI-WEBCONTENT/#gl-structure-presentation
一覧へ戻る