タグ・デザイン掲示板

[

入力フォーム位置
by 匿名

2022-10-19 21:29
旧掲示板も含め、フォーム位置テキストエリア等で検索しましたが、該当するものが見つからなかったので質問させていただきます。

テンプレートをお借りして作成しております。
文字は中央揃えなのですが、
クッションページのパスワード入力フォームと
送信ボタンがどうしても左寄せになります。

text-align: center;が入力フォームには
機能しなかったので、フォームとボタンのサイズを変更して、中央揃えに見えるようにとも試みたのですが上手く行きませんでした。

HEAD内以下の通りです。
ご教示お願いします。

<meta NAME=”ROBOTS” CONTENT=”NOINDEX,NOFOLLOW,NOARCHIVE”>
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Megrim&display=swap" rel="stylesheet"><style type="text/css">body {
font-size: 12px;
font-family: "Comfortaa", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Meiryo, "メイリオ", serif;
line-height: 1.9;
color: #333;
letter-spacing: 0.5px;
}

.all {
max-width: 500px;
width: 80%;
margin: 0 auto;
text-align: center;
}

h2 {
font-size: 13px;
font-weight: normal;
font-family: "Comfortaa", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Meiryo, "メイリオ", serif;
text-align: center;
padding: 1em;
margin: 0 auto;
}

input[type], textarea, input[type=submit] {
-webkit-appearance: none;
font-family: "Comfortaa", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Meiryo, "メイリオ", serif;
background: #f6f6f6;
color: #333;
border-radius: 5px;
border: none;
font-size: 12px;
font-weight: normal;
}

textarea {
width: 70%;
max-width: 250px;
padding: 10px;
}

input[type=submit] {
max-width: 250px;
}

</style>

pc
[編集]

by 匿名

2022-10-21 00:08
フォームは<div class="all></div>の中に入ってますか？(divじゃないかもしれませんけど何かしらのclass="all"のついた要素の中に置かれているかどうかをお尋ねしております)

書き出されているhead内をコピペして子ページの全体レイアウトに下記を書いてみたところフォームは真ん中に表示されました。
<div class="all"><input type="text"><input type="submit" value="送信"></div>
(↑は簡易的なタグで試しただけなので上記をコピペしても機能しません)

解決できないようならレイアウト内の内容もこちらへ書き出してみてください。

pc
[編集]

by 匿名

2022-10-21 19:24
ご回答ありがとうございます。
class="all"要素内には入っていません。

当該ページは、
トップページのクッション画面にあたる部分なので
レイアウト内容は
トップページ編集＞パスワードの内容となりますが、
パスワードの説明文を<h2></h2>で囲んだのみです。

pc
[編集]

by 匿名

2022-10-21 23:24
そのhead内だと<div class="all"></div>で囲まないと真ん中にはならないですよ。下記のようにしてはいかがですか？

パスワードコメント欄
<div class="all"><div class="text">パスワードページのコメント</div>#form_送信#</div>

head内
h2 → .text に書き換える

具体的には
.text{
font-size: 13px;
font-weight: normal;
font-family: "Comfortaa", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Meiryo, "メイリオ", serif;
text-align: center;
padding: 1em;
margin: 0 auto;
}
となります。

質問と直接関係ないですが一点気になったところを。
h1やh2というタグは「ここは見出しですよ」という意味を持ちますからコメント部分には不適切です。代わりにクラス名を持つdivを使いました。
トップページの全体レイアウトにh2が見出し以外で使われていましたらそちらも
<div class="text"></div>
に書き換えてください。

あと、これも直接関係ないですけど、input[type=submit]→input[type="submit"]
引用符 " を書き加えてください。２ヶ所あります。

pc
[編集]

by 匿名

2023-04-01 23:21
かなり期間が空いてしまい申し訳ありません。
ご回答ありがとうございました。

教えていただいたとおりにしてみましたが、
中央揃えにはならず、

<div class=“all”><div class=“text”>この記述のまま

HEAD内
.all {
max-width: 500px;
width: 80%;
margin: 0 auto;
text-align: center;
の、allをdivに変えたところ中央揃えになりました。

<div class=“all”><div class=“text”>の記述の
<div class=“all”>はこのままで大丈夫でしょうか？

pc
[編集]

by 匿名

2023-04-06 20:47
>allをdivに変えたところ中央揃えになりました
その状態だと全てのdivに影響してしまいます。

× <div class=“all”><div class=“text”>これと
◯ <div class="all"><div class="text">これだと
引用符が少し違うのでクラス指定が反映してないのではないかと思われるのですが…

pc
[編集]

[