html5のnavに２つのspan要素を入れるには

質問

html5のnavに２つのspan要素を入れる場合にはどうしたら良いのか教えてください。

Webサイトを作成していて下記のようなレイアウトにしたいと思っています。

理想：

　↓nav local-navigation
＿＿＿＿＿＿＿＿＿＿＿＿＿
｜　　　｜＿＿＿目次＿＿＿｜←　p table-of-contents-title
｜　表　｜ 　　　　　　　 ｜
｜　紙　｜　　　　　　　　｜← span table-of-contents-list
｜　　　｜　　　　　　　　｜
￣￣￣￣￣￣￣￣￣￣￣￣￣
　↑span book-cover

現実：

＿＿＿＿＿＿＿＿＿＿＿＿＿
｜　　　｜　　　　　　　　｜
｜　表　｜　　　　　　　　｜
｜　紙　｜　　　　　　　　｜
｜　　　｜　　　　　　　　｜
￣￣￣￣￣￣￣￣￣￣￣￣￣
＿＿＿＿＿＿＿＿_
｜＿＿＿目次＿＿＿｜
｜　　　　　　　　｜
｜　　　　　　　　｜
｜　　　　　　　　｜
￣￣￣￣￣￣￣￣￣

理想は1つのnav　local-navigation内の左側にspan book-coverを配置して、
右側上部にp table-of-contents-title、下部にspan table-of-contents-listを配置するレイアウトにしたいですが分離されて表示されていました。

色々、試行錯誤した結果、現在はnav local-navigationは見えなくなって（どこにいったか分からない）・・・

background-coler:#a8a8a8;にしても見える場所にない・・・

表紙のspan book-coverも行方不明。

目次のp table-of-contents-title、span table-of-contents-listが見えている状況に悪化してしまいました。

収拾がつかなくなったのでどうしたら良いかご教授頂きたいです。

現在のHTMLとCSSを添付しておきます。よろしくお願いします。

HTML
<nav id="local-navigation">
<span class="book-cover"></span>
<span class="table-of-contents-list">
<p id="table-of-contents-title">目次</p>
<ol>
<li id="even">順序リストの項目1</li>
<li id="odd">順序リストの項目2</li>
<li id="even">順序リストの項目3</li>
<li id="odd">順序リストの項目4</li>
<li id="even">順序リストの項目5</li>
<li id="odd">順序リストの項目6</li>
<li id="even">順序リストの項目7</li>
<li id="odd">順序リストの項目8</li>
<li id="even">順序リストの項目9</li>
<li id="odd">順序リストの項目10</li>
<li id="even">順序リストの項目11</li>
<li id="odd">順序リストの項目12</li>
<li id="even">順序リストの項目13</li>
<li id="odd">順序リストの項目14</li>
<li id="even">順序リストの項目15</li>
</ol>
</span>
</nav>

CSS
/* ↓ローカルナビゲーション↓ */

#local-navigation {
position:relative;left:15%;
width:70%;
}

#book-cover {
height: 220px;
background-color:a8a8a8;
background-image: url("book-cover.png");
background-repeat:no-repeat;
border-radius:11px 11px;
}

/* ↑表紙↑ */

/* ↓目次↓ */

#table-of-contents-title {
background-color:#aa0000;
font-size: 24px;
text-align: center;
width: 100%;
color:#bbbbbb;
}

span.table-of-contents-list ol{
width: 100%;
}

span.table-of-contents-list li{
position:relative;left:-40px; top:-24px;
list-style-type: none;
}

#even {
background-color:#a7a7a7;
}

#odd {
background-color:#787878;
}

#even:hover {
background-color:#aa0000;
}

#odd:hover {
background-color:#aa0000;
}

/* ↑表紙と目次↑ */

/* ↑ローカルナビゲーション↑ */

回答No.7

ORUKA1951 · ベストアンサー

横から
＞タグを並べる順番なんてものがあるんですか。
簡単なのは、要素索引・・　HTML4.01なら、http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/index/elements.html
ここでh1をとたどると
<!ELEMENT (%heading;) - - (%inline;)* -- heading -->
と書かれています。意味は
<!要素 (%ヘッディング;) 開始タグ-(省略不可) 終了タグ-(省略不可) (行内要素)*ゼロ個以上 -- 意味heading -->
と書かれています。すなわち、内部には行内要素がゼロ個以上しか入らない。

spanは同様に
<!ELEMENT SPAN - - (%inline;)* -- generic language/style container -->
<!要素名 SPAN 開始タグ終了タグ省略できない 行内要素がゼロ個以上　汎用の言語、スタイルコンテナだよ。
　と書かれている。

