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

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

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

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

Q&A

解決済

1回答

567閲覧

転記したcssが適用されない理由

maguzo

総合スコア57

CSS

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

0グッド

0クリップ

投稿2018/05/11 13:53

とあるサイトから気に入ったデザインがあり、コードのコピーで実装ができる旨が記載がありました。
この中の9.text input loveを使用したいと考えて居ります
とあるサイト

該当のコードのcodepenは以下の通りです。
codepen

しかしながら実際にこれを文字どおりコピペをしてもなぜか実装できません
JSfiddle

codepenでは実装できているのに、JSfiddleではできないというのが理解ができないのですが、
何か根本的に問題があるのでしょうか。

よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

SCSSで書かれているからです。

Re: maguzo さん

投稿2018/05/11 13:57

think49

総合スコア18156

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

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

maguzo

2018/05/11 14:07

コメントありがとうございます。 JSfiddleについてscssに修正しても特段変化はありません。 https://jsfiddle.net/k0Lfhz6a/2/ 自分自身のサイトでも同様なのですが、sassの導入方法もいろいろ調べましたが、scss拡張子で読み込ませれば問題なさそうなのですが、、、実装できません。 なお、レンタルサーバーのロリポップを利用しており、rubyのインストール等は必要がないと思っているのですが、拡張子意外でheadタグ等に書かなくてはいけない特殊ルール等があるのでしょうか。。
m.ts10806

2018/05/11 21:56

SCSSを利用するにはRubyによるコンパイルが必要です。 https://qiita.com/ritukiii/items/67b3c50002b48c6186d6 コンパイルしないとHTML側ではCSSと解釈できるようになりません。 もし環境が揃えられないのでしたら、 ご提示の記事の「リアルタイムで LESS から CSS に変換する Web ツール作りました!」のリンクから CSSに変換したコードを取得し、その取得したコードを利用されては?
m.ts10806

2018/05/12 00:51

あ、LolipopでRubyが使えるということか・・。 でしたらコンパイルし、利用する手順を別途調べてみては? 調べてやってみた内容によってその後の回答が変わってくるようにも思います。
think49

2018/05/12 02:18

To: maguzo さん > JSfiddleについてscssに修正しても特段変化はありません。 申し訳ありませんが、原因不明です。 jsfiddleで対応しているSCSSの対応バージョンが古い等、なにがしかの問題があるのかもしれません。 検証と場合によってはjsfiddleに問い合わせる必要があります。 https://github.com/jsfiddle/jsfiddle-issues/issues?utf8=%E2%9C%93&q=SCSS > なお、レンタルサーバーのロリポップを利用しており、rubyのインストール等は必要がないと思っているのですが、 サーバ側でSCSSをコンパイルするなら、私は詳しくありませんがこのあたりでしょうか。 https://blog.aroundit.net/sakura-sass-compass/ ただ、SCSSのインストール方法については、当初の質問とはかけ離れているように思いますので、ある程度ご自身で検証してから、「試した結果」と共に別に質問を立てるのが良いと思います。 ここで継続すると、後で参考にする人が質問の流れを追いにくくなりますので。 To: mts10806 さん フォローありがとうございます。
Lhankor_Mhy

2018/05/12 06:36

横からすみません。 SCSS はよくわからないのですが、JSfiddle の方では、冒頭のほうでは`@import "compass/css3";`に対して、HTMLが返ってきてます。一方、codepen の方では、無視されているようです。
maguzo

2018/05/12 08:19

think49様、Lhankor_Mhy様 ありがとうございます。JSFiddleにつきましては@import "compass/css3について コメントアウトすると、JSFiddle上では実装することができました。 一方で、自身のサイト上では同じようにコメントアウトし、他のサイトでコンパイルしたcssを利用した結果、レイアウトが崩れてしまうんですが、ここからまたご指導の通り調べてみようと思います。 mts10806様も含めて ご力ぞえいただき、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問