頑張ったり頑張らなかったりこの広告は、90日以上更新していないブログに表示しています。Tutorialも第5章です。メモを取りながらやっているのですが、いかんせん日にちが経っている(実は今10章まで進んだw)なのでほとんどメモをコピペしてるだけですが・・・。第4章はRailsというよりRubyの基本的な構文についてなので、初心者の方はやるとよろしいかと存じますが、まあサラッとチェックしただけに留めて次へ行きます。Softcover.ioHTML5を使う。ロゴ、ヘッダー、フッター、メインのコンテントなどサイトのレイアウトを決めていく。パーシャルを使ってマークアップを複数のファイルに切り分けていく。CSSのクラスやらidやらを使っていきます。Bootstrapも使う。手っ取り早くいい感じのデザインができます。SassとアセットパイプラインでCSSの重複を排除し、その結果を本番環境用に効率的にパッケージングすることができる。Railsはカスタムのルーティングの決まりがあって、それにより名前付きのルートを提供できる。結合テストにより、ブラウザでクリックしてページ遷移、というのを効果的にシュミレートすることができる。ゆうことなんでしょうね(半ギレ)Bootstrapの導入とうとうBootstrapを導入して、本格的にレイアウト作っていく、ということで。今までホーム、ヘルプ、ログインページを作ったはいいんですけど、個々へアクセスするためのリンクがないなと。マスターからブランチを切ります。filling-in-layoutレイアウトのカスタマイズ各画面に共通するレイアウトを作っていきます。IE9に対してはhtml5shivを使うようにするぜと。Statsより)ここを見るとIE9以前もちらほらありますな。navbar-inverse">navbarなどのクラスはBootstrapのクラスですけど、まだインストールしてないので、スタイル適用されない形で表示されるかと。</ul></nav>link_toヘルパーを使っていくよと。</ul></nav>要はこういう意味合いになる。%></div>この部分に各画面の個別のレイアウトが表示されていきます。%>jumbotronは今まで使ったことなかったかも。btn-lgもBootstrapのクラス。大きめのボタンになる。画像にリンクを張っているんですね。%>image_tag使用しているのはいいけど、肝心の画像がないですよと。Tutorialのロゴを取ってくることができるようです。vendorこうしてルートにDLしてからの、app/assets/images/に移動させる。app/assets/images/まだBootstrap導入してないのでこんな感じ。CSSGemfileの編集Bootstrapを導入します。RailsのアセットパイプラインでサポートしているSassも使えるように、bootstrap-sassを導入します。installカスタムCSSの作成app/assets/stylesheetsにcustom.css.scssというファイルを作成します。app/assets/stylesheets/custom.css.scssそしてそこでBootstrapのインポート。sすると、Bootstrapが適用されてる!さらにカスタマイズしていきます。10px;}全体のセッティング。.centerクラスの内容は文字を真ん中寄せにする。クラスの名前と内容を一致させているんだなあと。これからCSSを書くときも気をつけていきたい点ですね。