　どのタグ辞典にも必ず書いてなければなりません。書いてなきゃタグ辞典とはいいません。

　もっと簡単なのは、Lintの文法一覧 Another HTML-lint 5 ( http://www.htmllint.net/html-lint/tagslist.cgi?HTMLVersion=HTML40-Strict ) とか
ここで、
Attributes　持ちうる属性
Contents　　含みうる要素
Parents　　　親になるはずの要素
が書かれている。

　いずれにしてもまず小さなHTMLを書いては、
Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　で、[DATA]タブから、チェックする。わからないときは、仕様書を読んでみる。

　それからはじめましょう。

No.5のHTMLなら
header{
position:relative;
min-height:220px;width:70%;margin:0 auto;
background-color:aqua;
}
header h1,header p{margin:0 60% 0 5px;}
header nav{
position:absolute;top:0;right:0;width:60%;
text-align:center;line-height:2em;
background-color:white;
}
header nav ol,header nav li{display:block;list-style-type:none;margin:0;padding:0;}
header nav ol{width:80%;margin:0 auto;}
header nav li{background-color:silver;border:solid 1px gray;}
header nav li+li{margin-top:5px;}
header nav li:nth-child(2n){background-color:lime;}
とかですむはず。
　チャカチャカとキーボードで打っただけでチェックしてません。

回答No.9

神崎 渉瑠（@taloo）

すこし時間が経ってますが。

>No.6お礼
http://www.htmq.com/htmlkihon/005.shtml

HTML5については種類が多く複雑ですが、
基本はフレージングコンテンツの中にほかのコンテンツを入れる事は出来ない、と覚えておけば問題にはならないと思います。
（例外はありますが、あくまで例外として、使わなければ問題になりません。）
http://www.htmq.com/html5/007.shtml

他の方も書いてらっしゃいますが、spanの中にpやolを入れる事が無理なので、質問文にある希望動作をさせる事はできません。
divで書き直すなどしてください。

回答No.8

DrFell

すごく不思議なのですが、なぜ「span」なのですか。spanは汎用インライン要素。でも、でも、でも、使い方をみるとどう見てもブロックレベル要素の使い方ですよね？spanにこだわる理由を教えていただくと、適切なアドバイスができるかもしれませんね。

この違いを把握していますか？html5ではインライン・ブロックレベルの既定は無くなりましたが、それに変わる要素に入る要素が既定されています。html4までのインライン・ブロックレベルの理解で大筋はいけるので、そちらを勉強されてはいかがでしょうか？

性質が全く違います。使えるプロパティも違ってきます。
汎用インラインのspanと汎用ブロックレベル要素のdivで違いを視覚的に見てみてください。他にも、marginやpaddingのとり方や、widthやheightが効く効かないなど、違いますので、cssの基本として把握して置かれたほうが今後いいと思います。以下をコピペして、html4でも5でも構わないので表示させてみてください。

<span style="border:1px solid red;background:#ffdddd;line-height:2em;">spanは汎用インライン要素です。行内の要素として設定されています。つまり罫で囲っても、このように文字列に対してつきます。2行になってはならないとは決まっていませんが、思われているのと違いませんか？</span>
<div style="border:1px solid red;background:#ffcccc;">対してブロックレベル要素は、塊として扱われます。この塊を、上記の行内に入れようとしているのがselene2010さんのソースです。塊の中に、行内の要素を入れることは出来ますが、行内に塊を入れようとすると、ブラウザが気を利かして行内を閉じてしまいます（html4）。html5では、インライン・ブロックレベルという縛りはなくなりますが、spanに入れられるものはこれっと、もっと厳格に決まっています。それで、spanにはdivやolは入れられません。</div>

回答No.6

神崎 渉瑠（@taloo）

>No.3
><span><h1>目次</h1></span>これなら正解なのです。
違います。

<h1><span>目次</span></h1>
これなら正解です。（あくまで文法上は。）

<p><span>文章</span></p>
これでも正解です。

<span><p>文章</p></span>
これは間違いです。

<div><p>文章</p></div>
これは正解ですが、

<p><div>文章</div></p>
これは間違いです。

どのタグとどのタグを、どういう順番にしなければならないかというのは、タグ辞典を読んでください。

どの場所に<p>を使わなければならないか、どの場所に<h1>を使わなければならないかというのは、タグ辞典にも書いてある事がありますが、HTML解説書や、国語（日本語）の教科書が参考になると思います。
見出しの場所に段落の目印（タグ）を付けては行けません。見出しには見出しの目印（タグ）を付けることが推奨されます。（文法上は、"しなければならない"）

お礼

回答ありがとうございます。

タグを並べる順番なんてものがあるんですか。

どのタグ辞典がこういう順序を教えてくれますか？

回答No.5

ORUKA1951

＞HTML 4.01仕様書の和訳版を読んで来ます。
　selene2010さんには、何度も何度も説明していますが、デザインをもくろんでHTMLを書いたら絶対にダメです。それがすべての失敗の原因なのですよ。たとえば、HTMLを文書構造だけを記述するものだとすると、たったこれだけ
<header>
　<h2>このサイトの説明</h2>
　<p>記事</p>
　<nav>
　　<h3>目次</h3>
　　<ol>
　　　<li>順序リストの項目1</li>
　　　<li>順序リストの項目2</li>
　　　<li>順序リストの項目3</li>
・・・【中略】・・・
　　　<li>順序リストの項目11</li>
　　　<li>順序リストの項目12</li>
　　　<li>順序リストの項目13</li>
　　　<li>順序リストの項目14</li>
　　　<li>順序リストの項目15</li>
　　</ol>
　<nav>
</header>
　これだけでよいです。それ以外に、idやclassを含めて何を書く必要があるのですか？リンクのターゲットとして必要ならnavにidを振っても良いでしょう。しかしスタイルシートには不要です。

　リスト項目のスタイルを一行おきに変えるのなら、CSS3のnth-childプロパティを使えばよい、CSS2.1の範囲内でなら15行ほど兄弟セレクタを書けば良いです。
headerの最低限の高さをmin-height/relative;で指定して、navはそれを参照してabsoluteさせればよいです。

お礼

回答ありがとうございます。

回答No.4

Tacosan

「1行なのか複数行なのか」は関係ありません.

「ブロックレベル要素の中にインライン要素を入れる」ことはできる (もちろんブロックレベル要素も入れることばできる) が, 「インライン要素の中にブロックレベル要素を入れる」のは不可です... できるやつあったっけ?

ああ, あと #2 でも言われていることですが, 1つの文書の中で同じ値を持つ id属性を複数書いちゃダメです.

お礼

回答ありがとうございます。

回答No.3

too_bad

ということで>>1さんと>>2さんの補足です。

<p>は最小単位のブロックレベル要素であり、<span>はインライン要素です。
学校を例に例えると、<p>は学級全体、<div>が学年全体と仮定します。
<span>はインライン要素ですので生徒のうちの1人の机の中とします。
机の中の隙間に学級は入らないのです。
と言うのが>>1さんの補足になります。
もし入れたいのであれば、ブロックレエル要素ではなく見出しを使って目次を作りましょう。
見出しはhタグです。
<span><h1>目次</h1></span>これなら正解なのです。
と言うのが>>2さんの補足となります。

お礼

回答ありがとうございます。

インライン要素は複数行にはならないということですか？

spanは1行しかダメ？

良く分からなくなってきました・・・

回答No.2

ORUKA1951

spanは行内要素しか含むことができない要素です。
Index — HTML5 ( http://www.w3.org/TR/html5/section-index.html#elements-1 )
HTML4.01の時代から・・
7.5.4要素のグループ化: DIV要素とSPAN要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-SPAN )
<!ELEMENT SPAN - - (%inline;)* -- generic language/style container -->
　　　(%inline)* 行内要素が０個以上と書かれています。

願わくば、HTML5の基礎となるHTML4.01strictをきちんと復習されることを。

　ブラウザは、spanを無視するかもしれません。

出なけりゃスタイルシートは書けません。
★「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )」

<p id="table-of-contents-title">目次</p>
　なら、見だし要素(h1～h6)でマークアップすべきでしょう。
<h2>目次</h2>
　で事足りるはずです。idはむやみに付けたらだめです。
#local-navigation h2{font-weight:normal;font-size:12px;}

　基礎がまったくできていないのに、HTML5に手出しするのは、あまりにも早急すぎます。HTML4.01は死ぬわけじゃなく今後も行き続けますし、なんといっても現行バリバリのウェブ標準です。HTML5の勧告なんて何年もあと・・
　それまでに、HTML4.01strictを正確に身につけましょう。

お礼

回答ありがとうございます。

MDNのエレメント一覧をaからxmpまで読んだだけでは理解出来ていなかったようです。

HTML 4.01仕様書の和訳版を読んで来ます。

回答No.1

Tacosan

問題点の指摘だけですが, span の中に p を入れちゃだめのはず.

お礼

回答ありがとうございます。

インライン要素は全般に<p>は書けないんですか？

それとも<span>のインライン要素だけですか？