Bulmaで画像の配置

https://bulma.io/documentation/elements/image/

チャット画面などで丸い画像を作る

<figure class="image is-128x128">
  <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>

Cardの中に画像と文章

Cardの中に画像と文章を横並びに表示したい場合

<div class="card">

  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>

    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Phasellus nec iaculis mauris. 
      <br>
      <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
    </div>
  </div>
</div>

https://bulma.io/documentation/components/card/

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Hello Bulma!</title>
	<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"
	/>
	<link rel="stylesheet" href="src/styles.css" />
	<script
	defer
	src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
	></script>
	</head>

	<body>
	<div id="app"></div>

	<script src="src/index.js"></script>
	<nav class="navbar has-background-info">
	<div class="navbar-brand">
	<a class="navbar-item has-text-white" href="#">
	Bulmaテンプレート
	</a>
	</div>
	</nav>

	<section class="section">
	<div class="container">
	<!-- ここにコンテンツを記載 -->
	<div class="card">
	<div class="card-content">
	<div class="tabs-page is-show js-tabs-page js-tabs-page_design">
	<article class="media">
	<figure class="media-left">
	<p class="image is-64x64">
	<img
	class="is-rounded"
	src="img/kuma.png"
	alt="Placeholder image"
	/>
	</p>
	</figure>
	<div class="media-content media-body">
	<div class="content">
	<p>
	<strong>クマさん</strong>
	<br />チャットのコメントが入ります、チャットのコメントが入ります、チャットのコメントが入ります。
	</p>
	</div>
	</div>
	</article>
	<article class="media">
	<figure class="media-left">
	<p class="image is-64x64">
	<img
	class="is-rounded"
	src="img/kuma.png"
	alt="Placeholder image"
	/>
	</p>
	</figure>
	<div class="media-content media-body">
	<div class="content">
	<p>
	<strong>クマさん</strong>
	<br />コメント2、はろー。
	</p>
	</div>
	</div>
	</article>

	<article class="media">
	<div class="media-content media-body">
	<div class="content">
	<p>
	<strong>ウサギさん</strong>
	<br />コメント3、はろー。
	</p>
	</div>
	</div>

	<figure class="media-right">
	<p class="image is-64x64">
	<img
	class="is-rounded"
	src="img/usagi.png"
	alt="Placeholder image"
	/>
	</p>
	</figure>
	</article>

	<article class="media">
	<div class="media-content">
	<div class="field has-addons">
	<div class="control is-expanded">
	<input
	class="input"
	type="text"
	placeholder="コメントを入力してください"
	/>
	</div>
	<div class="control">
	<a class="button is-info">
	Send
	</a>
	</div>
	</div>
	</div>
	</article>
	</div>
	</div>
	</div>
	</div>
	</section>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

	body {
	font-family: sans-serif;
	}

	.media-body {
	padding: 5px 10px;
	background-color: #98fb98;
	border-radius: 6px;
	font-size: 12px;
	color: #555;
	left: 10%;
	right: 10%;
	}

view raw src_styles.css hosted with ❤ by GitHub

https://codesandbox.io/s/divine-sky-z2tnu

角が丸い四角のCSS

https://github.com/adash333/ionic4-firebase-chat2/blob/master/src/app/chat/chat.page.scss

.media-body {
  padding: 5px 10px;
  background-color: #98fb98;
  border-radius: 6px;
  font-size: 12px;
  color: #555;
  left: 10%;
  right:10%;
}

これにより、

　の中身が、角が丸い四角になります。

いらすとやの動物アイコン

https://www.irasutoya.com/2014/08/blog-post_69.html

リンク

目次:CSSフレームワークBulma利用のためのテンプレートhtmlファイル

00.cssフレームワークbulma用テンプレート/bulmaで画像.txt · 最終更新: 2019/06/15 by adash333