このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/13] adash333 [チャット画面などで丸い画像を作る] |
00.cssフレームワークbulma用テンプレート:bulmaで画像 [2019/06/15] (現在) adash333 [Cardの中に画像と文章] |
||
---|---|---|---|
行 13: | 行 13: | ||
</ | </ | ||
- | ==== Cardの中に画像と文章 ==== | + | ===== Cardの中に画像と文章 |
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:// | https:// | ||
- | ==== リンク ==== | + | < |
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== 角が丸い四角のCSS ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | < | ||
+ | .media-body { | ||
+ | padding: 5px 10px; | ||
+ | background-color: | ||
+ | border-radius: | ||
+ | font-size: 12px; | ||
+ | color: #555; | ||
+ | left: 10%; | ||
+ | right: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | これにより、< | ||
+ | |||
+ | ===== いらすとやの動物アイコン ===== | ||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== リンク | ||
目次: | 目次: | ||