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