締切済み

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

2019/02/17 18:45

ウェブサイト作成の学習をしています。おおよそ以下の添付画像のようなログイン画面を作成したいと思っています。 (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)以下の画像にもありますが、上から４行目のロゴ2 の横にユーザーIDとパスワードのフォームを配置し、さらにログイン画面をフォームの横に設置しようとしています。 cssで幅を設定し form や fieldset にfloat: right; をかけてみたのですがユーザーIDやパスワードのボックスがうまくロゴ２の横にならんでくれません。フッター部分の右下に配置されたりします。おおよそ添付画像のようにロゴ２の画像の横に２つのフォームを縦に並べ、その横にログインボタンを配置し、メイン画像の縦横中央にこれらを配置するにはどのようなCSSを記述すればいいでしょうか？独学で学習していたのですが、やはり自分で作ってみようとすると中々うまくいきません。ご面倒でしょうが何卒よろしくお願いします。m(_ _)m 【HTML】  <main> <div id="topic">ログイン</div> <p><img src="img/common/logo2.jpg" alt="ロゴ2"></p>  <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>  </main>  投稿画像

blueletter12345
お礼率27% (26/94)

CSS
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

みんなの回答

togurin
ベストアンサー率45% (81/180)

2019/02/18 17:20 回答No.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 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>  </main> </body> </html>

ログインすると、全ての回答が全文表示されます。