メディア・オブジェクト　　Media object

---

ブログのコメントや、ツイートなど、様々な種類のコンポーネント作るためのスタイル。

---

使い方

div要素を使うスタイルと、ul要素を使うスタイルがある。

div要素を使うスタイルのポイントは３つ。

1. class属性にmediaを指定したdiv要素を用意する。
2. １のdiv要素内に、media-left、media-body、media-rightの何れかをclass属性に指定した要素を配置する。
3. ２の要素内で、見出しタグ（h1〜h6）を使う場合は、class属性にmedia-headingを指定する。

ul要素を使うスタイルのポイントは４つ。

1. class属性にmedia-listを指定したul要素を用意する。
2. １のul要素内に、mediaをclass属性に指定したli要素を配置する。
3. ２のli要素内に、media-left、media-body、media-rightの何れかをclass属性に指定した要素を配置する。
4. ３の要素内で、見出しタグ（h1〜h6）を使う場合は、class属性にmedia-headingを指定する。

<div class="media">
	<a class="media-left" href="#">
		<img src="../img/sample-64x64.png">
	</a>
	<div class="media-body">
		<h4 class="media-heading">見出し</h4>
		内容。これはサンプル。
	</div>
</div>

<ul class="media-list">
	<li class="media">
		<a class="media-left" href="#">
			<img src="../img/sample-64x64.png">
		</a>
		<div class="media-body">
			<h4 class="media-heading">見出し</h4>
			内容。これはサンプル。
		</div>
	</li>
</ul>

div要素を使うスタイル

表示サンプル

ソースコード

<div class="media">
	<a class="media-left" href="#">
		<img src="../img/sample-64x64.png">
	</a>
	<div class="media-body">
		<h4 class="media-heading">見出しＡ</h4>
		内容。これはサンプル。
	</div>
</div>
<div class="media">
	<a class="media-left" href="#">
		<img src="../img/sample-64x64.png">
	</a>
	<div class="media-body">
		<h4 class="media-heading">見出しＢ</h4>
		内容。これはサンプル。
		<div class="media">
			<a class="media-left" href="#">
				<img src="../img/sample-64x64.png">
			</a>
			<div class="media-body">
				<h4 class="media-heading">見出しＣ</h4>
				内容。これは、入れ子（ネスト）にした時のサンプル。
			</div>
		</div>
	</div>
</div>
<div class="media">
	<div class="media-body">
		<h4 class="media-heading">見出しＤ</h4>
		内容。これはサンプル。
	</div>
	<a class="media-right" href="#">
		<img src="../img/sample-64x64.png">
	</a>
</div>
<div class="media">
	<a class="media-left" href="#">
		<img src="../img/sample-64x64.png">
	</a>
	<div class="media-body">
		<h4 class="media-heading">見出しＥ</h4>
		内容。これはサンプル。
	</div>
	<a class="media-right" href="#">
		<img src="../img/sample-64x64.png">
	</a>
</div>

ul要素を使うスタイル

表示サンプル

• 

  見出しＡ

  内容。これはサンプル。
• 

  見出しＢ

  内容。これはサンプル。

  

  見出しＣ

  内容。これは、入れ子（ネスト）にした時のサンプル。

  

  見出しＤ

  内容。これは、入れ子（ネスト）にした時のサンプル。

  

  見出しＥ

  内容。これは、入れ子（ネスト）にした時のサンプル。

ソースコード

<ul class="media-list">
	<li class="media">
		<a class="media-left" href="#">
			<img src="../img/sample-64x64.png">
		</a>
		<div class="media-body">
			<h4 class="media-heading">見出しＡ</h4>
			内容。これはサンプル。
		</div>
	</li>
	<li class="media">
		<a class="media-left" href="#">
			<img src="../img/sample-64x64.png">
		</a>
		<div class="media-body">
			<h4 class="media-heading">見出しＢ</h4>
			内容。これはサンプル。
			<div class="media">
				<a class="media-left" href="#">
					<img src="../img/sample-64x64.png">
				</a>
				<div class="media-body">
					<h4 class="media-heading">見出しＣ</h4>
					内容。これは、入れ子（ネスト）にした時のサンプル。
					<div class="media">
						<a class="media-left" href="#">
							<img src="../img/sample-64x64.png">
						</a>
						<div class="media-body">
							<h4 class="media-heading">見出しＤ</h4>
							内容。これは、入れ子（ネスト）にした時のサンプル。
						</div>
					</div>
				</div>
			</div>
			<div class="media">
				<a class="media-left" href="#">
					<img src="../img/sample-64x64.png">
				</a>
				<div class="media-body">
					<h4 class="media-heading">見出しＥ</h4>
					内容。これは、入れ子（ネスト）にした時のサンプル。
				</div>
			</div>
		</div>
	</li>
</ul>

配置

表示サンプル

ソースコード

<div class="media">
	<a class="media-left media-top" href="#">
		<img src="../img/sample-64x64.png">
	</a>
	<div class="media-body">
		<h4 class="media-heading">見出しＡ</h4>
		１行目<br>２行目<br>３行目
	</div>
</div>
<div class="media">
	<a class="media-left media-middle" href="#">
		<img src="../img/sample-64x64.png">
	</a>
	<div class="media-body">
		<h4 class="media-heading">見出しＢ</h4>
		１行目<br>２行目<br>３行目
	</div>
</div>
<div class="media">
	<a class="media-left media-bottom" href="#">
		<img src="../img/sample-64x64.png">
	</a>
	<div class="media-body">
		<h4 class="media-heading">見出しＣ</h4>
		１行目<br>２行目<br>３行目
	</div>
</div>