横スクロールメニューの両端に矢印マークを配置したいです。

前提

横スクロールする横並びのメニューを作成しています。
サンプル

また、隠れているメニューの存在を知らせるために、メニューの両サイドに矢印のようなマークを配置しています。

発生している問題

上記サンプルのページで、HTML、CSS、JavaScript、Consoleすべてのタブを表示させると、メニュー両端にある矢印マークとメニュー枠の余白が狭まってしまいます。
逆の言い方をすれば、Outputタブのみを表示にすると余白が広がってしまいます。

実現したいこと

ウインドウサイズを問わず、メニューの両端と矢印マーク間の余白を固定したいです。

該当のソースコード

CSS
1html{
2  text-align: center
3}
4
5button {
6  background: none;
7  border: 0;
8  outline: none;
9  -webkit-appearance: none;
10  -moz-appearance: none;
11  appearance: none;
12}
13
14.buttons {
15  display: inline-flex;
16  align-items: center;
17  justify-content: center;
18  box-sizing: border-box;
19  width: 100px;
20  height: 100px;
21  margin: 0 1%;
22  border: 5px solid #000;
23  background-color: #fff;
24  cursor: pointer;
25}
26
27.fab, .fas {
28  font-size: 50px;
29}
30
31a {
32  line-height: 0;
33}
34
35#css{
36  display: none;
37}
38
39#wrap{
40  overflow: hidden;
41}
42
43#wrap2{
44  overflow-x: auto;
45  margin: auto;
46  max-width: 50%;
47}
48
49ul{
50  display: inline-table;
51  border-collapse: separate;
52  border-spacing: 1em .4em;
53}
54
55li{
56  display: table-cell;
57}
58
59.fa-chevron-left{
60  position: absolute;
61  bottom: 80%;
62  left: 15%
63}
64
65.fa-chevron-right{
66  position: absolute;
67  bottom: 80%;
68  right: 15%
69}

HTML
1<body>
2  <div id="wrap">
3    <div id="wrap2">
4      <ul>
5        <li><button class="buttons"><i class="fab fa-html5"></i></button></li>
6        <li><label for="css" class="buttons">
7          <i class="fab fa-css3-alt"></i>
8          <input type="checkbox" id="css">
9          </label></li>
10        <li><button class="buttons"><i class="fab fa-js-square"></i></button></li>
11        <li><label for="python" class="buttons">
12          <a id="python"><i class="fab fa-python"></i></a>
13          </label></li>
14        <li><button class="buttons"><i class="fab fa-php"></i></button></li>
15        <li><button class="buttons"><i class="fab fa-java"></i></button></li>
16      </ul>
17    </div>
18    <i class="fas fa-chevron-left"></i>
19    <i class="fas fa-chevron-right"></i>
20  </div>
21</body>

試したこと

そもそも、矢印マークをメニューの両端に配置することに苦戦しました。
苦戦の結果、矢印マークそれぞれに、

CSS
1position: absolute;
2bottom: 80%;
3left: 15%

を設定することで見かけ上の実装はできました。
しかし、この方法がまったくもって強引な方法なのは重々承知しており、この方法ゆえに上記の問題が発生していることも存じています。

また、左矢印マークを<ul>の上に、右矢印マークを</ul>の下に記述することで、

左矢印 ― メニュー ― 右矢印

というレイアウトになりました。
しかし、ウインドウサイズが小さくなると、

左矢印
メニュー
右矢印

のように縦に重なってしまい、実現したいレイアウトではなくなりました。

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

回答2件

ベストアンサー

display: flexを使うとアイテムを横並びにすることができるので、ボタン全体をbtn-wrapというボックスで囲って矢印を並べてあげるとうまく配置できるのではないでしょうか・・・（html・cssを修正しました。）
サンプル

html
1<nav class="menu">
2  <div class="arrow arrow-left"><i class="fas fa-chevron-left"></i></div>
3
4  <ul class="btn-wrap">
5    <li><button class="buttons"><i class="fab fa-html5"></i></button></li>
6    <li><label for="css" class="buttons"><i class="fab fa-css3-alt"></i><input type="checkbox" id="css"></label></li>
7    <li><button class="buttons"><i class="fab fa-js-square"></i></button></li>
8    <li><label for="python" class="buttons"><a id="python"><i class="fab fa-python"></i></a></label></li>
9    <li><button class="buttons"><i class="fab fa-php"></i></button></li>
10    <li><button class="buttons"><i class="fab fa-java"></i></button></li>
11  </ul>
12
13  <div class="arrow arrow-right"><i class="fas fa-chevron-right"></i></div>
14</nav>
15

css
1/* メニュー全体 */
2.menu {
3  display: flex;
4  align-items: center;
5  justify-content: center;
6}
7
8/* 矢印 */
9.arrow-left {
10  margin-right: 10px;
11}
12
13.arrow-right {
14  margin-left: 10px;
15}
16
17.arrow .fas {
18  font-size: 30px;
19}
20
21/* ボタンを囲む用 */
22.btn-wrap {
23  display: flex;
24  max-width: 50%;
25  overflow-x: auto;
26  overflow-y: hidden;
27  border: 1px solid #ccc;
28}
29
30/* ボタン要素のデフォルトのスタイルをリセット */
31button {
32  background: none;
33  border: 0;
34  outline: none;
35  -webkit-appearance: none;
36  -moz-appearance: none;
37  appearance: none;
38}
39
40.buttons {
41  display: inline-flex;
42  align-items: center;
43  justify-content: center;
44  box-sizing: border-box;
45  width: 100px;
46  height: 100px;
47  margin: 5px;
48  border: 5px solid #000;
49  background-color: #fff;
50  cursor: pointer;
51}
52
53.buttons .fab,
54.buttons .fas {
55  font-size: 50px;
56}
57
58.buttons a {
59  line-height: 0;
60}
61
62#css{
63  display: none;
64}

ちなみに前回の回答のときに触れましたreset.cssですが、サンプルページの<head>の中で読み込んでいるのでぜひソースを調べてみてください。（右上のリミックスボタンを押すとコードが編集できますので、これがあるのとないので違いが分かると思います。）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">

投稿2019/08/25 01:11

編集2019/08/25 04:39

takopo

総合スコア484

MajinBoo

2019/08/25 09:50

先日はありがとうございました！おかげさまで今回も希望通りのレイアウトに実装できました！改めてありがとうございました。サンプルのreset.cssを確認しました。あらゆるタグの余白やサイズを同じになるように設定しているのが確認できました。サイズの統一のほか、<li>のスタイルや引用符のスタイルをnoneにしているのも確認できました。 reset.cssは今後必須となりそうです。また、私がいま作成しているサイトはBulmaを利用していまして、Bulmaもreset.cssを用意していることが確認できました。 https://github.com/jgthms/bulma/blob/master/sass/base/minireset.sass

takopo

2019/08/25 10:14

うまく実装できたみたいで良かったです！フレームワークには標準でついてますね。フレームワークを使わず一からサイトを作る場合には、reset.css か normalize.css が必須になると思います。

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

css
1#wrap {
2	position: relative;
3	width: 1600px;
4}

のように、全体のサイズを固定するしかないと思います。

投稿2019/08/24 09:36

Lhankor_Mhy

総合スコア36128

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！