質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

405閲覧

タイトルが移動しない

edash

総合スコア11

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/05 08:30

###前提・実現したいこと
HTMLに書いたタイトルが移動しません。
トップページの文字を、cssのheaderで指定している高さのちょうど真ん中(=50pxということでしょうか?)に位置させたいです。

###発生している問題・エラーメッセージ
Googleの開発者ツールを使っていますが、エラーは発生していません。

###該当のソースコード

HTML

1<html lang="ja"> 2 <head> 3 <meta charset="utf-8"> 4 <link rel="stylesheet" href="top.css"> 5 </head> 6 <body> 7 8 <header class="clearfix"> 9 <div id="top"> 10 <div> 11 <h1 class="title">トップページ</h1> 12 </div> 13 <div class="right-position"> 14 <h3 class="login">ログイン</h3> 15 16 <form class="form-inline" action="{% url 'accounts:detail' %}" method="post" role="form"> 17 <div class="form-group"> 18 <label class="username_form">ユーザーネーム</label> 19 <input id="id_username" name="username" type="text" value="" minlength="5" maxlength="12" placeholder="ユーザーネーム" class="form-control"/> 20 </div> 21 <div class="form-group"> 22 <label class="password_form">パスワード</label> 23 <input id="id_password" name="password" type="password" value="" minlength="8" maxlength="12" placeholder="パスワード" class="form-control"/> 24 </div> 25 26 <div> 27 <button type="submit" class="btn btn-primary btn-lg" style="color:white;background-color: #F62459;border-style: none;">ログイン</button> 28 <input name="next" type="hidden"/> 29 </div> 30 </form> 31 </div> 32 33 </div> 34 </header> 35 36 </body> 37</html>

CSS

1body{ 2 color: black; 3 background-size:cover; 4 background-repeat:no-repeat; 5 background-position: center center; 6 } 7*{ 8 margin: 0; 9 padding: 0; 10} 11 12header{ 13 height: 100px; 14 background-color: black; 15} 16 17.title{ 18 float:left; 19 color:white; 20 font-size: 70px; 21 22} 23 24.float-left{ 25 float: left; 26} 27 28.right-position{ 29 width: 50%; 30}

###試したこと

CSS

1.title{ 2 float:left; 3 color:white; 4 font-size: 70px; 5 6}

の部分にpadding-top:-10px; や margin-top: 10px;など書きましたが全く動きませんでした。pxの値を極端な値にしても動きませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

私ならfloatを使う代わりに、flexboxを使用します。これなら、横の均等割り付けも縦の中央揃えもできますので、非常に便利です。
質問文から想定されるHTMLページを作成してみましたので、確認して頂けますか。
CodePen teratail解答1

flexboxの説明は、以下のページが参考になると思います。

日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門 - ICS MEDIA
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス

投稿2017/10/05 09:23

s-show

総合スコア203

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

提示のコードではfont-sizeが大きすぎて再現できないような気がしますが(、
上下中央揃えしたい、ということであれば.titleline-height: 100px;を指定すれば解決するはずです。

CSS

1.title{ 2 float:left; 3 color:white; 4 font-size: 70px; 5 line-height: 100px; /* 追加 */ 6}

投稿2017/10/05 08:47

編集2017/10/05 09:36
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

上を全部コピーしてやってみましたが、動きましたよ。

投稿2017/10/05 08:49

mirainonakamura

総合スコア137

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問