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

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

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

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

JavaScript

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

HTML

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

Q&A

解決済

3回答

2013閲覧

JSを動くようにしたい。初歩的な質問です。

flyingHigh

総合スコア41

CSS3

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

JavaScript

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

HTML

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

0グッド

1クリップ

投稿2016/08/18 14:44

編集2016/08/18 16:15

初めて投稿します。
よろしくお願いします。

JS投稿サイトからコピーしてきたものを
テキストファイルにペーストし、実際に動くかどうかを試してみました。
しかし、jsがうまく読み込まれていないのか
動きません。
どのようにすればよいのでしょうか。

正しい動きとしては
ボタンをクリックすると
ボタンが横に広がりフェードアウトし、送信ボタンとテキストエリアが表示されます。

また、今回のようなフロントエンドエンジニアの仕事に役立ちそうな
おすすめサイト、書籍などがありましたら
教えていただけませんか。

下記にソースを載せました。

出典元は
http://codepen.io/suez/pen/GrBdo

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<link rel="stylesheet" href="css/style.css"> 6<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 7<script type="text/javascript" src="js/button.js"></script> 8<title>Document</title> 9</head> 10<body> 11<button type="button">Click here</button> 12<div> 13<input type="text" placeholder="入力してください。"> 14<input type="submit" value="送信する"> 15<p>OK!</p> 16</div> 17</body> 18</html> 19

Javascript

1 2$(document).ready(function() { 3$(document).on("click", "button", function() { 4var _this = this; 5$(this).css("width", "350px"); 6setTimeout(function() . 7$(_this).css("opacity", 0); 8setTimeout(function() { 9$("div").show().css("opacity", 1); 10}, 300); 11}, 300); 12}); 13$(document).on("submit", "form", function() { 14$("input, #submit").css("opacity", 0); 15setTimeout(function() { 16$("input, #submit").hide(); 17$("p").show(); 18setTimeout(function() { 19$("p").css("opacity", 1); 20$("div").css("border-color", "green"); 21}, 1); 22}, 300); 23return false; 24}); 25}); 26

CSS

1 2body { 3background-color: rgba(200, 100, 50, 0.95); 4} 5 6h1 { 7text-align: center; 8color: white; 9} 10 11button, input, submit, div, p { 12box-sizing: border-box; 13-webkit-transition: .3s; 14transition: .3s; 15} 16 17form { 18display: block; 19position: relative; 20margin: 20px auto 0; 21width: 350px; 22} 23 24button { 25display: block; 26margin: 0 auto; 27width: 250px; 28height: 80px; 29border: 1px solid transparent; 30border-radius: 10px; 31background-color: rgba(100, 50, 250, 0.95); 32color: white; 33font-size: 18px; 34cursor: pointer; 35} 36 37button:hover { 38background-color: rgba(50, 10, 255, 0.95); 39} 40 41#submit:hover { 42background-color: rgba(50, 10, 255, 0.95); 43} 44 45div { 46display: none; 47opacity: 0; 48position: absolute; 49top: 0; 50left: 0; 51width: 350px; 52height: 80px; 53border: 3px solid rgba(100, 50, 250, 0.95); 54border-radius: 10px; 55background-color: white; 56} 57div #txt { 58width: 350px; 59margin-top: 150px; 60} 61div #txt span { 62color: #fff; 63} 64 65input { 66position: absolute; 67top: -5px; 68left: 0; 69width: 250px; 70height: 80px; 71border: 0; 72padding: 10px; 73color: rgba(200, 100, 50, 0.95); 74font-size: 18px; 75background: transparent; 76} 77 78input:focus { 79outline: 0; 80} 81 82input:focus > div { 83border-color: rgba(50, 200, 250, 0.95); 84} 85 86#submit { 87position: absolute; 88top: 17px; 89left: 50px; 90width: 80px; 91height: 40px; 92border: 1px solid transparent; 93border-radius: 3px; 94background-color: rgba(100, 50, 250, 0.95); 95color: white; 96cursor: pointer; 97font-size: 14px; 98} 99 100p { 101display: none; 102opacity: 0; 103font-size: 18px; 104color: green; 105text-align: center; 106margin-top: 25px; 107} 108

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

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

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

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

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

kei344

2016/08/18 14:47

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、出典元のURLをリンク付きで追記ください。
guest

回答3

0

<input><form>で括って下さい。
JSとCSSに#submitとありますが、該当する要素にこのIDをつけて下さい。

投稿2016/08/18 16:54

NS-DOS

総合スコア110

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

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

flyingHigh

2016/08/18 22:06

確かに#submitありますね。 途中からボタンのCSSが外れているなとは感じていました。 解決しました。ありがとうございました。
guest

0

js の 5行目

js

1setTimeout(function() . //ピリオドになってます

投稿2016/08/18 16:28

Ryo

総合スコア507

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

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

flyingHigh

2016/08/18 22:06

知らないうちに、ピリオドが入っていたようです。 ご指摘ありがとうございました。
guest

0

ベストアンサー

JavaScript

1// setTimeout(function() . 2// ↓ 3 setTimeout(function() {

他にもあるかもしれませんが、コピペミスです。
HTMLやCSSが構造が違いますが、これは変更意図がわからないので確認していません。


エラーの確認にはデベロッパーツールをお使いください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2016/08/18 16:38

kei344

総合スコア69357

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

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

flyingHigh

2016/08/18 22:11

知らないうちに、ピリオドが入っていたようです。 おすすめいただいたサイトはすでにブックマークしていたものでしたが 読み込めていませんでした。ご指摘いただいて、しっかり読もうと思いました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問