No.3ベストアンサー
- 回答日時:
簡単な例です。
他にも色々な方法があるでしょうし、他のマークアップ(子リストを持つリストなら)でも同様に出来るでしょう。
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">
<!--
_div.nav{width:100%;min-width:700px;max-width:1000px;}
_div.nav a{text-decoration:none;width:100%;color:aqua;}
_div.nav ol,div.nav ul,div.nav li{display:block;margin:0;padding:0;}
_div.nav ol{width:100%;}
_div.nav ol li{width:50%;float:left;height:100px;position:relative;font-size:26px;font-weight:bold;line-height:20px;}
_div.nav ol li ul{position:absolute;right:-50%;width:40%;top:0;padding-right:50%;}
_div.nav ol li ul li{font-size:14px;font-weight:normal;height:20px;line-height:20px;}
_div.nav ol li ul li a{color:maroon;}
_div.nav ol li>a[href="./profile.html"]:after{content:"会社概要";font-size:14px;color:black;}
_div.nav ol li>a[href="./location.html"]:after{content:"所在地";font-size:14px;color:black;}
_div.nav ol li ul li a:before{content:"▲";font-size:8px;}
-->
_</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>
ありがとうございます。
こちらも出来上がったとこです。
<div style="width:800px; height:100px;">
<ol>
<li><a href="./profile.html">PROFILE<br>
</a><!-- BRはテキストを追加するため -->
<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><!-- 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>
No.2
- 回答日時:
ちょっと修正
<div class="nav">
_<ol>
__<li><a href="./profile.html">PROFILE<br></a><!-- BRはテキストを追加するため -->
___<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><!-- Aを閉じるの忘れてた -->
___<ul>
____<li><a href="./location.html#main">本社所在地</a></li>
____<li><a href="./location.html#sub">事業部所在地</a></li>
___</ul>
__</li>
_</ol>
</div>
のほうがよいかな
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を作成するポイントは文書構造に従ってきちんとマークアップできているか?です。
この回答への補足
ありがとうございます。
HTMLだけでは横に並べることが出来ず、CSSを使って画像のように横に並べるにはどうすれば良いかアドバイスをお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- YouTube youtubeのTOPページの動画紹介画面の並び方を変えたいです。 1 2023/03/18 09:25
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- Excel(エクセル) マクロ 2行ごとの並び替えについて 4 2022/12/14 12:27
- 幼稚園・保育所・保育園 列の並び方が分からない 3 2022/07/14 18:46
- その他(自転車) 中学生の登下校について 5 2023/06/23 20:06
- その他(SNS・コミュニケーションサービス) ビーチで子供抱きながら横になってる画像の元のやつを探してます 1 2022/11/30 19:25
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- 神社・寺院 神社での初詣でについてです。 お参りするために列を成しているのは、賽銭箱の前に行きたいがために並んで 6 2022/12/01 09:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
css 横並びのナビゲーションバ...
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
ポップアップメニューの作成方...
-
html/cssの、navを2段にする...
-
CSSでの<ul><li>を使った改行設定
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
リストを2つに分割して、それぞ...
-
バーナーヘッダーを固定する方法
-
ol、liをスタイルシートで中央寄せ
-
計算式や注意書きなどの記述は...
-
タイトルの横にサブタイトルが並ぶ
-
文法チェックの<A>と</A>の間が...
-
CSS「table-cell」で横並びにし...
-
ボタンを横に並べて表示させる方法
-
スタイルシートで更新情報をつ...
-
2要素ずつcssを適用する疑似ク...
-
テーブル内のプルダウンの下に...
-
Webのコーディングについての質...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報