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

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

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

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

CSS

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

Q&A

解決済

4回答

1412閲覧

ブラウザ間で違う動きになってしまう…

H.ken

総合スコア15

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/07/21 04:47

編集2017/07/21 04:55

簡単なログイン画面を作成しようと思ったのですが、ブラウザ間での見え方の差異で困っています。

初心者のような質問で申し訳ないですが、分かる方がいましたらご教授お願いします。

~やりたいこと~
HTMLをいじらずにすべてを中央ぞろえにしたい。
検証するブラウザはchrome,firefox,edge,ie11です。

~起きている問題~
legendタグのログインという文字が中央にいってくれない。

~試したこと~
1、fieldsetタグにtext-align:center;を入れたのですが、chrome以外はlegendが中央にいってくれない。
2、legendをブロック要素にしてmargin: 0 auto;を入れてみた結果、edgeだけ中央にいってくれました。がfirefox,ie11では動かない。

html

1<div id="wpmem_login"><a name="login"></a> 2 <form action="http://026.test55.net/gwp/login/" method="POST" id="" class="form"> 3 <fieldset> 4 <legend>ログイン</legend> 5 <label for="log">ユーザー名</label> 6 <div class="div_text"> 7 <input name="log" type="text" id="log" value="" class="username" /> 8 </div> 9 <label for="pwd">パスワード</label> 10 <div class="div_text"> 11 <input name="pwd" type="password" id="pwd" class="password" /> 12 </div> 13 <input name="redirect_to" type="hidden" value="http://026.test55.net/gwp/login/" /> 14 <input name="a" type="hidden" value="login" /> 15 <div class="button_div"> 16 <input name="rememberme" type="checkbox" id="rememberme" value="forever" /> 17 &nbsp; 18 <label for="rememberme">ログイン状態を保存する</label> 19 &nbsp;&nbsp; 20 <input type="submit" name="Submit" value="ログイン" class="buttons" /> 21 </div> 22 </fieldset> 23 </form> 24</div>

css

1fieldset { 2 max-width: 250px; 3 width: 80%; 4 margin: 0 auto; 5 padding: 30px; 6 text-align: center; 7} 8fieldset legend{ 9 display: block; 10 width: auto; 11 margin: 0 auto; 12}

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

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

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

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

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

kei344

2017/07/21 04:56

「中央に行かないブラウザ」はどれでしょうか。
H.ken

2017/07/21 05:10

firefoxとie11です。ie11に関してはその他も微妙にずれてしまってます。
guest

回答4

0

ベストアンサー

HTMLを一切編集しないということであれば、以下のように行えると思いますが、いかがでしょうか?また、HTML5では、name属性が廃止されたのでname属性でのページ内リンクの定義を行ってはいけません。name属性の代わりにid属性を使うと良いと思います。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 fieldset { 8 width: 80%; 9 max-width: 250px; 10 margin: 0 auto; 11 padding: 30px; 12 text-align: center; 13 border: 1px solid #000; 14 } 15 16 legend::before, 17 legend::after { 18 position: absolute; 19 top: 50%; 20 left: 0; 21 width: calc((100% - 4em) / 2); 22 content: ' '; 23 border-top: 1px solid #000; 24 } 25 26 legend::after { 27 right: 0; 28 left: auto; 29 } 30 31 legend { 32 position: relative; 33 width: 100%; 34 text-align: center; 35 } 36 37 @-moz-document url-prefix() { 38 legend::before, 39 legend::after { 40 top: .5em; 41 } 42 } 43 </style> 44</head> 45<body> 46<div id="wpmem_login"> 47 <a id="login"></a> 48 <form action="http://026.test55.net/gwp/login/" method="POST" class="form"> 49 <fieldset> 50 <legend>ログイン</legend> 51 <label for="log">ユーザー名</label> 52 <div class="div_text"> 53 <input name="log" type="text" id="log" value="" class="username"> 54 </div> 55 <label for="pwd">パスワード</label> 56 <div class="div_text"> 57 <input name="pwd" type="password" id="pwd" class="password"> 58 </div> 59 <input name="redirect_to" type="hidden" value="http://026.test55.net/gwp/login/"> 60 <input name="a" type="hidden" value="login"> 61 <div class="button_div"> 62 <input name="rememberme" type="checkbox" id="rememberme" value="forever"> 63 &nbsp; 64 <label for="rememberme">ログイン状態を保存する</label> 65 &nbsp;&nbsp; 66 <input type="submit" name="Submit" value="ログイン" class="buttons"> 67 </div> 68 </fieldset> 69 </form> 70</div> 71</body> 72</html>

動作確認ブラウザ(バージョン)
Edgeでの動作確認は行っていません。

  • Internet Explorer 11(11.0.9600.18738)
  • Firefox(54.0.1)
  • Google Chrome(59.0.3071.115)
  • Opera(46.0.2597.26314)

投稿2017/07/21 20:52

s8_chu

総合スコア14731

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

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

H.ken

2017/07/26 07:11

回答ありがとうございます!。 無事ブラウザ間で同じレイアウトになることができました。 name属性が廃止されていたなんて知らなかったです。HTML5をもっと知らないといけませんね。
guest

0

IE11では再現せず、Firefoxのみで状況が再現しました。
HTML5なら文法違反に当たりますが、下記指定で中央に来ました。

HTML

1<legend align="center">ログイン</legend>

属性値も編集不能であれば、fieldsetにrelativeを設定して、legendにabsoluteを指定して浮かせるくらいでしょうか。

投稿2017/07/21 05:31

kei344

総合スコア69364

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

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

0

cssリセットを入れてみては?

投稿2017/07/21 05:11

m.ts10806

総合スコア80765

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

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

H.ken

2017/07/21 05:22

ここには書いてなかったですが、元からCSSリセットは入れて実装していました。 改めて頂いたサイトをもとにリセットを書き直しましたが、やはりだめです・・・
m.ts10806

2017/07/21 05:25

そうなんですね。回答するためには重要な情報でもあるので、質問に補足情報として追記お願いします。
guest

0

すみません、すべてのブラウザで確認は済んでいないのですが
以下でどうでしょう

CSS

1fieldset legend{ 2 margin: auto 50%; 3 white-space: nowrap; 4}

投稿2017/07/21 06:43

Tomohiro12

総合スコア112

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問