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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

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

CSS

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

Q&A

解決済

Bootstrapで、フォームにしたくないけどフォームを外すと見た目が崩れる

taro_nii_chan
taro_nii_chan

総合スコア207

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

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

CSS

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

1回答

0グッド

0クリップ

2481閲覧

投稿2017/11/19 10:10

環境

MAMP
bootstrap-4.0.0-beta.2

やりたい事

フォームのようなものを用意してユーザに入力してもらい、Captureボタンを押してもらうと裏でajaxが走ってデータを返すという動きをさせたいです。

フォームを使った場合の見た目は次のとおりです。これが一応OKな見た目です。(贅沢を言えばURL欄は出来るだけ広いほうがいいです。)

フォームを使った場合

以下のコードを書きました。

ヘッダの一部

html

1<link href="./dist/css/bootstrap.min.css" rel="stylesheet"> 2<link href="cover.css?0005" rel="stylesheet">

ボディの一部

html

1 <form class="form-inline"> 2 <div class="form-group"> 3 <div class="form-check form-check-inline"> 4 <label class="form-check-label"> 5 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">PC 6 </label> 7 </div> 8 <div class="form-check form-check-inline"> 9 <label class="form-check-label"> 10 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" checked>Smart Phone 11 </label> 12 </div> 13 <div class="form-check form-check-inline"> 14 <label class="form-check-label"> 15 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">Tablet 16 </label> 17 </div> 18 </div> 19 20 <div class="form-group"> 21 <!-- <label for="exampleFormControlSelect1">Device</label> --> 22 <select class="form-control" id="exampleFormControlSelect1"> 23 <option>Select Device...</option> 24 <option>iPhone 6+/7+/8+ (1080×1920 px) </option> 25 <option>iPhone 6/7/8 (750×1334 px) </option> 26 <option>Samsung Galaxy S6 (1440 x 2560 px)</option> 27 <option>Samsung Galaxy S8+ (2960 x 1440 px)</option> 28 <option>Google Pixel (1080 x 1920 px)</option> 29 </select> 30 </div> 31 32 <div class="form-group"> 33 <div class="col-auto"> 34 <label class="sr-only" for="inlineFormInputGroup">URL</label> 35 <div class="input-group"> 36 <div class="input-group-addon">URL</div> 37 <input type="text" id="url" class="form-control" id="inlineFormInputGroup" placeholder="例) http://www.example.com" size="40"> 38 39 </div> 40 </div> 41 42 <div class="col-auto"> 43 <button type="submit" id="btn_get_capture" class="btn btn-primary">Capture</button> 44 </div> 45 </div> 46 47 </form>

cover.cssは次のようにしています。

css

