Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@shingoteshima

Sassを使ってビューごとにスタイルを適用させる方法

More than 1 year has passed since last update.

はじめに

こんにちは!#teamサイゼリヤアドベントカレンダー4日目のテッシです。
1年半前から大変お世話になっているぶっちー(@yoshixj)と実際にサイゼリヤに行ったことがあるため今回の#teamサイゼリヤに参加させていただきましたw

今回はRailsで、Sassを使ってビューごとにスタイルを適用させる方法について書きたいと思います。

スタイルシートの読み込み

Railsではデフォルトでapp/assets/stylesheets/application.cssというファイルが存在し、以下のような内容になっていると思います。

app/assets/stylesheets/application.css
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

この中に*= require_tree .という記述があり、これによってapp/assets/stylesheets以下のすべての階層のスタイルシートが読み込まれます。
そのため、ビューごとにスタイルを適用したい場合でもapp/assets/stylesheets以下のスタイルシートがすべてのビューに適応されてしまい、思わぬレイアウトの崩れが生じることがあります。

Sassの特徴を使う

Sassではネスト(入れ子構造)が使えます。
cssで書くと以下のようになりますが、

css
ul {
  margin: 0;
}
ul li{
  margin: 10px;
}
ul li a{
  color: #333;
}

Sassを使えば以下のようにネスト(入れ子構造)で書けます。

scss
ul {
  margin: 0;
  li {
    margin: 10px;
    a {
      color: #333;
    }
  }
}

今回はこのSassのネスト(入れ子構造)を使ってapp/assets/stylesheets以下のスタイルシートがすべてのビューに適応されてしまう問題を解決します。

解決方法

例えば、app/views/top/indexのページにスタイルを当てる場合は、app/assets/stylesheets/top/ ディレクトリを作成し、index.scssファイルを作成し、以下のように記述します。

app/assets/stylesheets/top/index.scss
.top-index {
  // このブロックの中にスタイルを書いていく
  ul {
    list-style: none;
  }
}

top-indexというクラス名は自由に設定していいですが、上記の例のようにcontroller名-action名をクラス名に使うと対応が分かりやすいかもしれません。

次に、erbファイルの一番親の要素に以下のようにクラス名を当てます。

app/views/top/index.html.erb
<div class="top-index">
  <!-- このブロックの中にコードを書いていく -->
  <ul>
    <li>テッシ</li>
    <li>スアレス</li>
    <li>ネイマール</li>
  </ul>
</div>

このようにtop-indexというクラス名を一番親の要素に当てることで、スタイルシートの.top-indexで囲われたブロック内のスタイルのみが適用され、ビューごとにスタイルを当てることが可能になり、思わぬレイアウトの崩れを防ぐことができます。

最後に

今回はSassの特徴を利用してビューごとにスタイルを適用できるようにする方法を書きましたが、他にもerbファイルに、読み込むスタイルシートを指定する方法などもあると思います。
少しでも参考になれば幸いです。最後まで読んでくださりありがとうございます!

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?