CSSでスマホ画面で横スクロールするレスポンシブ対応のメニューを作るカスタマイズ

最近よく見る、スマホのときに横スクロールをするメニュー。

作り方をメモしたいと思います！

実装図・メリット
カスタマイズ
- レスポンシブ（PC+スマホ）
- スマホ
その他のカスタマイズ
- 色の変更
- メニューの横幅・縦幅の変更
最後に

実装図・メリット

イメージとしては、PCでは一般的なメニューになり、

f:id:ftmaccho:20160712152829j:plain

画面の横幅が狭くなると、こんな感じで横スクロールをするようになるメニューです。

f:id:ftmaccho:20160712152958g:plain

ちなみに、同じコードをはてなブログのスマホの方に入れると、こんな感じになります（動きは上と同じです）。

f:id:ftmaccho:20160713190220p:plain

このメニューのメリットとしては、

トグルメニューのようにタップしなくても、はじめから数個のカテゴリが見えている
Javascriptを使っていないので、回線が不安定なところでも比較的表示が崩れにくい
はてなブログ以外でも使える

逆にデメリットは、

スクロールできるのか気付かれないかもしれない
狭い範囲での操作となるので、誤タップを誘発するかもしれない
スクロールしたときに、右側に隙間ができてしまう

多分最後の隙間ができてしまうのは、僕の技術不足によるものです^^;。かなりいろいろ試してみたのですが、結局できませんでした。ということで、もし分かる方がいましたら、ご教授いただけると助かりますm( )m

カスタマイズ

レスポンシブ（PC+スマホ）

カスタマイズは、以下のコードを「タイトル下」の部分に入れていただくとできます。今回はHTMLとCSSを一緒に書いてしまいました。

<nav id="scroll-menu">
<ul class="scroll-menu-inner">
<li><a href="">カテゴリ１</a></li>
<li><a href="">カテゴリ２</a></li>
<li><a href="">カテゴリ３</a></li>
<li><a href="">カテゴリ４</a></li>
<li><a href="">カテゴリ５</a></li>
<li><a href="">カテゴリ６</a></li>
<li><a href="">カテゴリ７</a></li>
<li><a href="">カテゴリ８</a></li>
<li><a href="">カテゴリ９</a></li>
<li><a href="">カテゴリ１０</a></li>
</ul>
</nav>

<style>
#scroll-menu {
    height: 40px;/*メニューの縦幅*/
    background-color: #444;/*メニューの背景色*/
}
#scroll-menu .scroll-menu-inner {
    list-style-type: none;
    width: 1000px;/*メニューの横幅*/
    height: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
#scroll-menu li {
    float: left;
    height: 100%;
}
#scroll-menu a {
    display: block;
    height: 100%;
    padding-right: 15px;
    padding-left: 15px;
    color: #fff;/*文字色*/
    font-size: 70%;
    font-weight: bold;
    text-decoration: none;
    line-height: 40px;/*メニューの縦幅*/
}
#scroll-menu a:hover {
    background-color: #555;/*マウスホバー時の背景色*/
}
@media screen and (max-width: 1000px) {/*メニューの横幅*/
    #scroll-menu {
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    #scroll-menu .scroll-menu-inner {
        margin: 0;
    }
}
</style>

上のコードを入れた後、「カテゴリ１」などのところに文字を、「href=""」のところに、対応するURLを入れてってください。

以上でカスタマイズは終了です。

スマホ

スマホの場合は上とほとんど同じなので、「タイトル下」の「PCと同じHTMLを入れる」を押していただくと、同じものが出てきます。

f:id:ftmaccho:20160713193146p:plain

違うカテゴリを入れたいなどの事情で再度HTMLを入れる場合は、下のコード

<nav id="scroll-menu">
<ul class="scroll-menu-inner">
<li><a href="">カテゴリ１</a></li>
<li><a href="">カテゴリ２</a></li>
<li><a href="">カテゴリ３</a></li>
<li><a href="">カテゴリ４</a></li>
<li><a href="">カテゴリ５</a></li>
<li><a href="">カテゴリ６</a></li>
<li><a href="">カテゴリ７</a></li>
<li><a href="">カテゴリ８</a></li>
<li><a href="">カテゴリ９</a></li>
<li><a href="">カテゴリ１０</a></li>
</ul>
</nav>

<style>
#scroll-menu {
    height: 40px;/*メニューの縦幅*/
    background-color: #444;/*メニューの背景色*/
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
#scroll-menu .scroll-menu-inner {
    list-style-type: none;
    width: 1000px;/*メニューの横幅*/
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
#scroll-menu li {
    float: left;
    height: 100%;
}
#scroll-menu a {
    display: block;
    height: 100%;
    padding-right: 15px;
    padding-left: 15px;
    color: #fff;/*文字色*/
    font-size: 70%;
    font-weight: bold;
    text-decoration: none;
    line-height: 40px;/*メニューの縦幅*/
}
#scroll-menu a:active {
    background-color: #555;/*クリック時の背景色*/
}
</style>