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

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

使い方

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

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

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

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

1. class属性にmedia-listを指定したul要素を用意する。
2. 1のul要素内に、mediaをclass属性に指定したli要素を配置する。
3. 2のli要素内に、media-left、media-body、media-rightの何れかをclass属性に指定した要素を配置する。
4. 3の要素内で、見出しタグ(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">見出しA</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">見出しB</h4>
		内容。これはサンプル。
		<div class="media">
			<a class="media-left" href="#">
				<img src="../img/sample-64x64.png">
			</a>
			<div class="media-body">
				<h4 class="media-heading">見出しC</h4>
				内容。これは、入れ子(ネスト)にした時のサンプル。
			</div>
		</div>
	</div>
</div>
<div class="media">
	<div class="media-body">
		<h4 class="media-heading">見出しD</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">見出しE</h4>
		内容。これはサンプル。
	</div>
	<a class="media-right" href="#">
		<img src="../img/sample-64x64.png">
	</a>
</div>

ul要素を使うスタイル

表示サンプル

• 見出しA

  内容。これはサンプル。

• 見出しB

  内容。これはサンプル。

  見出しC

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

  見出しD

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

  見出しE

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

ソースコード

<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">見出しA</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">見出しB</h4>
			内容。これはサンプル。
			<div class="media">
				<a class="media-left" href="#">
					<img src="../img/sample-64x64.png">
				</a>
				<div class="media-body">
					<h4 class="media-heading">見出しC</h4>
					内容。これは、入れ子(ネスト)にした時のサンプル。
					<div class="media">
						<a class="media-left" href="#">
							<img src="../img/sample-64x64.png">
						</a>
						<div class="media-body">
							<h4 class="media-heading">見出しD</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">見出しE</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">見出しA</h4>
		1行目<br>2行目<br>3行目
	</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">見出しB</h4>
		1行目<br>2行目<br>3行目
	</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">見出しC</h4>
		1行目<br>2行目<br>3行目
	</div>
</div>