【ポートフォリオ】ズバッと決断くん ヘッダー、フッター、静的ページを作成
とりあえず、ヘッダーとフッター及び、静的コンテンツを完成させてみました。
一からアプリを立ち上げるのは久々だったので、rails new
やrails g controllerをするだけでも抵抗を感じました。
semantic UIのデザインは、やっぱりbootstrapよりも自分好み。
ただ、ウリである直感的なclass名指定は、確かにわかりやすいものの少しコードが長くなりがちなのが難点かなと思いました。
あとは、グリッドを指定するときにthreeとかfourではなくて「３」とか「４」を使えたら便利だなと感じました。
しかし、感触は良好なのでこのまま使っていくことに。
以下学んだ点
semantic UIの導入方法
とりあえず挙動を確かめたかったので、gemやファイルはダウンロードせずに、CDNを使ってサクッと導入。
導入方法は至ってシンプルで、application.html.erbにコードを加えるだけ！
<!DOCTYPE html> <html> <head> <title>KetsudannKun</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <!-- 以下の３行を追記する --> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!-- ここまで！ --> </head> <body> <%= render 'shared/header' %> <%= yield %> <%= render 'shared/footer' %> </body> </html>
これだけで適用されるようになる。
欠点としては、cssファイルやJSファイルをダウンロードせずにクラウド上から引っ張ってきているので、少し柔軟性に欠けること？
ストレスなく使いたい場合は、公式HPから直接ダウンロードしてアプリに組み込むのが良さそう。
試しにApplication.cssに
body {
font-family: sans-serif;
background-color: black;
}
と記載してもsemantic.min.cssが優先されて適用されずだった。
画面遷移ボタンの作成
何気に今回初めて作ったのが、単純に画面を遷移させるだけのボタン。
よく考えたら今まではデータを送信するボタンしか作っていなかった。
コードは簡単。
<button type='button' onclick="location.href='#'" class="ui secondary button">
<i class='icon user plus'></i>
新規登録して決断！
</button>
これだけでsemantic UIが適用されたアイコン付きの立派なボタンが完成した。
概要ページやプライバシーポリシーの文言を完成させるのは後回しにして、次はsorceryを使ったログイン機能を実装していこうと思う。
久々に使うから詰まらないか心配。
