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

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

ただいまの
回答率

90.61%

  • Ruby on Rails

    7026questions

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

  • HTML5

    3903questions

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

  • CSS3

    1998questions

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

[Ruby&HTML5&CSS3]Webサイトが正しく表示されない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 239

s0ra

score 30

RubyとHTML,CSSで掲示板のようなWebサービスを作っています。Safariでは正しく表示されるのですが、Chromeでは正しく表示されません。どうしたらいいでしょうか。

app.rb

require 'bundler/setup'
Bundler.require
require 'sinatra/reloader' if development?
require 'sinatra/activerecord'
require './models'
require 'net/http'
require "rest-client"
require "date"
require "./image_uploader.rb"
enable :sessions

helpers do
    def current_user
        User.find_by(id: session[:user])
    end
end

get '/' do
    if current_user.nil?
        @contributions = Contribution.none
        erb :choice
    else
        @contributions = Contribution.all
        erb :profile
    end
end

get '/signup' do
    erb :sign_up
end

get '/timelines' do
    if current_user.nil?
        @contributions = Contribution.none
    else
        @contributions = Contribution.all.order("created_at desc")
    end
    erb :time_line
end
post '/timelines/new' do
    #current_user.contributions.create(text: params[:text])
    current_user.contributions.create({
        title: params[:title],
        text: params[:text],
        time: "#{Date.today.year}#{Date.today.month}#{Date.today.day}#{DateTime.now.hour}#{DateTime.now.minute}#{DateTime.now.second}秒",

    })
    redirect '/timelines'
end

post '/timelines/:id/delete' do
    del = Contribution.find(params[:id])
    del.destroy
    redirect '/timelines'
end

post '/signup' do
    user = User.create(
    name: params[:name],
    mail: params[:mail],
    password: params[:password],
    profile_image: "",
    password_confirmation: params[:password_confirmation]
    )
    if user.persisted?
        session[:user] = user.id
        image_upload(params[:image])
        redirect '/'
    else
        redirect '/signup'
    end
end

post '/timelines/like/:id' do
        current_user.likes.create({
            contribution_id: Contribution.find_by(id: params[:id]).id,
        })
    redirect '/timelines'
end

get '/signout' do
    session[:user] = nil
    redirect '/'
end

get '/signin' do
    erb :sign_in
end

post '/signin' do
    user = User.find_by(mail: params[:mail])
    if user && user.authenticate(params[:password])
        session[:user] = user.id
        redirect '/'
    else
        redirect '/signin'
    end
end

get '/contribution/:id' do
    @contribution = Contribution.find_by(id: params[:id])
    @comments = Contribution.find_by(id: params[:id]).comments.all
    erb :comment
end

post '/timelines/comment/new/:id' do
    contributions = Contribution.find_by(id: params[:id])
    contributions.comments.create({
        comment: params[:comment],
        time: "#{Date.today.year}#{Date.today.month}#{Date.today.day}#{DateTime.now.hour}#{DateTime.now.minute}#{DateTime.now.second}秒",
        user_id: current_user.id
    })
    redirect "/contribution/#{params[:id]}"
end

post '/timelines/comment/:id' do
        current_user.likes.create({
            contribution_id: Contribution.find_by(id: params[:id]).id,
        })
    redirect "/contribution/#{params[:id]}"
end

img_upload.rb

def image_upload(img)
  logger.info "upload now"
  tempfile = img[:tempfile]

  upload = Cloudinary::Uploader.upload(tempfile.path)

  contents = User.last

  contents.update_attribute(:profile_image, upload['url'])
end

