fc2ブログ

2023.09 «  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 - - - - » 2023.11
TOP > スタイルシートをインクルードする

 ← validates_uniqueness_of はなんかスゴい | TOP | メソッド名の後にある「!」びっくりマーク・エクスクラメーションマークとは

スタイルシートをインクルードする 

rails では、スタイルシートstylesheetタグを記述するのに、stylesheet_link_tag を使います。

stylesheet_link_tag は、最初の方のオプションがファイル名、最後の方のオプションが属性名と属性値になります。

ファイル名の拡張子は省略できます。その場合、.css が勝手にファイル名のおしりに付きます。

ファイル名のディレクトリ名は省略できます。その場合、/stylesheets/ が勝手にファイル名のあたまに付きます。

例を見ていきましょう!

1~3は、結局全部同じタグになります。

4だけ仲間はずれです。

1.ファイル名の拡張子もディレクトリ名も省略


<%= stylesheet_link_tag "honyarara" %>
<link href="/stylesheets/honyarara.css?1175827191" rel="Stylesheet" type="text/css" />



2.ファイル名のディレクトリ名を省略


<%= stylesheet_link_tag "honyarara.css" %>
<link href="/stylesheets/honyarara.css?1175827191" rel="Stylesheet" type="text/css" />



3.ファイル名の拡張子もディレクトリ名も律儀に全部書く


<%= stylesheet_link_tag "/stylesheets/honyarara.css" %>
<link href="/stylesheets/honyarara.css?1175827191" rel="Stylesheet" type="text/css" />



4.ディレクトリ名を絶対パスで指定


<%= stylesheet_link_tag "/honyarara.css" %>
<link href="/honyarara.css?1175827191" rel="Stylesheet" type="text/css" />



ファイル名の後ろに ?1175827191 とありますが、これはスタイルシートファイル自身のタイムスタンプです。これも勝手に付きます。

こういうタイムスタンプが付くことで、新しいファイルになったらブラウザにキャッシュされている古いファイルは無視して、新しいファイルを読み込むようになります。いろいろ考えてありますね、rails は。



5.属性名と属性値を付けた場合


<%= stylesheet_link_tag "honyarara", :media => "all" %>
<link href="/stylesheets/honyarara.css?1175827191" media="all" rel="Stylesheet" type="text/css" />



ここで、media 属性って何?rails 特有のものなのか?と思って調べましたよ奥さん。

そしたら、rails 特有のものではないようです。一般的な html に使われるようです。

詳しくは↓
http://www.w3.org/TR/html4/types.html#type-media-descriptors

まあ、要するに以下の属性値のどれかが設定できます。通常は、all で事足りるようです。
screen
tty
tv
projection
handheld
print
braille
aural
all


では、さらば。

【広告】

[2007.07.31(Tue) 00:21] RubyOnRails(View・ERb)Trackback(0) | Comments(0)
↑TOPへ

 ← validates_uniqueness_of はなんかスゴい | TOP | メソッド名の後にある「!」びっくりマーク・エクスクラメーションマークとは

COMMENT

COMMENT POST















管理者にだけ表示

 ← validates_uniqueness_of はなんかスゴい | TOP | メソッド名の後にある「!」びっくりマーク・エクスクラメーションマークとは