sezemiadmin/audio-sample.html

## audio-sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 audio</title>
  </head>
  <body>
    <audio controls>
      <source src="[ファイルパス/ファイル名]" type="audio/mpeg" />
      <p>Your device does not support HTML5 audio.</p>
    </audio>
  </body>
</html>

## border.html
<!DOCTYPE html>

<html>
<head>
  <title>CSS3 Border Radius Examples</title>
  <style>

    div {
      background: #39C;
      width: 300px;
      height: 200px;
      margin: 10px;
      border: solid 3px #039;
      float: left;
    }

    .box1 {
      border-radius: 10px;
    }

  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

## buttons-sample.html
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS3 buttons</title>
    <link rel="stylesheet" href="buttons.css" />
	</head>
	<body>
    <ul class="column">
      <li>
        <button class="minimal">Minimal</button>
      </li>
    </ul>
	</body>
</html>

## buttons.css
@charset "utf-8"

body {
  text-rendering: optimizeLegibility;
}

button:hover {
  cursor: pointer;
}

button.minimal {
  background: #e3e3e3;
  border: 1px solid #bbb;
  border-radius: 3px;
  box-shadow: inset 0 0 1px 1px #f6f6f6;
  color: #333;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  padding: 8px 0 9px;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  width: 150px;
}

button.minimal:hover {
  background: #d9d9d9;
  box-shadow: inset 0 0 1px 1px #eaeaea;
  color: #222;
}

button.minimal:active {
  background: #d0d0d0;
  box-shadow: inset 0 0 1px 1px #e3e3e3;
  color: #000;
}

## flex-sample.html
<!DOCTYPE html>

<html>
  <head>
    <title>CSS Multi-column Layout Module</title>
    <style>
      .outer {
        display: flex;
        width: 60%;
      }
      .inner {
        color: white;
        font-size: 20px;
        padding: 10px;
       }
      .inner:nth-child(1) { background: #0074bf; }
      .inner:nth-child(2) { background: #d16b16; }
      .inner:nth-child(3) { background: #9460a0; }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        Flexbox is similar to the block layout, except that it lacks many of the properties that can be used in a block layout, such as floats and columns.
      </div>
      <div class="inner">
        Using flexbox, you can also lay elements out inside a container in either directions: horizontal or vertical, called the flex directions; you’re not bound to just one direction as in other layout modes.
      </div>
      <div class="inner">
        Last but not least, you can change the visual order of elements inside the container without affecting their actual order in the markup.
      </div>
    </div>
  </body>
</html>

## form-sample.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Form</title>
    <script>
      function showValue(val) {
        document.getElementById("output").value = val;
      }
    </script>
  </head>
  <body>
    <h3>Date and Time Input Field</h3>
    <form>
      <fieldset>
        <legend>Appointment Request</legend>
        <p><label>Date <input type="date" name="date" value="2011-03-15"></label></p>
      </fieldset>
      <p><button type="submit">Submit</button></p>
    </form>
    <hr>
    <form action="#" autocomplete="on">
      <table>
        <tr>
          <td>インクリメンタル･サーチ:</td>
          <td>
            <input type="seach" list="keywords">
            <datalist id="keywords">
              <option value="Canvas">Canvas</option>
              <option value="Web Workers">Web Workers</option>
              <option value="WebSocket">WebSocket</option>
            </datalist>
          </td>
        </tr>
        <tr>
          <td><input type="file" id="file" multiple></td>
        </tr>
      </table>
    </form>
  <body>
</html>

## responsive-design.css
@media (min-width: 1190px) {
  /* 全体の横幅を固定 */
  .top-box, .etc-box, .header-inner, .copyright, article.main {
    width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

## style.html
<style>
  <tag> {
    font-size: 16px;
  }
</style>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HTML5 audio</title>
	</head>
	<body>
	<audio controls>
	<source src="[ファイルパス/ファイル名]" type="audio/mpeg" />
	<p>Your device does not support HTML5 audio.</p>
	</audio>
	</body>
	</html>
	@charset "utf-8"

	body {
	text-rendering: optimizeLegibility;
	}

	button:hover {
	cursor: pointer;
	}

	button.minimal {
	background: #e3e3e3;
	border: 1px solid #bbb;
	border-radius: 3px;
	box-shadow: inset 0 0 1px 1px #f6f6f6;
	color: #333;
	font-family: "helvetica neue", helvetica, arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	padding: 8px 0 9px;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	width: 150px;
	}

	button.minimal:hover {
	background: #d9d9d9;
	box-shadow: inset 0 0 1px 1px #eaeaea;
	color: #222;
	}

	button.minimal:active {
	background: #d0d0d0;
	box-shadow: inset 0 0 1px 1px #e3e3e3;
	color: #000;
	}
	@media (min-width: 1190px) {
	/* 全体の横幅を固定 */
	.top-box, .etc-box, .header-inner, .copyright, article.main {
	width: 1140px;
	margin-left: auto;
	margin-right: auto;
	}