2018-05-26
Bootstrapでメディアオブジェクトを利用する|コピペで動くサンプル付き
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でhtml要素を折りたたむ|コピペで動くサンプル付き
Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き
Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き
Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き
前の記事
2018/05/24
次の記事
2018/05/26
