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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

3回答

4113閲覧

使用するブラウザに依存せずに、セルの枠線演出(bordercolor)の違いを吸収したい。

domingojapan

総合スコア26

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2016/11/21 12:56

編集2016/11/21 21:54

###問題点と実現したい事

railsの中のhtml.erbで

<td class="value" bgcolor=<%= data['bg']%> bordercolor=<%= data['border']%>> <%= 実際は実装しているが確認したい事と別内容なので割愛 %> </td> (上記の<%= data['bg']%>や<%= data['border']%>には"blue"や"red"といった色を入れています)

という実装をすると、
・bgcolorの方
⇒IE/FireFox/Chromeによらず表示される演出に差異はない
(いずれのブラウザでも<%= data['bg']%>で指定した色になる)
・bordercolorの方(今回の問題点であり相談したい事)
⇒使用するブラウザによって差異が生じてしまいます。
(IEでは枠線のbordercolorには<%= data['border']%>で指定した色で表示されるのですが、
FireFoxやChromeだと枠線は黒色になってしまいます)

###試している事
上記ブラウザによる演出の違いを吸収すべく下記のように"IE"と"それ以外のブラウザ"で処理を分けるようにしました。

html.erb

1<% if @browser == "ie" %> <!-- 使用ブラウザがIEの場合--> 2 <td class="value_ie" bgcolor=<%= data['bg']%> bordercolor=<%= data['border']%>> 3 <%= 実際は実装しているが確認したい事と別内容なので割愛 %> 4 </td> 5<% else %> <!-- IE以外のブラウザの場合--> 6 <td class="value_notie" bgcolor=<%= data['bg']%> bordercolor=<%= data['border']%>> 7 <%= 実際は実装しているが確認したい事と別内容なので割愛 %> 8 </td> 9<% end %> 10 11(上記@browserについてですが、使用ブラウザの情報が入ります。 12予めgem browserをインストールしておき、どのブラウザを使用しているかを確認し、 13確認結果が@browserに正しくセットされている事を確認済みです)
◆CSSファイル td.value_ie { font-size: 10pt; border-width : 3px; border-style: solid; } td.value_notie { font-size: 10pt; border-width : 3px; border-style: solid; }

###確認したい事
上記試している事で"IE"と"FireFox/Chrome"で行う処理を分けられるようにしましたが、
FireFoxやChromeでもIEと同等の枠線の色を演出するには
CSSに手をいれる事になるのでしょうか?
それとも、JavaScriptにて実装しないといけないでしょうか?
それともまさかの非対応なのでしょうか?

###補足情報(言語/FW/ツール等のバージョンなど)
使用ブラウザについてですが、
IEは11です(10以下はサポート外でよいです)。
FireFox、Chromeについては最新と考えてもらってよいです。
これら以外のブラウザはひとまずサポート外でよいです。

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

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

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

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

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

kei344

2016/11/21 15:29

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
domingojapan

2016/11/21 21:51

すいません。ソースコード部分を整形しました。
guest

回答3

0

基本的に、<table>bgcolorbordercolorなどのデザイン指定用の属性は過去の遺物です。このあたりも、すべてCSSで指定しましょう。

それでもまだデザインがずれるのであれば、改めてご質問ください。

投稿2016/11/21 13:22

maisumakun

総合スコア145121

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

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

domingojapan

2016/11/21 21:52

そういうものなのですね... 分かりました。CSSなりJavascriptで書いてみます。 (まだ書いていないのでクローズにはしませんが)
guest

0

ベストアンサー

IEのみ bgcolor を使うような実装にせず、classを使った実装にされてはいかがでしょうか。

ruby

1<td class="bc_<%= data['border']%> bc_<%= data['background']%>"><%= 割愛部分 %></td>

HTML

1<td class="bc_red bg_yellow"><%= 割愛部分 %></td>

CSS

1/* border-color */ 2.bc_red { border-color:red; } 3.bc_yellow { border-color:yellow; } 4.bc_blue { border-color:blue; } 5/* background-color */ 6.bg_red { background-color:red; } 7.bg_yellow { background-color:yellow; } 8.bg_blue { background-color:blue; }

投稿2016/11/26 14:28

kei344

総合スコア69364

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

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

domingojapan

2016/11/26 14:47

>kei344さん 回答ありがとうございます。 回答されたCSSのソースを見て、 「railsのシステムの仕様の時点で、 該当セルに指定する箇所の枠線/背景色の種類数を予め設定しておいて、 設定した色については"bc/bgの色"用のclassをCSSに実装する」と理解しました。 (ソースでいう<%= data['border']%> bc_<%= data['background']%>に入る色種を 限定しておく) 自分はこの質問スレッドを投げた時点では 「htmlでサポートしているカラーであれば何色でも」を想定していましたので、 今回のkei344さんの回答のような発想をもてませんでした(CSSに定義するclass数は色数が多くなるほど手間が増えてしまうので...)。 こういう類のセルの演出については、あらかじめ使用する色数を設定してしまった方がよいですか?
kei344

2016/11/26 15:01

> なので今回の修正もできれば外部ファイルにてやろうと思っているのですが、 とおっしゃっていたので、そうしたいのかと思ったので、それに沿った回答をしたつもりです。 > こういう類のセルの演出については、あらかじめ使用する色数を設定してしまった方がよいですか? サービスの種類によると思います。RGB値を使って細かく指定できることが必要なら style を使うのが良いと思います。
domingojapan

2016/11/26 15:34

なるほど。 サービスの運用上、 指定されてくる色数がまだ読めない部分があるので、 ・外部CSSファイルに分けてkei344さんがご提示されたようなclass実装にする or ・html内部でCSS書きにして、styleを使用する かは今の段階では難しいですが、いずれを選択するにせよ実装方法としては自分の中ですっきりしたのでクローズしたいと思います。
guest

0

投稿時の「試している事」欄のhtmlのelse文の

html

1<% else %> <!-- IE以外のブラウザの場合--> 2 <td class="value_notie" bgcolor=<%= data['bg']%> bordercolor=<%= data['border']%>> 3 <%= 実際は実装しているが確認したい事と別内容なので割愛 %> 4 </td> 5<% end %>

をご指摘のCSSスタイルで下記のように書き換えました。

html

1<% else %> <!-- IE以外のブラウザの場合 --> 2 <td style="font-size: 10pt; border-style:solid; 3 border-width:3px; border-color:<%= data['border']%>; 4 background-color:<%= data['background"']%>"> 5 <%= 割愛部分 %> 6 </td> 7<% end %>

CSSスタイルの実装を埋め込む事でIEブラウザ使用時と同じ演出にできました。

teratailのルール的には別スレッドを建てた方が適切なのかもしれませんが、
今回の件に関しまして追加でご教授いただきたい事があります。

今回のrailsのプロジェクトでは他のCSSについてはhtmlにCSSスタイルを埋める方法ではなく、外部CSSファイルにて指定しています。なので今回の修正もできれば外部ファイルにてやろうと思っているのですが、

font-size: 10pt; border-style:solid; border-width:3px;

については、単純にできますが、

border-color:<%= data['border']%>; background-color:<%= data['background"']%>

の方が、外部CSSファイルにしたとき<%= data[***]%>部分を
どうしたらCSSに渡せるのかに悩んでいます。

CSSではなくsass/SCSSとかにすれば出来るものなのでしょうか?

投稿2016/11/26 14:19

domingojapan

総合スコア26

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問