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

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

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

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

CSS

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

Q&A

解決済

1回答

1381閲覧

htmlの謎の改行現象を解決したい。

Pieshin

総合スコア3

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/12/29 15:07

以下のコードを実行した際に、ログイン、新規登録ボタンがタイトルの次の行で右寄せされてしまっていて、
これを、タイトルと同じ行で右寄せしたいです

HTML

1<!doctype html> 2 3<html class="no-js" lang=""> 4 5<head> 6 <meta charset="UTF-8"> 7 <title></title> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width, initial-scale=1"> 10 11 <meta property="og:title" content=""> 12 <meta property="og:type" content=""> 13 <meta property="og:url" content=""> 14 <meta property="og:image" content=""> 15 16 <link rel="manifest" href="site.webmanifest"> 17 <link rel="apple-touch-icon" href="icon.png"> 18 <!-- Place favicon.ico in the root directory --> 19<style> 20 21</style> 22 <!-- CSS only --> 23<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 24 25 <meta name="theme-color" content="#fafafa"> 26</head> 27 28 29<!DOCTYPE html> 30<html lang="ja"> 31<head> 32<meta charset="UTF-8"> 33<title>サンプル</title> 34<link rel="stylesheet" href="style.css"> 35</head> 36 37 38<body> 39 40 <head> 41 <meta charset="UTF-8"> 42 <title>HTML Char size Sample</title> 43 </head> 44 <body> 45 46 <p> 47 <font size="8"><b>タイトル</b></font> 48 49 <div style=" text-align:right;"> 50 <button type="button" class="btn btn-primary btn-sm1" >ログイン</button> 51 <button type="button" class="btn btn-secondary btn-sm2">新規登録</button> 52 </div> 53 </p> 54 55 <br> 56 <div class="input-group" id="kokugo"> 57 <span class="input-group-text">国語</span> 58 <input type="text" aria-label="First name" class="form-control" name="kokugos" id="kokugos" > 59 <input type="text" aria-label="Last name" class="form-control" name="kokugoh" id="kokugoh"> 60 </div> 61 62 <div class="input-group" id="rika1"> 63 <span class="input-group-text">理1</span> 64 <input type="text" aria-label="First name" class="form-control" name="rika1s" id="rika1s"> 65 <input type="text" aria-label="Last name" class="form-control" name="rika1h" id="rika1h"> 66 </div> 67 68 <div class="input-group" id="rika2"> 69 <span class="input-group-text">理2</span> 70 <input type="text" aria-label="First name" class="form-control" name="rika2s" id="rika2s"> 71 <input type="text" aria-label="Last name" class="form-control" name="rika2h" id="rika2h"> 72 </div> 73 74 <div class="input-group" id="tiri"> 75 <span class="input-group-text">地理</span> 76 <input type="text" aria-label="First name" class="form-control" name="tiris" id="tiris"> 77 <input type="text" aria-label="Last name" class="form-control" name="tirih" id="tirih"> 78 </div> 79 80 <div class="input-group" id="rekisi"> 81 <span class="input-group-text">歴史</span> 82 <input type="text" aria-label="First name" class="form-control" name="rekisis" id="rekisis"> 83 <input type="text" aria-label="Last name" class="form-control" name="rekisih" id="rekisih"> 84 </div> 85 86 <div class="input-group" id="daisuu"> 87 <span class="input-group-text">代数</span> 88 <input type="text" aria-label="First name" class="form-control" name="daisuus" id="daisuus"> 89 <input type="text" aria-label="Last name" class="form-control" name="daisuuh" id="daisuuh"> 90 </div> 91 92 <div class="input-group" id="zukei"> 93 <span class="input-group-text">図形</span> 94 <input type="text" aria-label="First name" class="form-control" name="zukeis" id="zukeis"> 95 <input type="text" aria-label="Last name" class="form-control" name="zukeih" id="zukeih"> 96 </div> 97 98 <div class="input-group" id="eigo"> 99 <span class="input-group-text">英語</span> 100 <input type="text" aria-label="First name" class="form-control" name="eigos" id="eigos"> 101 <input type="text" aria-label="Last name" class="form-control" name="eigoh" id="eigoh"> 102 </div> 103 104 <div class="input-group" id="kagi"> 105 <span class="input-group-text">家技</span> 106 <input type="text" aria-label="First name" class="form-control" name="kagis" id="kagis"> 107 <input type="text" aria-label="Last name" class="form-control" name="kagih" id="kagih"> 108 </div> 109 110 <div class="input-group" id="onngaku"> 111 <span class="input-group-text">音楽</span> 112 <input type="text" aria-label="First name" class="form-control" name="onngakus" id="onngakus"> 113 <input type="text" aria-label="Last name" class="form-control" name="onngakuh" id="onngakuh"> 114 </div> 115 116 <div class="input-group" id="bizyutu"> 117 <span class="input-group-text">美術</span> 118 <input type="text" aria-label="First name" class="form-control" name="bizyutus" id="bizyutus"> 119 <input type="text" aria-label="Last name" class="form-control" name="bizyutuh" id="bizyutuh"> 120 </div> 121 122 <div class="input-group" id="hotai"> 123 <span class="input-group-text">保体</span> 124 <input type="text" aria-label="First name" class="form-control" name="hotais" id="hotais"> 125 <input type="text" aria-label="Last name" class="form-control" name="hotaih" id="hotaih"> 126 </div> 127 128 <center> 129 <button type="button" class="mt-3 btn btn-outline-secondary" onclick="cancan()">取り消し</button> 130 <button type="button" class="mt-3 btn btn-outline-primary" onclick="entano()">実行</button> 131 </center> 132 133 <Script type="text/javascript" language="javascript"> 134 function entano(){ 135 var kokugos = document.getElementById("kokugos").value; 136 var kokugoh = document.getElementById("kokugoh").value; 137 var rika1s = document.getElementById("rika1s").value; 138 var rika1h = document.getElementById("rika1h").value; 139 var rika2s = document.getElementById("rika2s").value; 140 var rika2h = document.getElementById("rika2h").value; 141 var tiris = document.getElementById("tiris").value; 142 var tirih = document.getElementById("tirih").value; 143 var rekisis = document.getElementById("rekisis").value; 144 var rekisih = document.getElementById("rekisih").value; 145 var daisuus = document.getElementById("daisuus").value; 146 var daisuuh = document.getElementById("daisuuh").value; 147 var zukeis = document.getElementById("zukeis").value; 148 var zukeih = document.getElementById("zukeih").value; 149 var eigos = document.getElementById("eigos").value; 150 var eigoh = document.getElementById("eigoh").value; 151 var kagis = document.getElementById("kagis").value; 152 var kagih = document.getElementById("kagih").value; 153 var onngakus = document.getElementById("onngakus").value; 154 var onngakuh = document.getElementById("onngakuh").value; 155 var bizyutus = document.getElementById("bizyutus").value; 156 var bizyutuh = document.getElementById("bizyutuh").value; 157 var hotais = document.getElementById("hotais").value; 158 var hotaih = document.getElementById("hotaih").value; 159 160 let soten = Number(kokugos) + Number(rika1s) + Number(rika2s) + Number(tiris) + Number(rekisis) + Number(daisuus) + Number(zukeis) + Number(eigos) + Number(kagis) + Number(onngakus) + Number(bizyutus) + Number(hotais); 161 162 var heikin = Number(kokugoh) + Number(rika1h) + Number(rika2h) + Number(tirih) + Number(rekisih) + Number(daisuuh) + Number(zukeih) + Number(eigoh) + Number(kagih) + Number(onngakuh) + Number(bizyutuh) + Number(hotaih); 163 164 var syusoten = Number(kokugos) + Number(rika1s) + Number(rika2s) + Number(tiris) + Number(rekisis) + Number(daisuus) + Number(zukeis) + Number(eigos); 165 166 var syuheikin = Number(kokugoh) + Number(rika1h) + Number(rika2h) + Number(tirih) + Number(rekisih) + Number(daisuuh) + Number(zukeih) + Number(eigoh); 167 168 var hukusoten; 169 hukusoten = Number(kagis) + Number(onngakus) + Number(bizyutus) + Number(hotais); 170 171 var hukuheikin; 172 hukuheikin = Number(kagih) + Number(onngakuh) + Number(bizyutuh) + Number(hotaih); 173 174 var syutokutensa; 175 syutokutensa = syusoten - syuheikin; 176 177 var hukutokutensa; 178 hukutokutensa = hukusoten - hukuheikin; 179 180 var tokutensa; 181tokutensa = soten - heikin; 182 183 184 document.querySelector('#soten').value = soten; 185 document.querySelector('#heikin').value = heikin; 186 document.querySelector('#tokutensa').value = tokutensa; 187 document.querySelector('#soten').value = soten; 188 document.querySelector('#soten').value = soten; 189 document.querySelector('#soten').value = soten; 190 document.querySelector('#soten').value = soten; 191 document.querySelector('#soten').value = soten; 192 193 } 194 195 196 </script> 197<font size="5"><b>分析結果</b></font><br> 198 199 200 201<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;"> 202 あなたの素点合計 :<font><output id="soten" size ="3"></output></font> 203 <br> 204 学年の平均点合計:<output id="heikin"></output> 205</div> 206 207<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;"> 208 平均点との差:<output id="tokutensa"></output> 209</div> 210 211<div> 212 <canvas id="myChart" width="400" height="400"></canvas> 213</div> 214 215 216</body> 217 218 219 220</html>

