materialize.cssを使ってみて

materialize.cssとは

公式はこちらです。
CSSを生書きしなくても、使用できるフレームワークです。私自身、フロントにものすごく弱いのですごく活用させてもらってます。他にはBootstrapが有名かもしれません。

使用方法

application.html.erb

 <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

Railsで使用するときは以上のようにURLからダウンロードしてとっていきます。application.html.erbのheadタグ内で記述します。ちなみに、オフラインの場合だと接続できないねと思いましたが、Webアプリ自体がオフラインだとアクセスできないのでまあいいか、思った次第であります。

上記のURLで動画で活用の仕方を丁寧に説明してくださっています。

どんな感じになるか

挙げられているHTML/CSSをうまく活用して行くと上のようなページが完成しました。