Photo by
atnote
基本的なViewの作成でCSSを簡単に
今回はwebアプリケーションで利用者に一番影響がある部分を簡単にかつスムーズにできるように学んでいきたいと思う。利用するのは基本的にフレームワークである。
CSSのフレームワーク
新しくCSSのフレームワークである「Bootstrap」を扱う
Bootstrapとは
HTMLとCSSを学び、毎回全てのHTMLやCSSを1から書いてWebページを作成することは大変な作業なため、なるべくCSSを書かずに、かつ整ったレイアウト(デザイン)を実現する目的で、CSSにもRailsと同じようなフレームワークが用意されている
CSSフレームワークで使用されるのがBootstrap
Bootstrapには、デザイン済みのボタン、メニュー、フォームなどが用意されている
とても簡単な記述でレスポンシブデザインにも対応できるため、様々なWebアプリケーションで導入されている
※レスポンシブデザインとは、1つのHTMLファイルで、PCやスマホなどディスプレイの大きさが違うデバイスにそれぞれ最適化させて表示する技術のことをいう
BootstrapはGemとして提供されており、簡単に導入可能
Gemfileに以下の行を追記
Gemfile
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# この行を追加する
gem ‘bootstrap-sass'
その後bundle install を実行
app/assets/stylesheetsにある「application.css」というファイルをapplication.scssというファイル名に修正
ファイルの拡張子を「css」から「scss」へ2行のみに変更
app/assets/stylesheets/application.scss
追加内容
@import "bootstrap-sprockets";
@import "bootstrap";
JavaScriptを読み込む
app/assets/javascriptsにあるapplication.jsファイルに追記
一番下にある//= require_tree .の上の行に以下を追記
//= require bootstrap-sprockets
//= require_tree .
Rails serverの再起動
再起動はcontrol + c で止まるので、その後rails sでサーバを起動する
トップページの作成
application.html.erb
application.html.erbは、app/views/layoutsのディレクトリにあるファイル
layoutsのディレクトリ内には、画面で共通で使うHTMLを記載
ヘッダー、ナビゲーションバー、フッターなどの全画面共通部分や、CSSの読み込み、JavaScriptの読み込みなどのメタ情報を記述
<head></head>タグの中身をみてみると
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
この部分で、application.scss、application.jsを読み込んでいる
続いて<body></body>の中身をみてみると
<%= yield %>
このyieldという部分に、他のViewを差し込んで表示
yieldがなければ、他のViewを表示できないので注意
以下のように作成
app/views/pages/index.html.erb
<div class="top-hero-wrapper text-center">
<div class="container top-hero-container">
<h1 class="text-white">Make you Happy</h1>
<h2 class="text-white">Pictgram is a service that you can post photos.</h2>
<div class="row">
<div class="col-md-offset-3 col-md-3">
<%= link_to 'Sign up', '#', class: 'btn btn-block btn-white' %>
</div>
<div class="col-md-3">
<%= link_to 'Log in', '#',class: 'btn btn-block btn-white' %>
</div>
</div>
</div>
</div>
<%= %>
<%= %>というHTMLの学習では出てこなかった見慣れない文法について解説
<%=と%>に囲まれたRails(またはRuby)のプログラム結果をHTMLで出力するもの
拡張子が.html.erbで使用できる表現
erbというのはHTMLの中でRubyのプログラムを埋め込みたいときにつける拡張子
表示をさせたいときは基本つける
＝は変数や結果を表示させるときに記載をする
CSSの作成
app/assets/stylesheetsのディレクトリ内に、custom.scssというファイルを作成
app/assets/stylesheets/custom.scss
h1, h2 {
font-weight: 100;
}
.text-white {
color: #fff ;
}
.btn-white {
color: #fff ;
border: 1px solid #fff ;
padding-top: 15px;
padding-bottom: 15px;
font-size: 20px;
background-color: rgba(0,0,0,0.0);&:hover {
color: #fff ;
}
}
.top-hero-wrapper {
width: 100vw;
height: 100vh;
background: image-url('bg-top.png');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646 ;
}
.top-hero-container {
padding-top: 220px;
h1 {
font-size: 56px;
margin-bottom: 20px;
}h2 {
margin-bottom: 60px;}
}
新しく追加したCSSを読み込むためには、application.scssにCSSをインポートする必要がある
以下のように@import 'custom';を追記
app/assets/stylesheets/application.scss
imagesフォルダのRailsのapp/assets/imagesフォルダに写真を入れておく
グリッドシステム
Bootstrapには「グリッド」と呼ばれる、12等分した横幅が均等なガイドラインが存在
グリッドのレイアウトも画面幅によって簡単に変更できるため、レスポンシブデザインにも簡単に対応できるようになる
グリッドシステムを使うためには、次のようなルールがある
class containerの中に要素を記述する
class rowの中に要素を記述する
class colを使用してグリッド数を決定する
この画像の部分は
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-7"></div>
<div class="col-md-3"></div>
</div>
</div>
colはcol-画面幅-グリッド数
またoffsetを使用することで、そのグリッド数だけの空白を開けること
ユーザー登録画面
コントローラーを作成
$ rails g controller Users new
app/controllers/users_controller.rb
app/views/users/new.html.erb
が作成される
app/controllers/users_controller.rb
class UsersController < ApplicationController
def new
end
end
app/views/users/new.html.erb
<h1>Users#new</h1>
<p>Find me in app/views/users/new.html.erb</p>
一旦はここまでにしておく
CSSのフレームワークやグリッドシステムを利用することで、ある程度簡単にViewの表示画面を作成することができる。特に、配置を修正することが難しいと思っているのだが、グリッドシステムの標準のクラスを利用することで、CSSにて細かい作業をすることが必要なくなる。デザインは好きだが、悩むところが多いと感じる時があるので、うまく活用できたらいいなと思う。
この記事が気に入ったらサポートをしてみませんか？