読者です 読者をやめる 読者になる 読者になる

Yukihy Life

ゆきひーによる日常生活をアウトプットするブログ 映画・TOEIC・教育ネタとだいぶ物理とWeb制作

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

Web制作 CSS メニュー
スポンサーリンク

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

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

実装図・メリット

イメージとしては、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="">カテゴリ1</a></li>
<li><a href="">カテゴリ2</a></li>
<li><a href="">カテゴリ3</a></li>
<li><a href="">カテゴリ4</a></li>
<li><a href="">カテゴリ5</a></li>
<li><a href="">カテゴリ6</a></li>
<li><a href="">カテゴリ7</a></li>
<li><a href="">カテゴリ8</a></li>
<li><a href="">カテゴリ9</a></li>
<li><a href="">カテゴリ10</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>

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

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

スマホ

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

f:id:ftmaccho:20160713193146p:plain

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

<nav id="scroll-menu">
<ul class="scroll-menu-inner">
<li><a href="">カテゴリ1</a></li>
<li><a href="">カテゴリ2</a></li>
<li><a href="">カテゴリ3</a></li>
<li><a href="">カテゴリ4</a></li>
<li><a href="">カテゴリ5</a></li>
<li><a href="">カテゴリ6</a></li>
<li><a href="">カテゴリ7</a></li>
<li><a href="">カテゴリ8</a></li>
<li><a href="">カテゴリ9</a></li>
<li><a href="">カテゴリ10</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>

を入れて、同じようにリンクなどを入れていただくとできます。

その他のカスタマイズ

色の変更

デフォルトでは、黒背景に白文字にしています。

色を変えたい場合は、コードの中に該当する箇所のコメントを入れてありますので、原色大辞典

www.colordic.org

などを参考に、変えてみてください。

メニューの横幅・縦幅の変更

メニューの横幅・縦幅を変更する場合も、コード内にコメントを入れてありますので、そこの数字を変えてみてください。

注意点としては、それぞれ変更する場所が2箇所あります(スマホの方のコードは、横幅は1箇所です)。横幅なら横幅、縦幅なら縦幅で同じ値になるようにしていただくと、デザインの変更なくできると思います。

最後に

ということで、横にスライドするメニューの作り方でした。

不具合・改善点などありましたら、連絡いただけると嬉しいです!

はてなブログカスタマイズまとめはこちら

www.yukihy.com