1/* 2 * Globals 3 */ 4 5/* Links */ 6a, 7a:focus, 8a:hover { 9 color: #fff; 10} 11 12/* Custom default button */ 13.btn-secondary, 14.btn-secondary:hover, 15.btn-secondary:focus { 16 color: #333; 17 text-shadow: none; /* Prevent inheritance from `body` */ 18 background-color: #fff; 19 border: .05rem solid #fff; 20} 21 22 23/* 24 * Base structure 25 */ 26 27html, 28body { 29 height: 100%; 30 background-color: #333; 31} 32body { 33 color: #fff; 34 text-align: center; 35 /*text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);*/ 36} 37 38/* Extra markup and styles for table-esque vertical and horizontal centering */ 39.site-wrapper { 40 display: table; 41 width: 100%; 42 height: 100%; /* For at least Firefox */ 43 min-height: 100%; 44 box-shadow: inset 0 0 5rem rgba(0,0,0,.5); 45} 46.site-wrapper-inner { 47 display: table-cell; 48 /*vertical-align: top;*/ 49} 50.cover-container { 51/* margin-right: auto; 52 margin-left: auto; 53*/} 54 55/* Padding for spacing */ 56.inner { 57 /*padding: 2rem;*/ 58 /*padding: 1rem;*/ 59 /*border: 1px solid green;*/ 60} 61 62 63/* 64 * Header 65 */ 66 67.masthead { 68 /*無駄な余白を消す*/ 69 /*margin-bottom: 2rem;*/ 70 margin-bottom: 0; 71} 72 73.masthead-brand { 74 /*margin-bottom: 0;*/ 75} 76 77/*.nav-masthead .nav-link { 78 padding: .25rem 0; 79 font-weight: 700; 80 color: rgba(255,255,255,.5); 81 background-color: transparent; 82 border-bottom: .25rem solid transparent; 83} 84 85.nav-masthead .nav-link:hover, 86.nav-masthead .nav-link:focus { 87 border-bottom-color: rgba(255,255,255,.25); 88} 89 90.nav-masthead .nav-link + .nav-link { 91 margin-left: 1rem; 92} 93*/ 94/*.nav-masthead .active { 95 color: #fff; 96 border-bottom-color: #fff; 97} 98*/ 99 100@media (min-width: 48em) { 101 /*よく分からないけどこのままだと縦が0になるのでコメントアウト*/ 102 /*.masthead-brand { 103 float: left; 104 }*/ 105 /*使わないからコメントアウト*/ 106 /*.nav-masthead { 107 float: right; 108 }*/ 109} 110 111 112/* 113 * Cover 114 */ 115 116.cover { 117 /*padding: 0 1.5rem;*/ 118} 119/*.cover .btn-lg { 120 padding: .75rem 1.25rem; 121 font-weight: 700; 122} 123*/ 124.inner.cover { 125 /*padding: 0 0.5rem;*/ 126 padding: 1rem; 127 /*border: 1px solid lightgray;*/ 128} 129 130 131/* 132 * Footer 133 */ 134 135.mastfoot { 136 color: rgba(255,255,255,.5); 137} 138 139/* 140 * Affix and center 141 */ 142 143@media (min-width: 40em) { 144 /* Pull out the header and footer */ 145 /* .masthead { 146 position: fixed; 147 top: 0; 148 } 149 .mastfoot { 150 position: fixed; 151 bottom: 0; 152 } 153*/ 154 155/* Start the vertical centering */ 156.site-wrapper-inner { 157 /*vertical-align: middle;*/ 158} 159 160/* Handle the widths */ 161 .masthead, 162 .mastfoot, 163 .cover-container { 164 width: 100%; /* Must be percentage or pixels for horizontal alignment */ 165 } 166} 167 168@media (min-width: 62em) { 169 .masthead, 170 .mastfoot, 171 .cover-container { 172 /*横幅はいっぱいに使いたいのでコメントアウト*/ 173 /*width: 42rem;*/ 174 /*縦幅も広めに固定したい。でもやり方が分からない*/ 175 /*height: 400px;*/ 176 } 177} 178 179/* 180 * その他 181 */ 182.capture-wrapper { 183 width: 100%; 184 height: 500px; 185 margin: 0 auto; 186 background-image: url(./images/transparent.png); 187 overflow-y: scroll; 188} 189.capture-img { 190 /*width: 20rem;*/ 191 width: 100%; 192} 193.scheme-wapper { 194 width: 500px; 195 height: 50px; 196 margin: 0 auto; 197 background-image: url(./images/image_from_01.png); 198 overflow: hidden; 199 /*border: 1px solid orange;*/ 200 /*border: 2px solid black;*/ 201 /*outline: 1px solid white;*/ 202} 203.scheme-img { 204 width: 100%; 205 /*height: 100%;*/ 206 /*width: 500px;*/ 207 /*height: 50px;*/ 208 /*background: white;*/ 209}

最後のCaptureをクリックするとajaxで飛ばすようにしています(したいです)。

しかし実際はajaxではなくformによりページ遷移が発生してしまいます。
そこで<form>タグを外して同じようにCaptureをクリックすると思う通りにajaxが走るのですが、見た目が崩れます。
こんな感じです。

フォームを外した場合

どう変更すれば思い通りになるでしょうか?

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

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

<form><form onsubmit="return false">にすればページ遷移はなくなると思います。

投稿2017/11/19 10:41

hota1024

総合スコア354

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

taro_nii_chan

2017/11/19 10:45

なくなりました。 ありがとうございます。
hota1024

2017/11/19 10:47

お力になれて良かったです。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

HTML5

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

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

CSS

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