ベストアンサー

タイトルの横にサブタイトルが並ぶ

2011/08/21 22:07

画像のように、タイトルの横にサブタイトルを4つ位並び、その横にも同じように並ぶようなHTMLはどのようにすれば良いのでしょうか？宜しくお願いします。

nkmyr
お礼率67% (403/600)

HTML
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/22 13:48 回答No.3

簡単な例です。　他にも色々な方法があるでしょうし、他のマークアップ(子リストを持つリストなら)でも同様に出来るでしょう。 IEやfirefoxのようなスクリーン端末のみの設定です。携帯電話や読み上げブラウザ、展示端末は普通のリストとしてプレゼンテーションされる。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　で検証済み　なお、タブは＿に置換してあるので戻すこと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen">  ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="nav"> ＿＿<ol> ＿＿＿<li><a href="./profile.html">COMPANY PROFILE<br></a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="./profile.html#profile">会社概要</a></li> ＿＿＿＿＿<li><a href="./profile.html#chart">組織図</a></li> ＿＿＿＿＿<li><a href="./profile.html#policy">企業理念</a></li> ＿＿＿＿＿<li><a href="./profile.html#content">事業内容</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li><a href="./location.html">LOCATION<br></a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="./location.html#main">本社所在地</a></li> ＿＿＿＿＿<li><a href="./location.html#sub">事業部所在地</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿</ol> ＿</div> </body> </html>

質問者

お礼 2011/08/22 14:12

ありがとうございます。こちらも出来上がったとこです。 <div style="width:800px; height:100px;"> <ol> <li><a href="./profile.html">PROFILE<br> </a> <ul style="position:absolute; margin:-15px 0 0 80px;"> <li><a href="./profile.html#profile">会社概要</a></li> <li><a href="./profile.html#chart">組織図</a></li> </ul> <ul style="position:absolute; margin:-15px 0 0 180px;"> <li><a href="./profile.html#">企業理念</a></li> <li><a href="./profile.html#">事業内容</a></li> </ul> </li> <li style="position:absolute; left: 400px; top: 20px;"><a href="./location.html">LOCATION<br> </a> <ul style="position:absolute; width:150px; margin:-20px 0 0 80px; "> <li><a href="./location.html#main">本社所在地</a></li> <li><a href="./location.html#sub">事業部所在地</a></li> </ul> </li> </ol> </div>

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/21 23:14 回答No.2

ちょっと修正 <div class="nav"> ＿<ol> ＿＿<li><a href="./profile.html">PROFILE<br></a> ＿＿＿<ul> ＿＿＿＿<li><a href="./profile.html#profile">会社概要</a></li> ＿＿＿＿<li><a href="./profile.html#chart">組織図</a></li> ＿＿＿＿<li><a href="./profile.html#">企業理念</a></li> ＿＿＿＿<li><a href="./profile.html#">事業内容</a></li> ＿＿＿</ul> ＿＿</li> ＿＿<li><a href="./location.html">LOCATION<br></a> ＿＿＿<ul> ＿＿＿＿<li><a href="./location.html#main">本社所在地</a></li> ＿＿＿＿<li><a href="./location.html#sub">事業部所在地</a></li> ＿＿＿</ul> ＿＿</li> ＿</ol> </div> のほうがよいかな

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/21 23:10 回答No.1

＞HTMLはどのようにすれば良いのでしょうか？　タイトルやサブタイトルには見えないのですが？？？。ナビゲーションリンクではないかと見受けます。　すなわち、HTMLは <div class="nav"> ＿<ol> ＿＿<li><a href="./profile.html">PROFILE</a> ＿＿＿<ul> ＿＿＿＿<li><a href="./profile.html#profile">会社概要</a></li> ＿＿＿＿<li><a href="./profile.html#chart">組織図</a></li> ＿＿＿＿<li><a href="./profile.html#">企業理念</a></li> ＿＿＿＿<li><a href="./profile.html#">事業内容</a></li> ＿＿＿</ul> ＿＿</li> ＿＿<li><a href="./location.html">LOCATION ＿＿＿<ul> ＿＿＿＿<li><a href="./location.html#main">本社所在地</a></li> ＿＿＿＿<li><a href="./location.html#sub">事業部所在地</a></li> ＿＿＿</ul> ＿＿</li> ＿</ol> </div> のようになります。HTMLは、その部分がHTMLにおいてどのような構成要素であるかを、正しくマークアップしてください。　このように、文書構造にしたがってきちんとマークアップさえされていれば、CSSで好きなようにデザインしてください。(好きなようにデザインできます。)・・横だろうが縦だろうが、プルダウンだろうが・・ ★HTMLを作成するポイントは文書構造に従ってきちんとマークアップできているか？です。

質問者