読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

文系プログラマーがRailsでロシア語アプリケーションをつくる⑲ ~Bootstrapでデザイン追加~

どうも!chuckです。

ついに!ロシア語アプリケーションをHerokuにデプロイしました!

 

chuckwebtips.hatenablog.com

 

いやあ、ネット上で公開しているとなるとモチベーションがぐんと上がりますね!

 

今回はBootstrapを使ってデザインを付け加えたので、そこらへんについて書いていきますヽ(=´▽`=)ノ

 

あ、ちなみにこのアプリケーションの名前なんですが、「ロシアップ」と名づけました!「ロシア語のアプリケーション」かつ「ロシア語の単語力をアップさせる」をかけてます

 

 

そもそもBootstrapとは

Twitterが作ったCSSフレームワークになります。Bootstrapを使えばカンタンに見た目を整えることができ、非常にコスパがいいです。

 

getbootstrap.com

 

www.atmarkit.co.jp

 

僕はBootstrapにアイコンを使ったことはあるんですが、CSSフレームワークとして利用するのはこれが初めてです。

ただし、難点として、Bootstrapを使ったサイトの見た目はどれも似たり寄ったりになりがちです。見る人が見ればすぐ分かってしまいます… なので多少アレンジは必要かもしれません(;・∀・)

 

Bootstrapの導入

Bootstrapの導入はとってもカンタンです。

1. Gemfileに追記

f:id:chuck0523:20150802140235p:plain

6行目でbootstrap-sass gemを使うことを明記しています。追記したらいつもどおり、bundle installします。

 

2. CSSファイルにインポート

f:id:chuck0523:20150802140741p:plain

CSSファイルにbootstrapをインポートします。

以上で準備は完了ですヽ(=´▽`=)ノ

 

Bootstrapの使い方

準備が整ったので、さっそくBootstrapを使っていきましょう!

CSSフレームワークとしてのBootstrapは、HTMLタグに特定のクラスを追加することで機能します。

たとえば、この物寂しいHome画面。

f:id:chuck0523:20150802145644p:plain

 

 

以下のようにHTMLタグにクラスを追加すると、

f:id:chuck0523:20150802141851p:plain

 

 

 

f:id:chuck0523:20150802142131p:plain

このとおり、それっぽいヘッダーメニューになります。

 

ドロップダウンメニューもつける

ヘッダーメニューの右端に「アカウント」という項目があるかと思われます。

これをいわゆるドロップダウンメニューにしたいと思います。クリックするとびろーんと降りてくるメニューですね!

ドロップダウンメニューを実装するにはapp/assets/javascripts/application.jsに追記する必要があります。

f:id:chuck0523:20150802144748p:plain

 

こちらのファイルに以下のように追記します。(15行目)

f:id:chuck0523:20150802145025p:plain

 

このように記述することで(&適切なクラスが付与されていることで)、ドロップダウンメニューが完成しました!

f:id:chuck0523:20150802145147p:plain

アカウントをクリックすると、ピロっとメニューが飛び出してきます。

 

まとめ

Bootstrap様の力を借りて、暫定的ではありますが、それなりに見れるデザインを付けることができましたヽ(=´▽`=)ノ

もう少し機能面を強化したら、またデザインに戻ってきたいと思います!もっとCSS3とか使いたいですね!

 

russiup.herokuapp.com

 

FollowMe