スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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

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>

ブラウザでの表示

Media objectの作成

画像を右側に配置する

見出しと文章を先にし、画像部分を後に記述します。
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 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>

ブラウザでの表示

Media listのネスト(入れ子)