サルでもわかるWEBプログラミング

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== Bulmaで画像の配置 ======

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


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

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

</code>

===== Cardの中に画像と文章 =====


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

<code>

<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>

</code>



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

<html>
<script src="https://gist.github.com/adash333/1d0462b037007ffe56e16bb1c089f405.js"></script>
</html>

{{:00.cssフレームワークbulma用テンプレート:pasted:20190615-132934.png}}

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



===== 角が丸い四角のCSS =====

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


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

これにより、<div class="media-body"></div>　の中身が、角が丸い四角になります。

===== いらすとやの動物アイコン =====
https://www.irasutoya.com/2014/08/blog-post_69.html



===== リンク =====
目次:[[00.cssフレームワークbulma用テンプレート:index.html|CSSフレームワークBulma利用のためのテンプレートhtmlファイル]]