【Rails】CDNを利用してBulmaを導入する #初学者向け

はじめに

自己紹介
　未経験からWEB系エンジニアへの転職を目指している者です。現在はRuby on Railsを学習中です。

この記事を書いたきっかけ
　フロントエンドとバックエンドは分けずに手軽にビューを作成したいと思い、CSSフレームワークのBummaを導入したので学習記録として記事を書きました。

動作環境

mac OS Sonoma 14.2.1
ruby 3.2.2
rails 7.0.7

Bulmaの導入方法を調べてみた

Bulmaの導入方法を調べたところ、以下の方法がありました。

公式サイトからダウンロードする
npmなどのパッケージマネージャー使う
CDNを利用する
bulma-railsというgemを使う

今回は特にこだわりもなかったので、一番簡単に使えそうなCDNを利用する方法を選ぶことにしました。
以下のリンクはBulma公式サイトのスタートガイドです。

CDNって何？

CDNを利用してBulmaを使うと決めたのですが、「そもそもCDNって何？」となったので少し調べてみました。

CDNとは
- "Contents Delivery Network"の略
- 日本語では"コンテンツ配信ネットワーク"と呼ばれる
- CDNを使うことでWebコンテンツを迅速かつ効率よくユーザーに配信することができる

本題から外れるためCDNの仕組みについてはここでは触れませんが、下記サイトにて分かりやすく解説されていたので気になる方は参照ください。

CDNを利用してBulmaを導入する

CDNを使ってBulmaを導入する方法は簡単で、下記のようにapplication.html.erbにlinkタグを1行追加するだけです。
必要なlinkタグは以下のように、Bulma公式サイトのスタートガイドに掲載されています。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>HogeApp</title>
    <title>HogeHoge</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    
    <%# 下記の1行を追加する　%>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
  </body>
</html>

動作確認

　Bulmaが問題なく導入できているか確認するため、bodyタグの中に以下の記述を追加してページを表示してみてください。

<%# `button`でボタン要素を`is-successs`で緑色を指定する　%>

<button class="button is-primary">
  Hello World!
</button>

下記のように、緑色の"HelloWorld!"ボタンが表示されていればOKです！

　BulmaはModifiersと呼ばれるクラスを追加して要素、色、大きさを指定することができます。
詳細は参考に貼っている公式ドキュメント等を参照してください。