- 締切済み
ウェブサイトの基本的な学習をしています
ウェブサイト作成の学習をしています。 おおよそ以下の添付画像のようなログイン画面を作成したいと思っています。 (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 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↑--> 投稿画像
- blueletter12345
- お礼率27% (26/94)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- togurin
- ベストアンサー率45% (81/180)
適当ですがこんなんでいかがでしょう。 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>
関連するQ&A
- ブラウザの幅を狭くしてもレイアウトが崩れない方法
ブラウザのサイズを縮小すると画像のようにレイアウトが崩れます。 ウェブ製作の学習をしている初心者です。 現在wrap(container)を1000pxに設定しています。 せめてmin-width: 900pxあたりまではレイアウトが崩れず縮小できるようにしたいと思っています。（スマホ、タブレット用のレスポンシブデザイン”にする必要はなく単にＰＣ上でブラウザの画面を狭くしたケースについての話です。） 現在以下のような記述をしています。ログイン画面なので縦スクロールはなく画面の幅いっぱいに使えます。 レイアウトもうまく並んでくれず、混乱している状態です。 画像ロゴ、フォーム、ログインボタンをきれいに横並びにして、画面の縦横中央にもってきたいと考えています。ちから技でなんとかしたのですが、ブラウザ画面を少し縮小すると崩れてしまいます。 どなたかウェブ制作のできる方いらっしゃいましたら訂正、指摘等を下さい。 宜しくお願いします。 <HTML> <div id="container"> <!--↓main contents↓--> <main> <!-- ↓login-box↓ --> <div id="login-box"> <img src="img/logo2.jpg" alt="ロゴマーク"> <!--↓form login↓--> <form action="index.php" method="post"> <fieldset id="login"> <p><input autofocus type="text" name="login_id" value="'>"placeholder="ユーザーID" minlength="4" maxlength="50" required></p> <p><input type="password" name="pass" value=" ''> placeholder="パスワード" minlength="5" maxlength="20" required></p> <p id="login"><input type="submit" name="login" value="ログイン"> </p> </fieldset> </form> <!--↑form login↑--> </div> <!--↑login-box↑ --> </main> <!--↑main contents↑--> </div> <!--↑container↑--> ---------------------------------------------------- CSS /*↓maincontents↓*/ main fieldset { position: relative; } #login-box { display: flex; justify-content: center; align-items: center; } #login-box form { width: 380px; margin-left: 20px; } #login-box form p:nth-of-type(3) { display: inline-block; position: relative; } #login-box form input[type="submit"] { width: 70px; height: 70px; background-color: #ec9000; }
- 締切済み
- HTML
- ＣＳＳ－heightの自動調節について
ＣＳＳを使いホームページ作成をしております。 一番上にロゴやフラッシュ、メニューを置き、その下の #mainという<div>の中に、#sideと#textの２つの<div>を横に並ばせ入れ込んでいるのですが、 #main全体の高さを、背景入りで、文字に合わせて自動調節したいと思っています。 しかし#mainのＣＳＳにheight:auto;を書き込んでも表示されません。 普通はheightは指定しなくても自動で調節されるものだと思っていたのですが、できなかったのでautoと書いたのですがダメでした。 heightをピクセルで指定すると表示されますが、文字を飛び越えて表示されてしまいます。 解る方どうかご回答お願い致します。 ＣＳＳについては初心者のため記述がおかしい部分もあるかもしれませんが、ＨＴＭＬとＣＳＳは以下の通りです。 【ＨＴＭＬ】 <div id="main"> <div id="side"> <p>左サイド</p> </div><!--side end--> <div id="text"> <p>右サイド</p> </div><!--text end--> </div><!--main end--> 【ＣＳＳ】 #main { width:800px; height:auto; background: #ffffff; margin-right: auto; margin-left: auto; margin-bottom:auto; clear: both; } #side { float:left; width:170px; margin-top:20px; } #text { float:right; width:600px; margin-top:20px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSS使用時のDIVにおける背景指定について
現在ホームページの作成でＣＳＳをメインに練習を行なっております。 テーブル配置を最小限にと思い、ＣＳＳにて制作を試みておりますが、 ヘッダー部分だけがどうしても上手くいかずつまずいてます。 色々なＣＳＳに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな？とも考え始めております。 でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にＣＳＳに対する理解が低いのかとも思いますが、どうかご教授 をお願いいたします。 先ず構想図から… －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-top" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-cate" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ ｜ ｜ ｜ ｜ ｜ ｜DIV ｜ DIV ｜ ｜id="index"｜ id="main" ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="footer" ｜ －－－－－－－－－－－－－－－－－－－－－－ 上記のようなありがちなレイアウトのＨＰを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。 質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、 横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、 縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、 横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には 横740PXに合わせたナビボタン（w123*h40）を６つ配置したいと考えています。 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく 困っております。 現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li> ・ ・ ・ </ul> </DIV> </DIV> </body> ＣＳＳも書こうと思いましたが、色々とやりくりして今では表示も 配置もおかしくなってしまいましたので、控えさせて頂きました。 また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- グローバルナビゲーションの位置について
添付画像のように、h1ロゴの横にグローバルナビを配置したいのですがうまくいきません。 （ヘッダーの画像の下にナビがついてしまいます） どのような記述をすればヘッダー内にナビを置くことができるのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- デザイナー・クリエイティブ職
- 【CSS】HTML要素の指定
お手柔らかにお願いします。 HTMLを下記のように記述しました。 ---------- <section id="login"> <h1>ログイン</h1> <form> <label for="my_id">ID</label> <input id="my_id" type="text" size="10" maxlength="10"><br /> <label for="my_pass">パスワード</label> <input id="my_pass" type="password" size="10" maxlength="10"><br /> </form> <a><p>ログイン</p></a> <p><a>パスワードを忘れた方はこちら</a></p> </section> ---------- 上記の”<a><p>ログイン</p></a>”に対して、画像を差し込みたいと思っています。 p要素にid名やclass名を入れれば簡単にできるのですが、HTMLは変更せず、CSSのみで要素を特定したいと思っています。 こちらのサイト（http://web-dd.net/?p=278）を参考にCSSを以下のように書いてみましたが、うまくいきませんでした。 ---------- #login label { display: inline-block; font-size: 0.8em; text-align: right; vertical-align: middle; width: 70px; margin: 5px 0 5px 5px; } #login input { display: block; float: right; width: 80px; margin: 5px 10px 5px 5px; } #login br { clear: left; } #login > form + p { overflow: hidden; text-indent: -10em; background: url(img/btn_login.png) no-repeat; width: 90px; height: 30px; } #login a + p { font-size: 0.7em; text-align: center; margin: 15px auto 10px auto; } ---------- ”#login > form + p”という要素の指定が間違っているのかも、と思っていますが、formの部分をh1やinput、brなどにしてもうまくいきませんでした。 あまり難しいことは勉強中なのでわかりませんが、どこをどう直せばいいのか、わかりやすく説明してくださるとうれしいです。 よろしくお願いします。
- 締切済み
- CSS
- pタグ内、一部の画像のみ左に配置したいとき。
ホームページの記事のページをDIVタグでくくって、 その中の「ｐ」タグ内の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか？ できればCSSで行いたいです。 ちなみにホームページは http://www.k-ban.net です。こちらの各コンテンツのページ中央に掲載される画像についてです。 左に配置したい画像前後をdivでくくり、align=left指定したのですが、その<p>～</p>全体のCSS設定が崩れ、且つ画像は真ん中のままでした。 <diV id=""> <p> <img>・・・・</img> </p> </div> という形です。 宜しくお願いします！
- ベストアンサー
- HTML
- CSSを使ったサイトデザインについて
最近、雑誌などを参考にしながらCSSを使ったサイトデザインに挑戦しています。 そこで疑問に思っているのは、画像の配置方法についてです。 画像をHTML上で配置するのか、CSS上で配置するのかどちらがベストなんでしょうか。（当然、場合によって違うので答えはないのでしょうが） たとえば、gooでいえば左上のロゴマークをHTML上で挿入してCSSで配置するのか、CSSで画像の挿入も含めて配置するのがベストなのか、どちらなのでしょう。 それとも、一定の基準があるのでしょうか。 アドバイスお願いします。
- ベストアンサー
- CSS
- OpenPNE3.4のCSSのパスについて
OpenPNE3.4のCSSのパスについて お世話になってます。OpenPNE3.4についてご質問です。 インストールがなんとか終了して、ブラウザからアクセスできるようになったのですが、CSSが適用されず困っています。添付画像の状態です。 PC用ページのログイン前もログイン後も、ブラウザからソースを確認すると下記の記述がありました。 <link rel="stylesheet" type="text/css" media="screen" href="/opSkinBasicPlugin/css/main.css" /> 次に、FireBugの接続タブのCSSを確認すると上記の記述で参照している考えられる main.css の ステータスが 404 NotFound となっています。 ソースにはCSS参照の記述があるので、通常インストール直後にはデフォルトのスタイルが適用された状態になるかと想像できるのですが、どのような問題が考えられますでしょうか？ また、パスを通すにはどこを変更すればよいか詳しい方みえませんか…？ 以上、お手数おかけいたしますが、よろしくお願いいたします。
- ベストアンサー
- フリーウェア・フリーソフト
- CSSでのdivタグに付いての質問です。
現在HTMLを学習し始めたばかりで困惑しております。 HTML内の<body>タグ内に<div>タグを作りidを"main"としました。 具体的には<div id="main">Main</div>と記述しました。 そこからCSSで#main {color: red;} と記述しましたが、文字色の変更が全く反映されない状態です。 他の<p>タグや<h1>タグ、また<body>タグは全て奇麗に反映されるのに<div>だけが全然ダメな状態です。 一体何が原因なのか教えて下さい。 初心者すぎる質問だと思いますが、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- 画像の大きさに合わせて文字の大きさを変えたい
画像の上にテキストを置きたいのですが、以下の条件の場合にどのようにcssを書けばいいのかわからないので教えてください。 1. 画像サイズがウインドウの大きさに合わせて可変する 2. 画像の垂直中央にテキストを配置する 3. 画像の大きさに合わせて相対的にテキストのサイズも同様に可変する ネットでいろいろ検索したり書籍を見たのですがなかなかこういう場合の手法が探せませんでした。 1.の画像サイズをウインドウの大きさに合わせるのはわかりましたが、2.はテーブルを使わずにできないでしょうか？ また、3.は検討もつきませんでした。やはりjavascriptなどを使わないと実現できないでしょうか？ やりたいことはスマホ用サイトで、スマホを縦にしたり横にしたりした場合に、画像の大きさはウインドウ横幅に合わせて変えられるのですが、文字の大きさまで変えたり、中央に配置するのがわかりませんでした。 html5+css3です。お手数ですがよろしくお願い致します。
- 締切済み
- CSS
