レイアウト調整

Home Academy レイアウト調整

Ruby on Rails Academy #4

サイドバー

多くのページでは、メニューやオプションの表示領域としてページを区切っています。上部メニューバーや左右サイドバーなどです。見た目も綺麗になるので作りましょう。
Bootstrapではグリッドシステムという仕組みが実装されていて、比較的簡単かつレスポンシブ（ユーザーの画面の大きさに合わせて表示が調整されること）にレイアウトを調整することが出来るようになっています。

グリッドシステムはCSSのclassを利用して調整され

<div class="row">~</div>

を一つの段の区切りとみなし、その中を

<div class="col-大きさ-列数"></div>

のように区切ります。列数は合計で12になるようにし、大きさはxs,sm,md,lgが用意されています。

詳しくはhttp://getbootstrap.com/css/を参照してください。

exercise 1

グリッドシステムを用いて、サイドバーを作りましょう。（まだ実用的な機能はなくて構いません。）

パーシャル

上記のような、どのページにも使う要素は毎回書くのは（たとえコピーするとしても）面倒ですし、コードに同じ部分を繰り返す場所が増えます。
そのようなパーツはパーシャル（部分テンプレート）として切り分け、使うとき呼び出すのみにするのが効率的です。
views/layoutフォルダーに _sidebar.html.erb という新しいファイルを作り、サイドバーの中身を移しましょう。
必ずしもアンダースコアで始める必要はありませんが、わかりやすくするためにつけるのが一般的です。

できたら

<%= render :partial => "./layouts/sidebar" %>

をサイドバーのあったところに書くと、_sidebar.html.erb の内容が表示されます。

exercise 2

フッターも非常に一般的な構成要素です。
西暦の年表示が入ったフッターをパーシャルとして追加しましょう。