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

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

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

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

JavaScript

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

CSS

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

解決済

js フォームを3ステップにした場合の戻り方

SteveLight
SteveLight

総合スコア0

HTML5

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

JavaScript

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

CSS

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

1回答

0評価

0クリップ

972閲覧

投稿2018/07/04 19:58

編集2022/01/12 10:58

cssここに言語を入力

html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #3498db; } h1, h2, h3, h4, h5 ,h6{ font-weight: 200; } a{ text-decoration: none; } p, li, a{ font-size: 14px; } fieldset{ margin: 0; padding: 0; border: none; } .left-b a{ position: absolute; left: 20px; top:12px; font-size: 18px; color: white; } /* GRID */ .twelve { width: 100%; } .eleven { width: 91.53%; } .ten { width: 83.06%; } .nine { width: 74.6%; } .eight { width: 66.13%; } .seven { width: 57.66%; } .six { width: 49.2%; } .five { width: 40.73%; } .four { width: 32.26%; } .three { width: 23.8%; } .two { width: 15.33%; } .one { width: 6.866%; } /* COLUMNS */ .col { display:block; width: 100%; padding-bottom: 30px; } .col:first-of-type { margin-left: 0; } .container{ width: 100%; max-width: 700px; margin: 0 auto; position: relative; } .row{ padding: 20px 0; } /* CLEARFIX */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .wrapper{ width: 100%; margin: 30px 0; } /* STEPS */ .steps{ list-style-type: none; margin: 0; padding: 0; background-color: #fff; text-align: center; } .steps li{ display: inline-block; margin: 20px; color: #ccc; padding-bottom: 5px; } .steps li.is-active{ border-bottom: 1px solid #3498db; color: #3498db; } /* FORM */ .form-wrapper .section{ padding: 0px 20px 180px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; opacity: 0; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: center; position: absolute; width: 100%; min-height: 300px } .form-wrapper .section h3{ margin-bottom: 30px; } .form-wrapper .section.is-active{ opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .form-wrapper .button, .form-wrapper .submit{ background-color: #3498db; display: inline-block; padding: 10px 40px; color: #fff; cursor: pointer; font-size: 14px !important; font-family: 'Open Sans', sans-serif !important; position: absolute; right: 20px; bottom: 20px; } .form-wrapper .submit{ border: none; outline: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-wrapper input[type="text"], .form-wrapper input[type="password"]{ display: block; padding: 10px; margin: 30px auto; background-color: #f1f1f1; border: none; width: 70%; outline: none; font-size: 14px !important; font-family: 'Open Sans', sans-serif !important; } .form-wrapper input[type="radio"]{ display: none; } .form-wrapper input[type="radio"] + label{ display: block; border: 1px solid #ccc; width: 100%; max-width: 100%; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: relative; } .form-wrapper input[type="radio"] + label:before{ content: "✔"; position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background-color: #3498db; color: #fff; display: none; } .form-wrapper input[type="radio"]:checked + label:before{ display: block; } .form-wrapper input[type="radio"] + label h4{ margin: 15px; color: #ccc; } .form-wrapper input[type="radio"]:checked + label{ border: 1px solid #3498db; } .form-wrapper input[type="radio"]:checked + label h4{ color: #3498db; } .is-active input{ padding-bottom: 10px; } .post-form{ display: none; } .post-form p{ padding-bottom: 1px; } .post p{ font-size: 12px; padding-top: 15px; width: 80%; } .post-form-block{ display: block; } .post-namber{ width:40%; font-size: 18px; height: 30px; } .uther-address{ width:80%; font-size: 18px; height: 30px; } .post:last-child span{ color: red; font-size: 26px; } .post:first-child{ margin-bottom: 25px; } .post:last-child p{ padding-top:20px; font-size: 16px; } .city-list{ display: none; }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

m.ts10806
m.ts10806

2018/07/05 00:08

「戻る」ボタン なぜ<body>より前にあるのでしょうか。ボタンは「1つ」ですよね。
m.ts10806
m.ts10806

2018/07/05 00:23 編集

コードはコードブロック冒頭``` を```js ```html のように言語名を入れてください。実際のコード以外は含まないようにしてください。(コピペで再現確認する際のノイズとなります)できればインデントもきちんとしていただければと。グチャグチャになっているとそれがバグの温床になります。既にカッコの数が合ってないように思います。
m.ts10806
m.ts10806

2018/07/05 00:13

CSSもご提示ください。
SteveLight
SteveLight

2018/07/05 00:49

申し訳ございません。部分的にコピーして間違えてしまいました。ご指摘ありがとうございます。宜しくお願い致します。
kei344
kei344

2018/07/05 01:39

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
SteveLight
SteveLight

2018/07/05 01:58

実装したい機能はフォームの戻るボタンで一つ前のフォームに戻ることです。 htmlで三つのsectionがありますが、これは入力フォームが3ステップになっているということです。 またsectionとli要素は非表示状態ですが一番最初の要素にはis-activeが付加されており、cssからdisplay:blck;で表示されるようになっています。   nextボタンをクリックするとjsの処理により次の要素のliとsectionにis-activeが付加されます。liでステップ数の明示、sectionで新たな入力フォームへと切り替わります。 しかし戻る機能が使えません。 2ステップ目から1ステップへ戻りたくても戻せない現状です。 is-activeがsection(またはli)要素の何番目にあり、かつjs参照のコードのようにそれから、現在の要素からis-activeをリムーブし、一つ前の要素にis-activeを追加したいのです。 currentSectionとheaderSectionをグローバル変数にして、 currentSection.removeClass("is-active").prev().addClass("is-active"); headerSection.removeClass("is-active").prev().addClass("is-active"); のようにしましたが一切反応がありませんでした。 知識が乏しいですがどうかお力を貸していただければと思います。 宜しくお願い致します。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

HTML5

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

JavaScript

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

CSS

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