みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ウェブサイトの基本的な学習をしています

ウェブサイト作成の学習をしています。

おおよそ以下の添付画像のようなログイン画面を作成したいと思っています。

(1)ページのタイトルを記述するだけの「トピック」部分のcssですが”ログイン”
という文字が垂直方向の中央に配置されません。
display: inline; にするとテキスト部分のみに背景色が適用されます。
display: inline-block; にしてもテキストの垂直方向に動いてくれません。
念のためblockをいれてみたのですが変わりません。
ちなみにページの幅、widthは1000pxです。
<div id="topic"> の部分に記述した文字列を垂直方向中央にするにはどのようなCSSを記述したり、
HTMLの方に何か加えるなりしたらよろしいでしょうか?
(1)
#topic {
height: 30px;
background-color: #819FF7;
vertical-align: middle;
}

(2)以下の画像にもありますが、上から4行目のロゴ2 の横にユーザーIDとパスワードのフォームを配置し、さらにログイン画面をフォームの横に設置しようとしています。
cssで幅を設定し form や fieldset にfloat: right; をかけてみたのですがユーザーIDやパスワードのボックスがうまくロゴ2の横にならんでくれません。フッター部分の右下に配置されたりします。

おおよそ添付画像のようにロゴ2の画像の横に2つのフォームを縦に並べ、その横にログインボタンを配置し、メイン画像の縦横中央にこれらを配置するにはどのようなCSSを記述すればいいでしょうか?

独学で学習していたのですが、やはり自分で作ってみようとすると中々うまくいきません。

ご面倒でしょうが何卒よろしくお願いします。m(_ _)m





【HTML】

<!--↓main contents↓-->

<main>
<div id="topic">ログイン</div>

<p><img src="img/common/logo2.jpg" alt="ロゴ2"></p>

<!--↓form↓-->
<form action="#">
<fieldset>
<p><input type="text" name="userid" pattern="^[0-9A-Za-z]+$"
value="" placeholder="ユーザーID"></p>
<p><input type="password" name="password" pattern="^[0-9A-Za-
z]+$" value="" placeholder="パスワード"></p>
<p><input type="submit" value="ログイン"></p>
</fieldset>
</form>
<!--↑form↑-->

</main>
<!--↑main contents↑-->

投稿画像

投稿日時 - 2019-02-17 18:45:33

QNo.9588835

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

適当ですがこんなんでいかがでしょう。
Google Chromeのデベロッパーツールとか使ってますか?
感覚的にわかるようになると思います。
<html>

<head>
<style type="text/css">
#topic {
background-color: #819FF7;
vertical-align: middle;
padding: 3px;
}

#userInfo {
display: inline-block;
vertical-align: middle;
margin: 10px;
}

#login {
display: inline-block;
vertical-align: middle;
margin: 10px;
}

#img {
display: inline-block;
vertical-align: middle;
margin: 10px;
}

</style>
</head>

<body>
<main>
<div id="topic">ログイン</div>

<!--↓form↓-->
<form action="#">
<fieldset>
<div>
<div id="img">
<p><img src="img/common/logo2.jpg" alt="ロゴ2"></p>
</div>
<div id="userInfo">
<p><input type="text" name="userid" pattern="^[0-9A-Za-z]+$" value="" placeholder="ユーザーID"></p>
<p><input type="password" name="password" pattern="^[0-9A-Za-
z]+$" value="" placeholder="パスワード"></p>
</div>
<div id="login">
<p><input type="submit" value="ログイン"></p>
</div>
</div>
</fieldset>
</form>
<!--↑form↑-->

</main>
</body>

</html>

投稿日時 - 2019-02-18 17:20:25

あなたにオススメの質問