レイアウトを活用しよう (4/7)
作成:2012-01-30 08:01
更新:2012-02-16 15:18
更新:2012-02-16 15:18
■スタイルシートの作成
続いて、スタイルシートを作成しましょう。スタイルシートは、Railsアプリの「assets」というフォルダの中に配置します。このフォルダを開くと、その中に「stylesheets」というフォルダがあるはずです。これがスタイルシートを保管するためのものです。
この中に、今回は「helos.css.scss」というファイルを作成することにします。Aptana Studioを利用している場合には、既にこのファイルが作成済みかも知れません。Controllerを作成する際に自動生成されるためです。まだファイルがない場合は手作業で作成してください。そして下のリスト欄のように記述をしておきましょう。
今回の「helos.css.scss」というファイルは、Sassy CSS（SCSS）というものを記述したファイルです。SCSSはスタイルシートを更に拡張したメタ言語で、スタイルシートを更に強力にしたものと考えてください。もちろん、通常のCSSを使っても全然構わないのですが、Aptana Studioでは標準でSCSSファイルを生成するようになっているのでこれにあわせて説明します。スタイルシートは、このように「Controller名.css（.scss）」という名前で作成するのが基本です。
といっても、リストを見ればわかるように内容はただのCSSです。とりあえず<body>と、タイトルである<h1>のスタイルだけを用意しておきました。これはあくまでサンプルなので、それぞれで適当に書き換えて遊んでください。
さて、このファイルがレイアウトテンプレート側でどう読み込まれていたか思い出してみてください。こうなっていましたね。
デフォルトのapplication.html.erbでは、ここに"application"という値が用意されていました。これにより、application.cssが読み込まれていたわけです。では、このデフォルトのスタイルシートと、heloコントローラー用に用意されたものを両方読み込んで使いたい場合は？ これは「all」と指定します。stylesheet_link_tag allで、自動的にすべてのスタイルシートを読み込むタグが作られます。
※SCSS参考
http://sass-lang.com/
この中に、今回は「helos.css.scss」というファイルを作成することにします。Aptana Studioを利用している場合には、既にこのファイルが作成済みかも知れません。Controllerを作成する際に自動生成されるためです。まだファイルがない場合は手作業で作成してください。そして下のリスト欄のように記述をしておきましょう。
今回の「helos.css.scss」というファイルは、Sassy CSS（SCSS）というものを記述したファイルです。SCSSはスタイルシートを更に拡張したメタ言語で、スタイルシートを更に強力にしたものと考えてください。もちろん、通常のCSSを使っても全然構わないのですが、Aptana Studioでは標準でSCSSファイルを生成するようになっているのでこれにあわせて説明します。スタイルシートは、このように「Controller名.css（.scss）」という名前で作成するのが基本です。
といっても、リストを見ればわかるように内容はただのCSSです。とりあえず<body>と、タイトルである<h1>のスタイルだけを用意しておきました。これはあくまでサンプルなので、それぞれで適当に書き換えて遊んでください。
さて、このファイルがレイアウトテンプレート側でどう読み込まれていたか思い出してみてください。こうなっていましたね。
<%= stylesheet_link_tag "helos" %>この「stylesheet_link_tag」というのは、実はメソッドです。引数に指定したスタイルシートを読み込むためのタグを返す働きをします。ここでは、"helos"とだけ指定されていますね。これにより、「assets」フォルダ内の「stylesheets」フォルダから「helos.css.scss」ファイルをロードするためのタグが自動生成されるのです（SCSSを使わず「helos.css」ファイルを用意した場合も、これを読み込むタグがちゃんと作られます）。
デフォルトのapplication.html.erbでは、ここに"application"という値が用意されていました。これにより、application.cssが読み込まれていたわけです。では、このデフォルトのスタイルシートと、heloコントローラー用に用意されたものを両方読み込んで使いたい場合は？ これは「all」と指定します。stylesheet_link_tag allで、自動的にすべてのスタイルシートを読み込むタグが作られます。
※SCSS参考
http://sass-lang.com/
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※helos.css.scssの内容
body {
background: #FFF0F0;
}
h1 {
background: #FFAAAA;
color: #660000;
padding: 5px;
font-size:16pt;
}
※関連コンテンツ