文系40代♀がIT企業を目指すブログ

40代になり本格的にプログラミングの勉強をはじめてみました。なんとかしてお金にならないかと考えながらがんばっています。

【bootstrap】Cardを多用してみた

 会社のサイトがあと少しです!

今日サーバー契約する予定です。

 

今回はbootstrap中心での制作にこだわりました。

何度もComponentsを見て何ができるか確認しました。

Dreamweaverは逆に難しく感じてしまったので結局bootstrapの公式サイトからコピペしてVScodeに貼り付け、カスタマイズしました。

getbootstrap.com

そんで出来上がったんですが、ほとんどCardを使ってしまいました。

 

トップページ

f:id:whiteandpeach:20190922112504j:plain

いろいろ悩んであとでかえていくと思うんですが、ここにもCardを。

 

f:id:whiteandpeach:20190922112519j:plain

公式キャラの漫画もCardに。

 

f:id:whiteandpeach:20190922112552j:plain

こっちのキャラもCardに。

 

f:id:whiteandpeach:20190922112540j:plain

商品もCard。

 

私が使用したCardは.card-deckです。
複数のCard(枠)を横に隙間をあけて並べるもの。

隙間が必要ない方は.card-groupになります。

Pinterest風にしたい場合はcard-columnsを使うそうなんですが、うまくいかなかった…。あとでまた挑戦したいです。

 

日本語の解説もあるんですが、読んでも日本語英語でわかりづらいので公式サイトを参考するのがよさげです。