CSSフレームワーク– category –
-
【Rails】Font Awesome の導入方法および使い方
RailsでFont Awesomeを導入してみたので、導入の流れや使い方についてまとめてみました。 Font Awesomeは無料で2,000種類以上のアイコンが利用できる上に、各アイコンのスタイルも変更できたりとバリエーションに富んでいて非常に使いやすい。 ただ、Font ... -
【Rails】Tailwind CSS でカスタムCSS を作成・インポートする方法
最近、RailsでTailswindCSSを導入してみたのですが、思った以上に使い勝手が良い。 特に、カスタムコンポーネントでデザインを簡単に、自由自在に表現できる点は素晴らしいですね（さよなら、Bootstrap 笑）。 ところで、カスタムコンポーネントを作成する... -
【Tailwind CSS】VSCode上 で「@tailwind」「@apply」付近に出るエラー表示の対処法【Rails】
Rails で TailwindCSS を導入してみたところ、application.tailwind.cssのTailwindCSS読み込み部分（@tailwind）でエラー表示が。 最初は読み込みエラーかなと思ったんですが、CSSはちゃんと適用されているし、色々と調べてた結果、エディタ（VSCode）上の... -
【Rails7】Bootstrapでnavbarのハンバーガーメニューの外枠線を消す方法
Bootstrapが用意しているナビゲーションバー(navbar)のハンバーガーメニューをクリックした後に、黒い外枠(box-shadow)が表示されたままになります。 個人的にはその枠線が気になるので、なんとかして消したい... 色々調べて試した結果、無事に消すことが... -
【Rails7】Bootstrapでnavbarを配置すると他のコンテンツと被る問題の修正
HTML上にBootstrapのナビゲーションメニュー(navbar)を配置すると、他のコンテンツと干渉してしまう問題についてのトラブルシューティングです。 Rails7にBootstrapを導入する方法は下記記事を参考にしてみてください。 https://kobacchi.com/rails-bootst... -
【Rails7】Bootstrapのカスタム用CSSを作成して適用する
Rails7でBootstrap5のカスタム用スタイルシート(custom.scss)を作成して適用する方法をまとめたメモです。 【開発環境】 Ruby 3.1.2Ruby on Rails 7.0.3Bootstrap 5.1.3M1 Macbook Air 2020mac OS Monterey (ver. 12.4)ターミナル bash (Rosetta 2 使用) ... -
【Rails７】Semantic UI をセットアップする方法
つい先日、Rails を使って自作Webアプリを作る上で何か良いデザイン用のCSSフレームワークがないか探していたところ、「Semantic UI」という神がかったフレームワークを見つけました。 デザインがポップかつ斬新で、一つ一つのパーツがどれもドンピシャで...
1