👌
Bootstrap導入後にやることリスト5つ
はじめに
こんにちは！bosatoです！
この記事は３０代未経験でwebエンジニアを目指し、現在スクールで勉強中の私が、勉強中にカリキュラムでは理解が難しかったことや、これってどうなの？って部分をアウトプットのために書いている記事です。この記事が僕と同じ境遇の人の役に立てば幸いです。
今回はrailsでBootstrap導入後にやるべきこと、脚色の手順がよく分からなかったのでその方法を紹介していきたいと思います。ちなみにバージョンは4.6.2です。
Bootstrap導入後にやるべきこと
- bootstrapのデフォルトのUI(ユーザーインターフェース)を確認
- テーマカラーやフォントをカスタム
- コンポーネントを作り込む
- フォームのデザイン調整
- レスポンシブ対応と余白調整
1. bootstrapのデフォルトのUI(ユーザーインターフェース)を確認
確認すること３つ
- app/views/layouts/application.html.erb で Bootstrapがちゃんと効いているか
- scaffold や form_with を使って、UIが自動的にBootstrap風になるか
- ナビバーやカードなどのコンポーネントが表示されるか
2. テーマカラーやフォントをカスタム
方法１ scssを上書きしてカスタムしていく
方法２ ブートストラップ公式のカラーを利用する（背景色は１０個から選べる）
＊私の場合背景色などをベージュっぽい色にしたくてscssをいじろうとしましたが、時間がいくらあっても足りなさそうだったので、ひとまず公式のカラーをコードで書いて対応しました。
3. コンポーネントを作り込む
コンポーネントとは？
再利用できるUIの部品のことです。ブートストラップでは、HTML＋CSS＋(JS）を一つのまとまりにして使いまわしやすくしてくれています。
例）
| 名前 | 説明 |
|---|---|
| ボタン | 共通の色・サイズ・動きを持ったボタン |
| カード | 画像・タイトル・説明がセットになったUI部品 |
| ナビゲーションバー | サイト上部のメニュー |
| モーダルウィンドウ | ポップアップのダイアログ |
| フォームグループ | ポップアップのダイアログ |
まずはボタン、ナビゲーションバー、フォームを変えるだけでもそれっぽくなります。
4. フォームのデザイン調整
Railsのform_withはそのままだと地味なので、Bootstrap風に整えます。
5. レスポンシブ対応とデザイン調整
Bootstrapのグリッドやユーティリティクラスを使って、スマホにも対応させます。
最後に
どんな脚色にしたいかで手順の方向性が変わってきます。例えば、シンプルにしたいならBootstrapのユーティリティや変数を変えればいいし、ブランド風にしたいなら色、ロゴ、フォントをカスタムするなどやることが変わります。公式を確認すれば、やり方やコードもたくさん書いてあるので一度確認してみましょう。
Discussion