time_line.erb

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="/accets/css/layout.css" type="text/css">
    <link rel="stylesheet" href="/accets/css/all.css" type="text/css">
    <meta charset="UTF-8">
  </head>
  <body>
    <div class="all">
      <div class="nav_bar">
        <div class="container">
          <div class="contributions_all" >
                 <% @contributions.each do |contribution| %>
                  <div class="contribution">
                    <div class="in_contribution">
                      <img src="<%= User.find_by(id: contribution.user_id).profile_image %>" width="30" height="30">
                      <small><%= User.find_by(id: contribution.user_id).name %></small>
                      <small><font size="-1"><%= contribution.time %></font></small>
                      <br>
                        <a href="/contribution/<%= contribution.id %>"><small><font size="4"><%= contribution.title %></font></small></a>
                        <div class="like">
                          <form action="/timelines/like/<%= contribution.id %>" method="post">
                            <input type="submit" value="いいね <%= contribution.likes.all.size %>">
                          </form>
                          <form action="/timelines/<%= contribution.id %>/delete" method="post">
                            <input type="submit" value="削除">
                          </form>
                        </div>
                    </div>
                    </div>
                <% end %>
          </div>
          <div class="left">
              <div class="menu">
                <nav>
                    <div class="nav-container">
                        <ul class="globalnav">
                            <li><a href="/">プロフィール</a></li>
                            <li><a href="/timelines">タイムライン</a></li>
                            <li><a href="/signout">ログアウト</a></li>
                        </ul>
                    </div>
                </nav>
                  <div>
                  <form action="/timelines/new" method="post">
                    <p class="title">タイトル:<input type="text" name="title" required></p>
                    <p class="text">本文:</p><textarea name="text" required></textarea>
                    <p><input type="submit" value="投稿"></p>
                  </form>
                </div>
              </div>
          </div>
        </div>
    </div>
  </body>
</html>

layout.css

input.form{
    width:400px;
    height:50px;
    font-size:1.2em;
}
.nav_bar{
    margin: 0 ;
    position: absolute;
    height: 7%;
    width: 100%;
    background-color: #000;
}
.container {
    margin: 0 auto;
    position: absolute;
    top: 100%;
    width: 70%;
}

.contributions_all{
    width: 70%;
    float: right;
    position: relative;
    background-color: #fff;
}

.contribution{
    width: 50%;
    margin:0 auto;
}

.in_contribution {
    font-size:30px;
    /*border: 1px solid #000000;*/
    border-bottom:solid  0.8px #000000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.like {
    font-size: small;
}

.like form {
    float: left;
}
textarea {
    border: 1px solid #ccc;
    width: 200px;
    height: 100px;
    font-size: 16px;
}
.all{
    width: 100%;
    height: 100%;
}
.left{
    background-color: #fff;
    width: 29%;
    height: 90%;
}

.title, .text{
    color: #000; 
}
.time{
    font-size: 1em;
}

all.css

body{
    background: -webkit-gradient(linear, left top, right top, from(#83a4d4), to(#b6fbff));
    margin: 0px;
}
.menu {
    position: fixed;
    width: 250px;
    height: 100%;
    padding: 50px 20px;
    background: #fff;
}

nav {
    margin: 0;
    padding: 50px 0 0 0;
}
.globalnav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.globalnav li {
    margin: 0 0 10px 0;
}
.globalnav li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
}
.globalnav li a:hover::after {
    width: 100%;
    border-bottom: 1px solid #000;
}



a {
    text-decoration: none;
}

a {
  display: inline-block;
}

.globalnav li a::after {
  content: "";
  display: block;
  width: 0;
  transition: width 0.5s;
  border-bottom: 1px solid #000;
}

.globalnav li a:hover::after {
  width: 100%;
}
.menu {
    position: fixed;
    width: 250px;
    height: 100%;
    padding: 50px 20px;
    background: #fff;
}

参考までに

Safari
!(68f344645279e6b74b716c2f331efbff.png)](900df751aa237070bbe510fad69e65ad.png)

Chrome
イメージ説明

このようにbackgroundのグラデーションが表示されません。どのようにしたら表示されるでしょうか。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

すでに解決しているようですが、「Chromeはベンダープレフィックスがないとダメ」と思われないよう書いておきます。

まあ、ここを見れば歴史的経緯はわかるのですが、提示されたのは最新の構文ではありません。toキーワード付きの構文にしてください。
linear-gradient
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

body{
    background: -webkit-gradient(linear, left top, right top, from(#83a4d4), to(#b6fbff));
    background: -webkit-linear-gradient(top, #83a4d4 0%, #b6fbff 100%);
    margin: 0px;
}


最新chromeは-webkit-linear-gradientじゃないとでないみたいですね。

http://blog.webcreativepark.net/2014/02/05-133918.html
http://www.htmq.com/css3/linear-gradient.shtml

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/24 15:26

    ありがとうございます!

    キャンセル

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

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby on Rails

    7026questions

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

  • HTML5

    3903questions

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

  • CSS3

    1998questions

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