どうも!chuckです。
ついに!ロシア語アプリケーションをHerokuにデプロイしました!
いやあ、ネット上で公開しているとなるとモチベーションがぐんと上がりますね!
今回はBootstrapを使ってデザインを付け加えたので、そこらへんについて書いていきますヽ(=´▽`=)ノ
あ、ちなみにこのアプリケーションの名前なんですが、「ロシアップ」と名づけました!「ロシア語のアプリケーション」かつ「ロシア語の単語力をアップさせる」をかけてます
そもそもBootstrapとは
Twitterが作ったCSSのフレームワークになります。Bootstrapを使えばカンタンに見た目を整えることができ、非常にコスパがいいです。
僕はBootstrapにアイコンを使ったことはあるんですが、CSSフレームワークとして利用するのはこれが初めてです。
ただし、難点として、Bootstrapを使ったサイトの見た目はどれも似たり寄ったりになりがちです。見る人が見ればすぐ分かってしまいます… なので多少アレンジは必要かもしれません(;・∀・)
Bootstrapの導入
Bootstrapの導入はとってもカンタンです。
1. Gemfileに追記
6行目でbootstrap-sass gemを使うことを明記しています。追記したらいつもどおり、bundle installします。
2. CSSファイルにインポート
CSSファイルにbootstrapをインポートします。
以上で準備は完了ですヽ(=´▽`=)ノ
Bootstrapの使い方
準備が整ったので、さっそくBootstrapを使っていきましょう!
CSSフレームワークとしてのBootstrapは、HTMLタグに特定のクラスを追加することで機能します。
たとえば、この物寂しいHome画面。
以下のようにHTMLタグにクラスを追加すると、
このとおり、それっぽいヘッダーメニューになります。
ドロップダウンメニューもつける
ヘッダーメニューの右端に「アカウント」という項目があるかと思われます。
これをいわゆるドロップダウンメニューにしたいと思います。クリックするとびろーんと降りてくるメニューですね!
ドロップダウンメニューを実装するにはapp/assets/javascripts/application.jsに追記する必要があります。
こちらのファイルに以下のように追記します。(15行目)
このように記述することで(&適切なクラスが付与されていることで)、ドロップダウンメニューが完成しました!
アカウントをクリックすると、ピロっとメニューが飛び出してきます。
まとめ
Bootstrap様の力を借りて、暫定的ではありますが、それなりに見れるデザインを付けることができましたヽ(=´▽`=)ノ
もう少し機能面を強化したら、またデザインに戻ってきたいと思います!もっとCSS3とか使いたいですね!
FollowMe
始まった!Railsやりながら聴いてます https://t.co/JbXNqJwAXj
— タク(chuck) (@chuck0523) August 1, 2015