CSSのFlexboxを使って、プレーヤーのアイコンを横並びにします。

HTML側の実装

前回までの記事で、二つあるplayer-blockの内の一つが出揃ったので、下記にコメントを一部省略してまとめます。

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

    <!-- 前曲アイコン -->
    <li class='player-block-btn'>
        <button class='player-back'> 
            <span class='glyphicon glyphicon-step-backward'></span>
        </button>
        <span class='player-popup'>前へ</span>
    </li>

    <!-- 停止アイコン -->
    <li class='player-block-btn'>
        <button class='player-stop'>
            <span class='glyphicon glyphicon-stop'></span>
        </button>
        <span class='player-popup'>停止</span>
    </li>

    <!-- 再生アイコン -->
    <li class='player-block-btn'>
        <button class='player-play'>
            <span class='glyphicon glyphicon-play'></span>
        </button>
        <span class='player-popup'>再生</span>
    </li>

    <!-- 一時停止アイコン -->
    <li class='player-block-btn' style='display:none'>
        <button class='player-pause'> 
            <span class='glyphicon glyphicon-pause'></span>
        </button>
        <span class='player-popup'>一時停止</span>
    </li>

    <!-- 次曲アイコン -->
    <li class='player-block-btn'>
        <button class='player-next'> 
            <span class='glyphicon glyphicon-step-forward'></span>
        </button>
        <span class='player-popup'>次へ</span>
    </li>

    <!-- 再生時間 -->
    <li class='player-block-time'>
        <span class='player-time'>0:00 / 0:00</span>
    </li>

    <!-- シークバー -->
    <li class='player-block-seek'>
        <input class='player-seek-bar' type='range' value='0' min='0' max='100' step='1'>
    </li>
</ul>

ブラウザの幅が768px未満であるスマホやタブレットでは、これらのアイコンのみプレーヤーに表示しています。

CSS側の実装

ul要素を用いているので、先に既定の装飾を取り除きます。

ul {

    /* リストのマークを非表示 */
    list-style-type: none;

    /* 要素内の余白を除去 */
    padding: 0;

    /* 要素外の余白を除去 */
    margin: 0;
}

次に、player-blockに対してFlexboxを適用します。

.player-block {

    /* 要素の整列 */
    display: -ms-flexbox; /* IE 10 */ 
    display: -webkit-box; /* Android */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 要素が並ぶ方向 */
    -ms-flex-direction: row; /* IE 10 */ 
    -webkit-box-direction: row; /* Android */
    -webkit-flex-direction: row; /* Safari */
    flex-direction: row;

    /* 垂直方向の配置 */
    -ms-flex-align: center; /* IE 10 */ 
    -webkit-box-align: center; /* Android */
    -webkit-align-items: center; /* Safari */
    align-items: center;
}

IE10にFlexboxを対応させる為に-ms-flexboxを用いています。同様に、旧バージョンのAndroidブラウザに対しては-webkit-boxを、MacとiOSの旧Safariには-webkit-flexで対応しています。flex-directionやalign-itemsに関しても、それぞれのベンダープリフィックスに対応したプロパティを併記しています。

縦の位置調整に関して、いくつかの方法があると思いますが、サイトでは以下のようにline-heightで対処しています。

.player-block > li {

    /* 行の高さを指定 */
    line-height: 60px;
}

上記にある>の記号を用いると、直下の子要素のみにCSSが適用されます。

最後に、シークバーの適用処理です。

.player-block-seek {

    /* 要素の伸縮の指定 */
    -ms-flex: 1 1 0px; /* IE 10 */ 
    -webkit-box-flex: 1; /* Android */
    -webkit-flex: 1; /* Safari */
    flex: 1 1 0px;
}

flexプロパティは、flex-grow、flex-shrink、flex-basisプロパティからなり、初期値は0 1 autoです。シークバーをブラウザの幅に合わせて変化させるために、flex-growの値を1にしていますが、IEに関してバグがあるということなので、念の為にそれに関連するプロパティには1 1 0pxを指定しています。

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