Media objectの書式：Bootstrapコードまとめ

投稿：2016年03月06日｜更新：2016年03月07日

Bootstrapのコードを少しずつまとめていきます。
今回はMedia objectの書式です。
Media objectとは「画像」「見出し」「本文」で構成されるコンテンツです。

Media objectの作成

Media objectを作成する際に使用するclassは以下の表のとおりです。

要素	class	概要
div	media	media objectの範囲
a	media-left	画像を左寄せ
a	media-right	画像を右寄せ
div	media-body	文章の範囲
h1～h6	media-heading	文章の見出し

HTML

<div class="media">
  <a href="#" class="media-left">
    <img src="images/nasu.jpg">
  </a>
  <div class="media-body">
    <h3 class="media-heading">ナス</h3>
    ナス（茄子、茄、ナスビ、学名：Solanum melongena）はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。
  </div>
</div>
<div class="media">
  <a href="#" class="media-left">
    <img src="images/tomato.jpg">
  </a>
  <div class="media-body">
    <h3 class="media-heading">トマト</h3>
    トマト（学名：Solanum lycopersicum）は、南アメリカのアンデス山脈高原地帯（ペルー、エクアドル）原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。
  </div>
</div>

ブラウザでの表示

画像を右側に配置する

見出しと文章を先にし、画像部分を後に記述します。
a要素をclass「media-right」に変更します。

HTML

<div class="media">
<div class="media-body">
    <h3 class="media-heading">ナス</h3>
    ナス（茄子、茄、ナスビ、学名：Solanum melongena）はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。
</div>
  <a href="#" class="media-left">
    <img src="images/nasu.jpg">
  </a>
</div>

<div class="media">
<div class="media-body">
    <h3 class="media-heading">トマト</h3>
    トマト（学名：Solanum lycopersicum）は、南アメリカのアンデス山脈高原地帯（ペルー、エクアドル）原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。
</div>
  <a href="#" class="media-right">
    <img src="images/tomato.jpg">
  </a>
</div>

ブラウザでの表示

Media listの作成

ulとli要素を使ってリスト形式のMedia objectを作成することも可能です。

ul要素にclass「media-list」、li要素にclass「media」を適用します。

HTML

<ul class="media-list">
  <li class="media">
    <a href="#" class="media-left">
      <img src="images/nasu.jpg">
    </a>
   <div class="media-body">
    <h3 class="media-heading">ナス</h3>
    ナス（茄子、茄、ナスビ、学名：Solanum melongena）はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。
   </div>
  </li>
  <li class="media">
    <a href="#" class="media-left">
       <img src="images/tomato.jpg">
    </a>
    <div class="media-body">
    <h3 class="media-heading">トマト</h3>
    トマト（学名：Solanum lycopersicum）は、南アメリカのアンデス山脈高原地帯（ペルー、エクアドル）原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。
    </div>
  </li>
</ul>

ブラウザでの表示

Media listのネスト（入れ子）

Media listの中にMedia objectを記述して、階層構造を作ります。

HTML

<ul class="media-list">
  <li class="media">
    <a href="#" class="media-left">
      <img src="images/yasai.jpg">
    </a>
    <div class="media-body">
      <h3 class="media-heading">世界の野菜</h3>
      野菜（やさい、英: vegetable）は、食用の草本植物の総称。水分が多い草本性で食用となる植物を指す。主に葉や根、茎（地下茎を含む）、花・つぼみ・果実を副食として食べるものをいう。
      <div class="media">
        <a href="#" class="media-left">
          <img src="images/nasu.jpg">
        </a>
        <div class="media-body">
          <h3 class="media-heading">ナス</h3>
          ナス（茄子、茄、ナスビ、学名：Solanum melongena）はナス科ナス属の植物。また、その果実のこと。原産地はインドの東部が有力である温帯では一年生植物であるが、熱帯では多年生植物となる。
        </div>
      </div>
      <div class="media">
        <a href="#" class="media-left">
          <img src="images/tomato.jpg">
        </a>
        <div class="media-body">
          <h3 class="media-heading">トマト</h3>
          トマト（学名：Solanum lycopersicum）は、南アメリカのアンデス山脈高原地帯（ペルー、エクアドル）原産のナス科ナス属の植物。また、その果実のこと。多年生植物で、果実は食用として利用される。
        </div>
      </div>
    </div>
  </li>
</ul>

ブラウザでの表示

Twitter でシェア Facebook でシェア Google+ でシェア