どうすればいいでしょうか...?

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

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

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

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

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

hoshi-takanori

2021/12/29 16:07

button を div で囲んでるからでは…。
m.ts10806

2021/12/29 22:25

1ファイルに全部あるんですよね。 doctype宣言やHTMLタグ、headが2度あったり、かなり滅茶苦茶なのでは。 HTML構文チェック掛けて正規化するところから始めないと全く意味ないような
m.ts10806

2021/12/29 22:26

あと。Bootstrap使ってるなら可能な限りそちらの機能を使うべきでは。
guest

回答1

0

ベストアンサー

追記2
すみません、修正しました。

bootstrap5を読み込んでいるみたいだったので、bootstrap5のclassでやってます。
h1buttonを一つのタグで包んで、左右に振り分けるだけです。
brを削除してmb-2で余白調整しました。

また

bodyの余白がなく見づらかったのでm-4追加してます。消してもいいです。

<body class="m-4"> <div class="d-flex align-items-center mb-2"> <h1 class="me-auto">タイトル</h1> <button type="button" class="btn btn-primary btn-sm1 me-2">ログイン</button> <button type="button" class="btn btn-secondary btn-sm2">新規登録</button> </div> <div class="input-group" id="kokugo">

追記
あーごめんなさい
完全に質問文を読み違えてました。
今修正します。


↓見当違いな回答
この部分ですよね…?

html

1<div style="text-align:right;"> 2 <button type="button" class="btn btn-primary btn-sm1">ログイン</button> 3 <button type="button" class="btn btn-secondary btn-sm2">新規登録</button> 4</div>

text-align:right; は右寄せするという指定なので
text-align:left;にするか
ただのdivだけにするとかがいいと思います。

html

1<div> 2 <button type="button" class="btn btn-primary btn-sm1">ログイン</button> 3 <button type="button" class="btn btn-secondary btn-sm2">新規登録</button> 4</div>

余計なおせっかいとしていうと
下記タイトル部分を

<font size="8"><b>タイトル</b></font>

<h1>タイトル</h1>

とすれば(fontタグは廃止されました)
buttonにdivも必要なくなるかもしれないです。

投稿2021/12/29 18:11

編集2021/12/29 18:26
recal

総合スコア1126

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

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

Pieshin

2021/12/29 23:46

できました!ありがとうございます。ボタンを右に寄せるというより、タイトルとボタンを左右に振り分けるという発想が必要なのですね。
recal

2021/12/30 00:00

ですね、言われてみればそうゆう感じです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問