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

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/13]
adash333 [チャット画面などで丸い画像を作る]
00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/15] (現在)
adash333 [Cardの中に画像と文章]
行 13: 行 13:
 </code> </code>
  
-==== Cardの中に画像と文章 ====+===== 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/ 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用テンプレート:index.html|CSSフレームワークBulma利用のためのテンプレートhtmlファイル]]
  


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