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

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

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

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

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

Q&A

1回答

1939閲覧

CSSが反映されない

KK78795046

総合スコア13

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

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

0グッド

0クリップ

投稿2019/05/20 09:58

編集2022/01/12 10:55

前提・実現したいこと

Ruby on railsでオンラインのチャットアプリを製作しています。
メッセージ表示部分のスクロール実装中に、CSSが反映されないという問題が発生しています。

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

検証ツールで確認しましたが、取り消し線がなかったので、CSS自体は効いているものの、 反映がされていない状態です。

該当のソースコード

SCSS

1.wrapper{ 2 height: 100vh; 3 .chat-side{ 4 width: 300px; 5 height: 100%; 6 background-color: #1a1b1d; 7 float: left; 8 .side-header{ 9 background-color: #253141; 10 height: 100px; 11 width: 100%; 12 &__username{ 13 color: $mainWhiteColor; 14 font-size:16px; 15 font-weight:bold; 16 padding-left:20px; 17 padding-top:40px; 18 float: left; 19 } 20 .fa.fa-cog{ 21 font-weight: 100; 22 color: $mainWhiteColor;float: right; 23 padding-right:20px; 24 padding-top:40px; 25 } 26 .fa.fa-edit{ 27 font-weight: 100; 28 color: $mainWhiteColor;float: right; 29 padding-right:10px; 30 padding-top:40px; 31 } 32 } 33 .side-footer{ 34 padding-left:20px; 35 height: 100%; 36 overflow: auto; 37 &__group-name{ 38 color: $mainWhiteColor; 39 font-size: 15px; 40 font-weight: bold; 41 padding-top: 20px; 42 } 43 &__latest-message{ 44 color: $mainWhiteColor; 45 font-size: 11px; 46 font-weight: bold; 47 margin-top: 5px; 48 margin-bottom: 20px; 49 } 50 } 51 } 52 .chat-main{ 53 width:calc(100vw - 300px); 54 height:100vh; 55 float: right; 56 .main-header{ 57 height: 100px; 58 width: 100%; 59 background-color: $mainWhiteColor; 60 position: relative; 61 border-bottom: 2px solid #eeeeee; 62 63 &__current-group{ 64 font-size:20px; 65 color: #333333; 66 margin-left:40px; 67 padding-top:35px; 68 padding-bottom: 15px; 69 } 70 &__group-member{ 71 font-size: 12px; 72 color: #999999; 73 margin-left:40px; 74 } 75 &__edit-btn{ 76 color: #38aef0; 77 border:solid 1px #38aef0; 78 position: absolute; 79 top: 0; 80 left: auto; 81 right: 40px; 82 bottom: 0; 83 margin:auto; 84 height:40px; 85 width:80px; 86 margin-top:35px; 87 text-align: center; 88 line-height: 40px; 89 } 90 } 91 .main-msgs{ 92 height: calc(100% - 100px - 90px); 93 width:100%; 94 background-color: #fafafa; 95 padding-left:40px; 96 padding-top:40px; 97 padding-bottom:90px; 98 display: table; 99 overflow: scroll; 100 &__user-name{ 101 font-size: 16px; 102 color: #434a54; 103 display: table-cell; 104 } 105 &__msg-time{ 106 font-size: 12px; 107 color: #999999; 108 display: table-cell; 109 } 110 &__a-msg{ 111 font-size: 14px; 112 color: #434a54;clear: both; 113 } 114 } 115 .footer{ 116 position: fixed; 117 bottom: 0; 118 width:calc(100vw - 300px); 119 .form { 120 background-color: #DDDDDD; 121 box-sizing: border-box; 122 height: 90px; 123 padding: 20px 50px 20px 40px; 124 &__message { 125 border: none; 126 float: left; 127 height: 50px; 128 width: calc(100% - 150px); 129 } 130 &__picture { 131 background-color: white; 132 float: left; 133 height: 50px; 134 padding-right: 10px; 135 &__image { 136 font-size: 20px; 137 line-height: 50px; 138 } 139 .hidden { 140 display: none; 141 } 142 } 143 &__submit { 144 background-color: #38aef0; 145 border: none; 146 color: white; 147 float: right; 148 font-size: 16px; 149 height: 50px; 150 margin-left: 15px; 151 padding: 0 30px; 152 } 153 } 154 } 155 } 156} 157

haml

1.wrapper 2 .chat-side 3 .side-header 4 %p.side-header__username 5 = current_user.name 6 = link_to edit_user_path(current_user) do 7 %i.fa.fa-cog 8 = link_to new_group_path do 9 %i.fa.fa-edit 10 .side-footer 11 - current_user.groups.each do |group| 12 = link_to group_messages_path(group) do 13 .side-footer__group-name 14 = group.name 15 .side-footer__latest-message 16 = group.show_last_message 17 .chat-main 18 .main-header 19 %h2.main-header__current-group 20 = @group.name 21 .main-header__group-member グループメンバー 22 =link_to edit_group_path(@group) do 23 .main-header__edit-btn Edit 24 .main-msgs 25 = render @messages 26 .footer 27 .form 28 = form_for [@group, @message] do |f| 29 = f.text_field :content, class: 'form__message', placeholder: 'type a message' 30 .form__picture 31 =f.label :image, class: 'form__picture__image' do 32 = fa_icon 'picture-o', class: 'icon' 33 = f.file_field :image, class: 'hidden' 34 = f.submit 'Send', class: 'form__submit' 35

messagehtmlhaml

1_message.html.haml 2 3.main-msgs__box 4 .main-msgs__user-name 5 = message.user.name 6 .main-msgs__msg-time 7 = message.created_at.strftime("%Y/%m/%d %H:%M") 8 .main-msgs__a-msg 9 - if message.content.present? 10 %p.lower-message__content 11 = message.content 12 = image_tag message.image.url, class: 'main-msgs__a-msg__image' if message.image.present? 13

試したこと

・詳細度の確認→クラスセレクタしかないので関係ない。
・hamlのインデントの影響?→確認したが問題ない。

検証ツールスクリーンショット①
検証ツールスクリーンショット②

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

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

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

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

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

m.ts10806

2019/05/20 13:11

コンソールタブのエラーも分かるようにご提示ください。私としてはそちらの方が気になる
KK78795046

2019/05/20 13:23

初心者すぎて申し訳ございません。。。 追加いたしました!
x_x

2019/05/21 01:21

反映されないというのは何で判断したのでしょうか?
KK78795046

2019/05/21 02:59

検証ツール内で高さを小さくした場合に、子要素がはみ出るかと思ったのですが、はみ出ずに子要素の高さまでしか小さくできなかったので、反映されないと判断しました。
x_x

2019/05/21 03:03

子要素? 具体的にどの要素がどこからはみ出るということでしょうか?
KK78795046

2019/05/21 05:10

.main-msgsから、&__user-nameと &__msg-timeと &__a-msgがはみ出るイメージです。
x_x

2019/05/21 05:16

少なくとも&__user-nameと&__msg-timeにはdisplay: table-cellが指定されていてはみ出ることはないように見えます。 該当部分のHTMLを挙げるわけにはいかないのでしょうか?
KK78795046

2019/05/21 05:56

ご返信ありがとうございます。 該当の部分テンプレートのHTMLを追記しました。 ご確認いただけると幸いです!
guest

回答1

0

検証画面をスクショを掲載していただけると

投稿2019/05/20 10:11

joru

総合スコア45

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

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

m.ts10806

2019/05/20 10:42

回答者さん 「質問への追記修正依頼」に書く内容と思います 質問者さん 質問は編集できます。また画像はteratailの画像添付機能でご提示ください
KK78795046

2019/05/20 13:09

ご教示いただき、ありがとうございます!編集いたしました! 遅くなってしまい恐縮ですが、ご確認いただけますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問