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

解決済

質問者：nkmyr
質問日時：2011/08/21 22:07
回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.1

回答者： ORUKA1951
回答日時：2011/08/21 23:10

＞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を作成するポイントは文書構造に従ってきちんとマークアップできているか？です。

この回答への補足

ありがとうございます。
HTMLだけでは横に並べることが出来ず、CSSを使って画像のように横に並べるにはどうすれば良いかアドバイスをお願いします。

補足日時：2011/08/22 00:13

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2011/08/21 23:14

ちょっと修正

<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>
のほうがよいかな

- 0
- 件

通報する

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2011/08/22 13:48

簡単な例です。

他にも色々な方法があるでしょうし、他のマークアップ(子リストを持つリストなら)でも同様に出来るでしょう。
IEやfirefoxのようなスクリーン端末のみの設定です。携帯電話や読み上げブラウザ、展示端末は普通のリストとしてプレゼンテーションされる。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
　で検証済み
　なお、タブは＿に置換してあるので戻すこと

<!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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
こちらも出来上がったとこです。
<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>