締切済み

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

  • 困ってます
  • 質問No.9588835
  • 閲覧数70
  • ありがとう数0
  • 気になる数1
  • 回答数1
  • コメント数0

お礼率 17% (6/34)

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

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

(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↑-->

投稿画像

回答 (全1件)

  • 回答No.1

ベストアンサー率 45% (34/74)

適当ですがこんなんでいかがでしょう。
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>
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集

ピックアップ

ページ先頭へ