この画像の作り方を教えてください！

この名前がわからなかったので、見出しが雑になってしまいました、すいません。

これをセレクションバーと勝手に呼んでいるのですが、
いざ作ろうとした時に、疑問になったことがありまして、質問させていただきます。

###１、どのタグを使えばいいか？
見出しでも、文章でもないので、どのタグを使えばいいか分かりません。

今の所<span style = "position: relative; left: 80px; top:36px">トップ</span>という感じで、
文字だけが横に一列並んでいるが、正直これでいいのか分かりません。

<div class= "selectionBar selectionBarDesign" > <span style = "position: relative; left: 80px; top:36px"> トップ</span> <span style = "position: relative; left: 160px; top:36px"> カテゴリ</span> <span style = "position: relative; left: 240px; top:36px">ランキング</span> <span style = "position: relative; left: 320px; top:36px"> 専門家 </span> </div>

kei344

2017/05/10 14:50

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

行動規範の内容に同意します

回答5件

名前はグローバルナビが一般的

登場タグ
<nav> <ul> <li> <a>

HTML5じゃない場合は、<nav>を<div>に。

あとは、ガンバレ!!

投稿2017/05/06 19:03

LibertyBell3

総合スコア1084

ベストアンサー

他の回答者さんも挙げていますが、以下のように行えると思いますが、いかがでしょう？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        body {
13            padding: 5px;
14        }
15
16        ul {
17            width: 100%;
18            background-color: #Bd64be;
19            list-style: none;
20            border-top-right-radius: 5px;
21            border-top-left-radius: 5px;
22        }
23
24        ul::after {
25            display: block;
26            content: " ";
27            clear: both;
28        }
29
30        li {
31            float: left;
32            border-right: 1px solid #5e325e;
33            width: 12%;
34        }
35
36        li:last-of-type {
37            float: right;
38            border-right: none;
39            border-left: 1px solid #5e325f;
40        }
41
42        a {
43            display: block;
44            text-decoration: none;
45            color: #ffffff;
46            text-align: center;
47            line-height: 2.0;
48        }
49    </style>
50</head>
51<body>
52<nav>
53    <ul>
54        <li>
55            <a href="#">トップ</a>
56        </li>
57        <li>
58            <a href="#">カテゴリ</a>
59        </li>
60        <li>
61            <a href="#">ランキング</a>
62        </li>
63        <li>
64            <a href="#">専門家</a>
65        </li>
66        <li>
67            <a href="#">企業公式</a>
68        </li>
69        <li>
70            <a href="#">Q&A一覧</a>
71        </li>
72        <li>
73            <a href="#">回答コーナー</a>
74        </li>
75        <li>
76            <a href="#">My知恵袋</a>
77        </li>
78    </ul>
79</nav>
80</body>
81</html>

投稿2017/05/07 11:38

s8_chu

総合スコア14731

NamaKori

2017/05/10 10:00

すごいですね！忠実に再現されていて驚きました。参考にしたいと思います。

行動規範の内容に同意します

一般的には

<ul>タグと<li>タグを使って作成したリストをfloat: leftを使って横並びにする形で作成するイメージです。あとは他の方が仰っている通り、<div>や<nav>でそれをラッパしてひとまとめにして扱う場合が多いように思います。そこからドロップダウンで更に細かい選択肢を表示する方法もありますので、そのあたりの細かい実装方法はLibertyBell3さんやZuishinさんの仰るように、メニューバーやグローバルナビで検索すれば、様々な例をみることができると思います。

なお非推奨的な使い方ですが、最終手段としてtableタグを使ってしまうという手もあります。ただ、これはあまり良いとはされていないようですので、前述の手段を使ったほうがベターかと。

投稿2017/05/06 23:39