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

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

【Bootstrap】List groupで「価格帯からさがす」を設置【楽天スマホ】

今日から早速楽天スマホページ制作に入りました!

まずはBootstrapって使えるの…?と思って、調べてみたところあまり情報はなかったのですが、2018年にOKになったと書いている記事がありました。

それでアップしてみたところ問題なく使えました。

 

汚いけど簡単にラフを書きました。最低限やろうと思っていること。

f:id:whiteandpeach:20191105002642j:plain

汚くて自分にしかわからないらラフですね…。

赤で囲んだところを今日は作りました。

一番簡単にできそうだったので!

 

BootstrapのList groupを使いました。

簡単にできた!!

f:id:whiteandpeach:20191105003243p:plain

こんな感じです。

 

<div class="list-group">

<li class="list-group-item list-group-item-warning">価格帯からさがす</li>

<a href="#">1円~200円</a>

<a href="#">201円~300円</a>

<a href="#">301円~500円</a>

<a href="#">501円~700円</a>

中略

<a href=#">3,001円~</a> </div>

</div>

 

※リンクは#にしています。

 

テキストだけで味気ないのでFont Awesome使えたら良いなーって思うのですが、使用できるのか楽天に問い合わせる予定です。

明日から他の箇所をやりたいのですが、いろいろやり方があって時間がかかりそうです…。

大手っぽくオシャレにしたいです!