2 flat logo on transparent 256
2018-05-26
2018-11-26

Bootstrapでメディアオブジェクトを利用する|コピペで動くサンプル付き

Pexels photo 29764832312

HTMLで画像とテキストの要素を横並びにする際に、Flexやフロートなどを利用することがあるかと思います。

Bootstrapのメディアオブジェクトを利用すれば、簡単に画像や動画を横並びにする事が可能なので、今回この記事でご紹介します。

メディアオブジェクトのサンプルコード

以下サンプルコードをメモ帳などに貼り付け、html形式で保存し展開してください。

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>テストmedia設定</title>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css" rel="stylesheet">
    <style>
        /*ページ全体の大きさを設定 画像には関係ない*/
        .wrapper {
            width: 800px;
        }
    </style>
</head>

<body>
<p>画像を左寄せ</p>
<div class="wrapper">
    <div class="media">
        <!--画像を左側に設定する※ デフォルトの設定-->
        <div class="media-left">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/pict0321321.jpg" class="media-object" style="width:100px">
        </div>
        <div class="media-body">
            <h3 class="media-heading">質問者:○○</h3>
            <p>RubyとPython3はプログラミング初心者に勉強しやすい言語でしょうか?</p>
        </div>
    </div>
    <br/>
    <p>画像を右寄せ</p>
    <div class="media">
        <div class="media-body">
            <!--  media-headingで見出しとして利用可能-->
            <h3 class="media-heading">回答者:○○</h3>
            <p>はい、RubyとPython3はプログラミング初心者に勉強しやすい言語です</p>
        </div>
        <!--画像を右側に設定する-->
        <div class="media-right">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/aw312321png.png" class="media-object" style="width:100px">
        </div>
    </div>

    <!-- Media topで画像を上部に表示 -->
    <div class="media">
        <div class="media-left media-top">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample1.jpeg" class="media-object" style="width:60px">
        </div>
        <div class="media-body">
            <h3 class="media-heading">Media Toで画像を上部に表示</h3>
                <p>
                    ドナルド・ジョン・トランプは、アメリカ合衆国の実業家、政治家。第45代アメリカ合衆国大統領。不動産会社トランプ・オーガナイゼーションの会長兼社長を務めており、カジノ・ホテル運営会社トランプ・エンターテイメント・リゾーツの設立者である。</p>
        </div>
    </div>
    <!-- Media bottomで画像を下部に表示 -->
    <div class="media">
        <div class="media-left media-bottom">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample2.jpeg" class="media-object" style="width:60px">
        </div>
        <div class="media-body">
            <h3 class="media-heading">Media Bottomで画像を下部に表示</h3>
                <p>
                    ヒラリー・ローダム・クリントンは、アメリカ合衆国の政治家、弁護士。国務長官、上院議員を歴任。第42代アメリカ合衆国大統領ビル・クリントンの妻であり、1993年から2001年までアメリカ合衆国のファーストレディだった</p>
        </div>
    </div>

    <!-- Media middleで画像を中央に表示 -->
    <div class="media">
        <div class="media-left media-middle">
            <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/sample3.jpeg" class="media-object" style="width:60px">
        </div>
        <div class="media-body">
            <h3 class="media-heading">Media Middleで画像を中央に表示 </h3>
                <p>
                    バラク・フセイン・オバマ2世は、アメリカ合衆国の政治家である。民主党所属。上院議員、イリノイ州上院議員、第44代アメリカ合衆国大統領を歴任した。 アフリカ系としてアメリカ合衆国史上3人目となる民選上院議員</p>
        </div>
    </div>


</div>
</body>

</html>

コード解説

<div class="media">

で要素を囲むとメディアオブジェクトのコンテナを生成し、

<div class="media-body">

はその配下のメディアオブジェクトのコンテンツを指定します。

画像を左や右側に表示する場合は、

<div class="media-left"><div class="media-right">

で指定を行います。

 <h2 class="media-heading">

は見出しとして利用され、h2は例なので変更可能です。

そのほかは一般的なHTMLでデザインを指定できます。

さらに画像の縦の位置も変更できます。

media-topで画像を縦の一番上部に画像を設定する

以下コードのmedia-topの設定部分が縦の位置を設定しているクラスです。

      <div class="media-left media-top">

media-bottomで縦の一番底部に画像を設定する

      <div class="media-left  media-bottom">

media-middleで縦の中央部に画像を設定する

      <div class="media-left  media-middle">

実際のコード解説はコメントに記載しているので、そちらを確認しながら色々な部分を変更してみてください。

以上

関連記事

Bootstrapで画像の表示形式を変更する

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

ツイッターのタイムラインを自身のサイトへ埋め込む方法

Bootstrapでコンテンツを強調する|コピペで動くサンプル付き

CSSだけでOK!ヘッダーとサイドバーを固定する|サンプルコード付き

前の記事
次の記事
人気記事
カテゴリーから記事を探す