00.cssフレームワークbulma用テンプレート:bulmaで画像
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/13] – 作成 adash333 | 00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/15] (現在) – [Cardの中に画像と文章] adash333 | ||
---|---|---|---|
行 12: | 行 12: | ||
</ | </ | ||
+ | |||
+ | ===== Cardの中に画像と文章 ===== | ||
+ | |||
+ | |||
+ | Cardの中に画像と文章を横並びに表示したい場合 | ||
+ | |||
+ | < | ||
+ | |||
+ | <div class=" | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <figure class=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | </ | ||
+ | <div class=" | ||
+ | <p class=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <div class=" | ||
+ | Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
+ | Phasellus nec iaculis mauris. | ||
+ | <br> | ||
+ | <time datetime=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== 角が丸い四角のCSS ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | < | ||
+ | .media-body { | ||
+ | padding: 5px 10px; | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | font-size: 12px; | ||
+ | color: #555; | ||
+ | left: 10%; | ||
+ | right:10%; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | これにより、< | ||
+ | |||
+ | ===== いらすとやの動物アイコン ===== | ||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== リンク ===== | ||
+ | 目次: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
00.cssフレームワークbulma用テンプレート/bulmaで画像.1560429625.txt.gz · 最終更新: 2019/06/13 by adash333