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

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

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

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

CSS

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

Q&A

解決済

1回答

1098閲覧

css 表示を切り替える方法

riamk

総合スコア47

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/04/14 08:45

編集2017/04/15 13:53

###前提・実現したいこと
Rails4

簡単なQ&Aサイトを作成しました。
そこで解決した質問は「解決済み」
未解決の時は「未解決」
とクリックすると表示が切り替わるボタン(リンク)を作成しました。

このボタンは、questionsテーブルに is_solved カラムをbooleanで作成してAjaxで表示が切り替わるようにしています。

今回実現したいのは、このボタンが未解決の時は黒色。
解決済みになったら赤色。
などと表示されている状況によって文字の色を変えたりしたいです。

###発生している問題・エラーメッセージ

<p class="解決済み">...</p> <p class="未解決">...</p> みたいにすれば、状況によって表示のデザインを切り替えられるのかな? と思ったのですが、この解決済みや未解決に入れるデータが分からず実現できずにいます。

どのようにしたら実現できるのか教えてください。

###該当のソースコード
現在ボタンは以下のような記述で作成して表示しています。

question_controller.rb

ruby

1 2# 略 3 def make_resolved 4 @question = Question.find(params[:question_id]) 5 if @question.update(is_solved: true) 6 // 7 end 8 respond_to do |format| 9 format.html{render :show} 10 format.js{} 11 end 12 end 13# 略 14end

views/questions/show.html.erb

ruby

1# 略 2<div id='ajax_button'> 3 <%= render :partial=>'make_resolved' , locals: {question: @question} %> 4</div>

views/questions/_make_resolved.html.erb

ruby

1<%= link_to(question.is_solved ? '解決済み':'受付中',{controller: :questions,action: :make_resolved, question_id: @question.id, remote: true}) %>

views/questions/make_resolved.js.erb

ruby

1$("#ajax_button").children().remove(); 2$("#ajax_button").append('<%= escape_javascript render :partial => "make_resolved" ,locals: {question: @question},:layout => false %>');

説明が分かりづらい点もあるかもしれませんが、よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

初心者マークがついていませんが解説します。
まず基本的なことから、RubyonRailsのwebアプリは下記の4つから構成されます。

  • html5=>HyperText Markup Languageインターネットの黎明期に学者が論文を共有するために作られた言語で、<tag></tag>で要素を管理する、それのversion5、デスクトップアプリに劣らないUIを備えた最新のもの
  • RubyonRails=>webフレームワークの一つ、データ(DB)とユーザーからのアクションを結びつけhtmlを作成する。
  • javascript=>webブラウザ上で動作する、軽量言語webブラウザ上で完結した動作をしたりwebフレームワークの動きを助けデータをやりとりしたりする
  • stylesheet=>htmlにもデザインの機能はあるが、それを分離し、構造化したもの、通常、htmlのtagのclassやidを頼りにデザインを適用する。

web開発をしっかりやろうと思ったら最低限これら4つを勉強しないといけません。

で、以上を踏まえるとまず、質問のタグはRubyやRuby on Railsではありません。
html CSS等で質問するべきです。

<p class="解決済み">...</p> <p class="未解決">...</p> を何にすべきかわからないとありますが、当たり前です。 CSSに自分でこのclassの時はこの色にすると指定してそれを読み込み 適用するからです。 bootstrapのようなフロントエンドWebアプリケーションフレームワークを適用していれば、 class名だけで変化をつけられますが、基本的にcssを勉強して自分でやルものだと御考えください。

また、

ruby

1<%= link_to(question.is_solved ? '解決済み':'受付中',{controller: :questions,action: :make_resolved, question_id: @question.id, remote: true}) %> 2

の記述も問題です。
このままでは、is_solvedによって、メッセージしか変化しませんしclass等が変化するようにしないとcssが適用されません。そもそも、解決済みなのにリンクが推せるって…。

しかし、今回の場合だけ、上記の学習をすっ飛ばしてやる方法があります。

ruby

1<%= link_to(question.is_solved ? '解決済み':'受付中',{controller: :questions,action: :make_resolved, question_id: @question.id, remote: true},question.is_solved ? :style=>"color:red":style=>"color:black") %> 2

しかし、これより踏み込んだデザインにするには、基礎からしっかり学ぶ必要があります。
RubyonRailsは乗っけは本当に簡単ですが、細かくカスタマイズして想像通りの物を作るには
やはり多岐にわたる知識と技術が必要です(それでも他のフレームワークよりだいぶ簡単ですが…)
頑張ってください。

投稿2017/04/14 15:35

編集2017/04/16 03:29
moke

総合スコア2241

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

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

riamk

2017/04/15 13:50

ご回答及び、ご指摘ありがとうございます。 質問に関してはhtml、cssのタグに変更します。 また、解決済みなのにリンクが推せるっていうのも変なので今後修正して見直していこうかと思います。 cssなどまだまだ知識不足なところが多いので、今後がcss、htmlに関しても勉強していこうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問