質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

3975閲覧

画面幅によるCSSの読み込みの切り替え実装について(erbテンプレート側)

BMM

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/02 07:06

編集2017/05/02 07:53

###前提・実現したいこと
画面幅に応じて、読み込むCSSを変えたい。(CSSは別ファイルです)
RubyOnRails5.0です。

###発生している問題・エラーメッセージ
application.erbにビューポートを設定しています。

<meta name="viewport" content="width=device-width, initial-scale=1">

erbテンプレート側で、ビューポートの値を取りたいのですが、取る方法はありますでしょうか?

やり方を色々調べてみましたが、JavaScriptなどを使わないと取れないようでした。

実現したいと思っているのは、erbテンプレート内で画面幅で条件分岐をして読み込むcssを変える、ということです。

<% if 画面幅が415px以下の場合 %> <%= stylesheet_link_tag "mobile/application", :media=>"(max-width: 415px)" %> <% else %> <%= stylesheet_link_tag "mobile/application", :media=>"(max-width: 415px)" %> <% end %>

###補足情報(言語/FW/ツール等のバージョンなど)
・読み込むCSSを分けたいので、一つのCSSの中でメディアクエリーによる分岐はしたくないです。
・ビューポートを指定したのは、画面幅を取れるかと思ってのことですが、そもそも無理なのでしょうか。
・あまりわかっておらず、頓珍漢な質問でしたら申し訳ございません。何かヒントいただけると嬉しいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

Ruby On Rails はあまりわからないのですが、一般的にサーバーサイド言語で画面幅の取得はできません。(端末の特定ができるなら出来ますが少なくとも回転状況はわかりません)

そのため、CSS内で @media で切り分けるか、link要素のmedia属性をそれぞれの画面幅で指定し、それをCSSの数分だけ並べることで切り分けが出来ると思います。


【レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ】
http://sole-color-blog.com/blog/php/71/

<link rel="stylesheet" href="small.css" media="screen and (max-width:480px)">/* 画面サイズが480pxまでこのファイルのスタイルが適用される。*/ <link rel="stylesheet" href="medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> /* 画面サイズ480pxから1024pxまではこのファイルのスタイルが適用される。 */ <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)">

【Media Queriesの基本的な実用方法と書き方 | web codery】
http://web-codery.com/html/103

/* CSS media */ @media screen and (max-height: 640px) {} /* CSS import */ @import url(example.css) screen and (min-width: 541px); /* HTML */ <link rel="stylesheet" href="example.css" media="screen and (min-width: 541px)">

投稿2017/05/03 06:39

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BMM

2017/05/08 12:16

ご回答ありがとうございます! そうなのですね。 ということはクライアントからのリクエストに明示的に画面幅を送り、サーバ側で処理してレスポンスを返すときにまた返してあげないといけないということですよね。 実は、後者の方法を試そうと思って以下のように書いていたのですが、cssがmedia=で指定した名前のようになってしまったため、条件分岐でやってみようかと思ったのです。 <%= stylesheet_link_tag "mobile/one_column", media="(max-width: 415px)" %> <%= stylesheet_link_tag "one_column", media="(min-width: 415px)" %> cssもrubyも初心者で調べながらやっている状況で、何か根本的に間違っているかもしれず、困っていました。 教えていただいたサイトを見ます。 ありがとうございます。
kei344

2017/05/08 12:25

> ということはクライアントからのリクエストに明示的に画面幅を送り、サーバ側で処理してレスポンスを返すときにまた返してあげないといけないということですよね。 基本的に画面構成をクライアントに任すのが一般的かと思います。一定幅以上でしか表示されないコンテンツがあるなら後読み込みすることもあると思いますが、そこまで多いケースだとは思いません。 Ruby On Rails はよくわからないのですが、動的に生成せず、フルパスで直書きしてしまえば良いような。 <link rel="stylesheet" href="https://example.com/wide.css" media="screen and (min-width:1024px)">
BMM

2017/05/10 14:16

ありがとうございます! ふと思ったのですが、 両方書いた場合、2つともcssは読み込まれるが適用されない、ということになりますか? であれば、メディアクエリとあまり変わらないということになるかな、と思い・・
kei344

2017/05/10 14:45

> 両方書いた場合、2つともcssは読み込まれるが適用されない、ということになりますか? > であれば、メディアクエリとあまり変わらないということになるかな、と思い・・ 「両方」とはどれとどれ?適用されるとはどれが? 画面幅によって適用させるCSSを切り替えるためにメディアを指定しているのだから、メディアに対応している今のブラウザのほとんどが指定したCSSを適用させると思いますよ。HTMLファイルを作って試してみてください。 「そもそもダウンロードさせたくない」という場合は、対応しないメディアを読み込むかどうかはブラウザ依存だと思います。そういった分岐を正確にしたいなら JavaScriptで処理するか、ユーザーエージェントで画面サイズを決めうちするかどちらかだと思いますよ。 (ユーザーエージェントからわかる情報で画面サイズが取得できるわけではない)
guest

0

一つのCSSの中でメディアクエリーによる分岐もjavascriptも嫌だとなると...。

具体的な方法でなく恐縮ですが
javascriptやCSSを学ぶのは結構なコストなので
BootStrap等のレスポンシブルフレームワークを導入しBootStrapに
画面幅で条件分岐を検出してもらい
その上で、少しCSSをいじるといったほうが、楽にかっこいいものができ
Railsのロジックに集中できると思います。

※bootstrapを導入する気になったら、私の回答履歴を参照してみるのもいいかもしれません。

投稿2017/05/03 06:12

編集2017/05/03 06:43
moke

総合スコア2241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BMM

2017/05/07 08:44

ご回答ありがとうございます。 メディアクエリによる分岐だと、重くなってしまうのが懸念だったのです。 色々調べて見た結果、javascriptで画面幅をとるようにした方がいいのかな、と思ったりあとはgemをインストールしてview側で簡単に取れるようにしたほうがいいかもしれない、と思い始めました。 bootstrapはCSSのフレームワークなのですね。 導入する際は参考にさせていただきます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問