00.cssフレームワークbulma用テンプレート:bulmaで画像

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/13] – [チャット画面などで丸い画像を作る] adash333
+++ 00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/15] (現在) – [Cardの中に画像と文章] adash333
@@ 行 13: / 行 13: @@
 </code>
-==== Cardの中に画像と文章 ====
+===== 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ファイル]]

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