レスポンシブデザイン | HTML5オーディオプレーヤー

Bootstrapを使って、スマホ向けとPC向けでプレーヤーの表示を切り替えます。

HTML側の実装

前回までの記事で、PC向けに表示する要素が出揃ったので下記にまとめます。

<!-- PC向けのアイコンのリスト -->
<ul class='player-block'>

    <!-- タイトル -->
    <li class='player-block-title'>
        <span class='player-title'>---</span>
    </li>

    <!-- 連続再生アイコン -->
    <li class='player-block-btn'>
        <button class="player-auto player-color-off"> 
            <span class='glyphicon glyphicon-arrow-right'></span>
        </button>
        <span class='player-popup'>連続再生</span>
    </li>

    <!-- リピート再生アイコン -->
    <li class='player-block-btn'>
        <button class="player-repeat player-color-off"> 
            <span class='glyphicon glyphicon-repeat'></span>
        </button>
        <span class='player-popup'>リピート再生</span>
    </li>

    <!-- 消音アイコン -->
    <li class='player-block-btn-volume'>
        <button class='player-volume'> 
            <span class='glyphicon glyphicon-volume-up'></span>
        </button>
        <span class='player-popup'>消音</span>
    </li>

    <!-- 音量バー -->
    <li class='player-block-volume'>
        <input class='player-volume-bar' type='range' value='1' min='0' max='1' step='0.1'>
    </li>
</ul>

上記と以前の記事にまとめてあるplayer-blockを用いて、下記のように要素をまとめます。

<!-- スマホ・PC共通のアイコンリスト -->
<div class="col-sm-6 player-left">
    <ul class='player-block'>
        ・・・
    </ul>
</div>

<!-- PC向けのアイコンリスト -->
<div class="col-sm-6 player-right">
    <ul class='player-block'>
        ・・・
    </ul>
</div>

col-sm-6はBootstrapのクラスで、ブラウザの幅が768px以上の時に、50%のwidthに変更されます。これを2組用いて、PC向けに2つのplayer-blockを一列に併記します。

CSS側の実装

ブラウザの幅によって、片方のplayer-blockを、上記のクラスcol-sm-6でも使われている、メディアクエリによって表示を切り替えます。

/* ブラウザの幅が768px未満の時は非表示 */
.player-right {
    display: none;
}

/* 768px以上の時は表示 */
@media screen and (min-width: 768px) {
    .player-right {
        display: block;
    }
}

screenは画面表示に関するタイプ指定で、その次に括弧を用いて、適用する際の条件を指定します。上記の場合は、col-sm-6の条件に合わせています。

URL: ringil-music.com
ライブラリ: Bootstrap 3・JQuery 1.12.4

コメントを残す

メールアドレスが公開されることはありません。