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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

2回答

5403閲覧

WEBサイトのデザインをコピーしたいのですが、CSSとJAVASCRIPTがうまく働きません。

Tomoaki_Fukuda

総合スコア75

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/02/06 06:04

編集2017/02/06 06:10

###前提・実現したいこと
Ruby on railsとBootstrapの練習のためデザイン性の良いWEBサイトを模写しております。

###発生している問題
こちらのサイトの模写をするため、Google Chromeの「ページのソースの表示」の機能を使い、HTMLはコピーすることが出来ました。しかし、CSSとJAVASCRIPTがうまく適用されず、ここで詰まってしまっております。
正しく模写するために、Ruby on railsを使用する上で、CSSとJAVASCRIPTをどのように記載すれば良いのでしょうか?
何卒ご教示頂きたくお願い致します。

###HTMLのコード(一部抜粋)

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="description" content=""> 8 <meta name="author" content=""> 9 <title>Agency - Start Bootstrap Theme</title> 10 <!-- Bootstrap Core CSS --> 11 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 12 <!-- Custom Fonts --> 13 <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 14 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> 15 <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> 16 <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 17 <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'> 18 <!-- Theme CSS --> 19 <link href="css/agency.min.css" rel="stylesheet"> 20 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 21 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 22 <!--[if lt IE 9]> 23 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script> 24 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script> 25 <![endif]--> 26</head> 27<body id="page-top" class="index"> 28 <!-- Navigation --> 29 <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top"> 30 <div class="container"> 31 <!-- Brand and toggle get grouped for better mobile display --> 32 <div class="navbar-header page-scroll"> 33 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 34 <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 35 </button> 36 <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a> 37 </div> 38 <!-- Collect the nav links, forms, and other content for toggling --> 39 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 40 <ul class="nav navbar-nav navbar-right"> 41 <li class="hidden"> 42 <a href="#page-top"></a> 43 </li> 44<li> 45 <a class="page-scroll" href="#services">Services</a> 46 </li> 47 <li> 48 <a class="page-scroll" href="#portfolio">Portfolio</a> 49 </li> 50 <li> 51 <a class="page-scroll" href="#about">About</a> 52 </li> 53 <li> 54 <a class="page-scroll" href="#team">Team</a> 55 </li> 56 <li> 57 <a class="page-scroll" href="#contact">Contact</a> 58 </li> 59 </ul> 60 </div> 61 <!-- /.navbar-collapse --> 62 </div> 63 <!-- /.container-fluid --> 64 </nav> 65 <!-- Header --> 66 <header> 67 <div class="container"> 68 <div class="intro-text"> 69 <div class="intro-lead-in">Welcome To Our Studio!</div> 70 <div class="intro-heading">It's Nice To Meet You</div> 71 <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a> 72 </div> 73 </div> 74 </header> 75 <!-- Portfolio Modal 3 --> 76 <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true"> 77 <div class="modal-dialog"> 78 <div class="modal-content"> 79 <div class="close-modal" data-dismiss="modal"> 80 <div class="lr"> 81 <div class="rl"> 82 </div> 83 </div> 84 </div> 85 <div class="container"> 86 <div class="row"> 87 <div class="col-lg-8 col-lg-offset-2"> 88 <div class="modal-body"> 89 <!-- Project Details Go Here --> 90 <h2>Project Name</h2> 91 <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 92 <img class="img-responsive img-centered" src="img/portfolio/treehouse-preview.png" alt=""> 93 <p>Treehouse is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. This is bright and spacious design perfect for people or startup companies looking to showcase their apps or other projects.</p> 94 <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/treehouse-free-psd-web-template/">FreebiesXpress.com</a>.</p> 95 <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 96 </div> 97 </div> 98 </div> 99 </div> 100 </div> 101 </div> 102 </div> 103 104 <!-- Portfolio Modal 4 --> 105 <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true"> 106 <div class="modal-dialog"> 107 <div class="modal-content"> 108 <div class="close-modal" data-dismiss="modal"> 109 <div class="lr"> 110 <div class="rl"> 111 </div> 112 </div> 113 </div> 114 <div class="container"> 115 <div class="row"> 116 <div class="col-lg-8 col-lg-offset-2"> 117 <div class="modal-body"> 118 <!-- Project Details Go Here --> 119 <h2>Project Name</h2> 120 <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 121 <img class="img-responsive img-centered" src="img/portfolio/golden-preview.png" alt=""> 122 <p>Start Bootstrap's Agency theme is based on Golden, a free PSD website template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Golden is a modern and clean one page web template that was made exclusively for Best PSD Freebies. This template has a great portfolio, timeline, and meet your team sections that can be easily modified to fit your needs.</p> 123<p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/golden-free-one-page-web-template/">FreebiesXpress.com</a>.</p> 124 <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 125 </div> 126 </div> 127 </div> 128 </div> 129 </div> 130 </div> 131 </div> 132 <!-- jQuery --> 133 <script src="vendor/jquery/jquery.min.js"></script> 134 135 <!-- Bootstrap Core JavaScript --> 136 <script src="vendor/bootstrap/js/bootstrap.min.js"></script> 137 138 <!-- Plugin JavaScript --> 139 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" crossorigin="anonymous"></script> 140 141 <!-- Contact Form JavaScript --> 142 <script src="js/jqBootstrapValidation.js"></script> 143 <script src="js/contact_me.js"></script> 144 145 <!-- Theme JavaScript --> 146 <script src="js/agency.min.js"></script> 147 148</body> 149 150</html> 151

###補足情報(言語/FW/ツール等のバージョンなど)
Ruby on rails 4.2.5

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

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

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

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

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

guest

回答2

0

ページの適当な場所で右クリック➡名前を付けて保存

投稿2017/02/06 06:15

turbgraphics200

総合スコア4267

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

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

Tomoaki_Fukuda

2017/02/07 14:25

ご回答ありがとうございます。
guest

0

ベストアンサー

おそらくCSSやJavascriptのファイルがダウンロードできないのでしょう。
httpsではじまっていないcssとjsはすべて「そのサイト上においてあるデータ」を参照しています。おそらくあなたのローカル環境にそれらのファイルがないのでしょう。同じものをダウンロードしてローカル環境においてあるなら、パスを修正するなりなんなりして正しいcssやjsがブラウザに読み込まれるよう修正しましょう。

投稿2017/02/06 06:14

masaya_ohashi

総合スコア9206

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

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

Tomoaki_Fukuda

2017/02/07 14:28

ご回答ありがとうございました。 例えば、Javascriptでいうと、 <!-- jQuery --> <script src="vendor/jquery/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Plugin JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" crossorigin="anonymous"></script> <!-- Contact Form JavaScript --> <script src="js/jqBootstrapValidation.js"></script> <script src="js/contact_me.js"></script> <!-- Theme JavaScript --> <script src="js/agency.min.js"></script> という記載がありますが、これらのファイルをダウンロードして、 assetsの中のJavascriptの中にファイルを作成するという認識でよろしいですよね?
masaya_ohashi

2017/02/08 00:03

そうです。後はそれぞれのscriptタグのsrcをそのassetsへのパスへ修正する必要があります。
Tomoaki_Fukuda

2017/02/08 01:12

ご回答誠にありがとうございます。トライして見ます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問