webアプリを作りたいけど、デザインが苦手だなー
内部のシステムを作ることに集中したいから手軽に見た目を作りたい
こんにちは、ティロといいます
プログラミング好きな理系大学生です
Bootstrapを使うと簡単におしゃれなデザインを作ることが出来ます。
今回はコメント欄で使えそうなコンポーネントをご紹介します。
Bootstrapってなんぞや？という方はこちらをご覧ください。
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM |
コメントを作りたい
ツイッターでよくある写真とコメント横並びになっているデザインがあります。それをBootstrapで簡単に表現します。
こんな感じです。
コードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <div class="media my-5"> <a href="#" class="mr-3"> <img src="" alt="メディアの画像"> </a> <div class="media-body"> <h5 class="mt-0">コメント</h5> リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文 <div class="media my-5"> <a href="#" class="mr-3"> <img src="" alt="メディアの画像"> </a> <div class="media-body"> <h5 class="mt-0">コメント</h5> リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文 </div> </div> </div> </div> <hr> <div class="media my-5"> <div class="media-body"> <h5 class="mt-0 text-right">コメント</h5> リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文 </div> <a href="#" class="ml-3"> <img src="" alt="メディアの画像"> </a> </div> </div> |
クラスの意味はこんな感じです。
| container | pcで1140pxの幅を取ります。レスポンシブデザイン対応なので幅はデバイスによって変化します。 |
| media | 子要素を横並びにします。 |
| media-body | コメント欄を作ります。 |
写真の大きさは各自で調整してください。
コードのクラスにはmyやmtがあります。これはマージンを表していて、例えばmyはマージンをy軸方向(上下)に取ります。mtはマージンをトップに取ります。
| m-(0,1,2,3,4,5) 1=0.25rem=4px 例:m-5 全方向に0.25rem×5(20px)のマージンを取る 1remは16pxです。 | 全方向にマージンを取る |
| mt-(0,1,2,3,4,5) | 上にマージンを取る |
| mb-(0,1,2,3,4,5) | 下にマージンを取る |
| mr-(0,1,2,3,4,5) | 右にマージンを取る |
| ml-(0,1,2,3,4,5) | 左にマージンを取る |
| mx-(0,1,2,3,4,5) | 左右（x軸方向）にマージンを取る |
| my-(0,1,2,3,4,5) | 上下(y軸方向)にマージンを取る |
マージンだけでなくパディングもあります。p(r,l,t,b,x,y)-(0,1,2,3,4,5)です。マージンと同じです。
1 2 3 4 5 6 | <div class="media my-5"> <div class="media my-5"> </div> </div> |
class=”media”の下にclass=”media”を入れると上の写真のように入れ子構造になります。
こちらの記事もオススメです! webアプリで使えそうなコンポーネントを紹介しています。
簡単におしゃれたサイトを作りたいなそんなときはBootstrapのカードが便利です。クラスをつけるだけで簡単に作れます。Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの[…]
いかがでしたでしょうか？
Bootstrapの機能をもっと知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
また実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．
参考にしたサイト