【32日目】【1日20分のRailsチュートリアル】【第5章】BootstrapのインストールとCSSのカスタム

Ruby on Railsチュートリアル(第3版)

今日は「5.1.2 BootstrapとカスタムCSS」から。

5.1.2 BootstrapとカスタムCSS

Bootstrapを使用すると、洗練されたWebデザインとユーザーインターフェイス要素を簡単にHTML5アプリケーションに追加することができます。

一からデザインも考えて、ってするとめんどいもんねぇ…。
ベースのデザインがあると楽だとは思う。

注目すべき点は、Bootstrapを使うことでアプリケーションをレシポンシブデザインにできるということです。

楽ですねー。

bootstrap-sassは、LESSをSassへ変換し、必要なBootstrapファイルを現在のアプリケーションですべて利用できるようにします。

bootstrap-sassを今のアプリケーションで利用できるようにする。

gem 'bootstrap-sass',       '3.2.0.0'

をGemfileの4行目に追加。

budle install実行。

$ bundle install
  :
Installing bootstrap-sass 3.2.0.0

bootstrap-sassのインストール完了。

本チュートリアルでは (簡潔のために) すべてのCSSを1つにまとめる方針を採っています。

複数ファイルあると複雑だもんね…。

ということで1つにまとめる用のCSSファイル作成。

$ touch app/assets/stylesheets/custom.css.scss

作成したCSSファイルにBootstrapとかをインクルードする用の@import文追加。

app/assets/stylesheets/custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

サーバー起動して動作確認。

$ rails server -b $IP -p $PORT

Bootstrap入れただけで見た目がぐっといい感じに！

f:id:kt_zoe:20160902123410p:plain

Webサイト全体にわたってレイアウトと個別のページにスタイルを与えるためのCSSを追加します。

文字のセンタリングしたり表示をちょっと整えたり。
CSSは読んだら分かるので詳細はスルー。

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

ページを再読み込みして追加したCSSが反映されることを確認。

f:id:kt_zoe:20160902123425p:plain

次は文字の装飾。
<h1>と<h2>の文字サイズ変えたり。

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

f:id:kt_zoe:20160902123437p:plain

次はサイトロゴ(左上の「sample app」)の装飾。

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}