chikoski · March 26, 2016 08:03
diff --git a/aaa.css b/aaa.css
 .legend{
  display: flex;
 }
 .legend > span{
  flex-grow: 1;
  flex-shrink: 1;
  text-align: center;
 }
 .legend > span:first-child{
  text-align: left;
 }
 .legend > span:last-child{
  text-align: right;
 }
 #volumeControl > input{
  width: 100%;
 }
 #volumeControl{
  width: 100px;
  transform: rotate(90deg);
 }
diff --git a/idnex.html b/idnex.html
 <!doctype html>
 <html lang="ja">
  <head>
    <title>Simple Music App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
    <audio src="00.mp3" controls preload></audio> 
    <button id="playButton">再生！</button>
    <button id="to100">100秒目へ</button>
    
    <div id="volumeControl">
      <p>ボリューム:</p>
      <input id="volume" type="range" max="1" min="0" step="0.1">
      <div class="legend">
        <span>0</span>
        <span>0.5</span>
        <span>1.0</span>
      </div>
    <div>
        
       
    <script src="js/app.js"></script>
  </body>
 </html>
	<!doctype html>
	<html lang="ja">
	<head>
	<title>Simple Music App</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="app.css">
	</head>
	<body>
	<audio src="00.mp3" controls preload></audio>
	<button id="playButton">再生！</button>
	<button id="to100">100秒目へ</button>

	<div id="volumeControl">
	<p>ボリューム:</p>
	<input id="volume" type="range" max="1" min="0" step="0.1">
	<div class="legend">
	<span>0</span>
	<span>0.5</span>
	<span>1.0</span>
	</div>
	<div>


	<script src="js/app.js"></script>
	</body>
	</html>