Q&A
「見た目の良い」だけだと個人的な感覚の差が大きくなります。「目指すイメージ」を具体的に記載（またはイメージ図の提示」をしてください。あと・・・基本空白は直接入れるものではなく、paddingなどで調整するものと思います（2個以上入れても1個としか解釈されないケースが殆どです）
Bootstrapの勉強をしています。
HTML,PHPなど、全て初心者です。
以下の結果を得たのですが、
「ログインしてください！」のPタグのところが、アンバランスで不自然です。
CSSを駆使すればいいデザインになると思いますが、
Bootstrap だけで、簡単に、見た目のよいデザインにはできると期待しています。
そこで、以下の２点を質問させてください。
①ラベルのアカウント名と書体を合わせるのはどうすればいいですか？
②ラベルのアカウント名に、頭の位置を合わせるのはどうすればいいですか？
よろしくお願いします。
Bootstrapのバージョンですが、
見よう見まねで以下の様に記載していますので、3.3.7だと思います。
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
また、別の質問ですが、
ここにコードを書く時に、行数表示はできないのでしょうか？
よろしくお願いします。
<body> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">CONTACTS</a> </div> </nav> <header> <p> ログインしてください！</p> </header> <form class="form-horizontal"> <!-- form-groupが1行（row）を表す --> <div class="form-group"> <label class="col-xs-2 control-label">アカウント名</label> <div class="col-xs-8"> <input type="text" class="form-control" name="account_name"> </div> </div> <!-- 1行 --> <div class="form-group"> <label class="col-xs-2 control-label">パスワード</label> <div class="col-xs-8"> <input type="text" class="form-control" name="pass"> </div> </div> <!-- 1行 --> <div class="form-group"> <div class="col-xs-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">ログイン</button> </div> </div> </form> <a href="signin.html" class="col-xs-offset-2 col-xs-2" >新規登録</a> </body>
ありがとうござます。ラベルのアカウント名と書体を合わせたいのと、アカウントの頭と揃えたいだけですんので、図示する事がないのです。また、Bootstrapで使われている書体情報が不明ですので、具体的に書体名や大きさを書くこともできません。Bootstrapを使えば大枠の指定だけで、細かな設定をせずとも、お任せで見た目が良いデザインになるとと期待していますが、この認識が間違っているのでしょうか？
大枠の指定だけで見た目良い は間違ってはいませんが、「ここをこうしたい」など細かいところは自身で調整する必要がありますし、実際に「見た目良い」も好みの問題もあるので100％すべての人の感覚を網羅できるわけではありません。書体の指定などはCSSに書いてあるとは思います。いずれにしてもBootstrapは3系と4系で結構概念が変わるので、「見た目のよい」を上記コメントでいただいた内容も含めて質問を編集して追記してください。
修正しましたので、ご確認願います。
指摘内容が分かりづらかったかもしれませんね。 Bootstrapは3系と4系で結構概念が変わるので、BootStrapのバージョンを追記してください。
記載しました。
本来の質問とは関係ないのでここで。 >ここにコードを書く時に、行数表示はできないのでしょうか？ →現在はできません。ひとまず冒頭```を```htmlや```css ```js など言語名を入れるといい感じにハイライトしてくれるくらいです。
了解しました。ありがとうござます(^^)
回答2件
0
書き方を見るとBootstrap4でしょうか。私はBootstrap3を使っているので、バージョンが違って結果が異なったらごめんなさい。
「ログインしてください！」の部分が<header>タグ内に書かれているので、アンバランスに見えるのかもしれません。とりあえず<header>から外に出しましょう。
Bootstrapでは、基本的に１２のグリッドと４つ（または５つ）のブレイクポイントで成り立っています。
なので、<div>タグできっちり枠とグリッドを決めてから、各要素を追加していった方が後々いいと思います。
例） <div class="container"> <div class="row"> <div class="col-sm-3"> 1行目の3つの列の1列目<br> .col-sm-3 </div> <div class="col-sm-6"> 1行目の3つの列の2列目<br> .col-sm-6 </div> <div class="col-sm-3"> 1行目の3つの列の3列目<br> .col-sm-3 </div> </div> <div class="row"> <div class="col-sm-3"> 2行目の3つの列の1列目<br> .col-sm-3 </div> <div class="col-sm-6"> 2行目の3つの列の2列目<br> .col-sm-6 </div> <div class="col-sm-3"> 2行目の3つの列の3列目<br> .col-sm-3 </div> </div> </div>
1行分のcol-sm- の後の数字を足すと、3 + 6 + 3 = 12、となるわけです。
6 + 6 = 12 の2列（真ん中分け）
3 + 3 + 3 + 3 の4列
4 + 8 = 12 の2列（やや左分け）
と、見栄えによって変更可能です。
formの見出しと入力部分も、このルールに則ってがっちり外枠を決めていけば、綺麗に揃うと思います。
投稿2018/08/16 07:12
総合スコア368
0
ベストアンサー
レイアウト的なところの前に、divの閉じ忘れがあります。
※Bracketsなどのエディタを使うとハイライトして教えてくれます
また既に指摘したとおり、「空白入力によって幅を調整する」のはNGです。
半角空白2つ以上を1つとみなすブラウザも多いですし、全角スペースでは意味がありません。
連続でとるのも好ましくありません。paddingなどで適宜調整すべきです。
どのようなCSSがあてられているか確認するのはブラウザの開発ツールが便利です。
むしろデバッグのために使わない手はありません。
GoogleChromeの場合：http://ascii.jp/elem/000/000/997/997889/
そうするとAの箇所とBの箇所は「フォントの違い」のではなく「太字かそうでないかの違い」であることに気づくかと思います。
開発ツールのElementsを利用して見比べるとどちらも「body」にあてられている「font-family」と同じであることが分かります。
更に「なぜ太字になっているか」というところも分かるかと思います。
labelタグにfont-weightがあたっているからですね。
①についてはフォントが違うわけではないことが分かったと思うので、あとはどうしたいか、決めてください。
さて②ですが、1つ基本的な考え方に立ち戻ってみましょう。
「ログインしてください！」という文言はheaderタグに入れる内容として相応しい内容でしょうか？
リファレンスでは下記のようになっています。
<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。<header>の中には、通常は<h1>・<h2>・<h3>・<h4>・<h5>・<h6>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。
つまり、今回のようなユーザーへの注意喚起・ヘルプ文言のようなものはheaderタグに入れる内容としては不適当ということも言えます。
むしろ「イントロダクションやナビゲーショングループであることを示す際に使用します」とあるようにnavタグを囲むようにつけた方がいいかもしれない。
ということで、入力フォームに対する文言であればformグループに属させるのが意味としては辻褄が合いますね。
綺麗なレイアウトは意味のあるHTMLの組み込みからです。そういった面でもHTMLタグの持つ意味を理解して（ルールを守った）HTMLコーディングはしていかないといけませんね。
適当にやっていてもフレームワークはコーダーの都合のいいように解釈はしてくれません。あくまでサポートをしてくれるだけで、実際に利用するのは開発者です。
colについて、既に回答があるように最大幅を12とするグリッドシステム（グリッドレイアウト）を採用しているので、12になるように調整して、ください。
グリッドシステムを使う際にはcontainerが合った方が揃いやすくなります。
あとは①と同じようにそれぞれのCSSがどのような指定がされているか見てみましょう。
labelを確認するとcontrol-labelクラスがあたっており、text-alignの指定があることが分かります。
このあたりをどうにかすると揃いそうに思います。
おそらくform-controlとかレイアウト関係に解決できそうな指定があるように思います。
ドキュメント内を探してみてください（回答に散りばめてはいますが）
というのを踏まえてちょこっと調整した結果の画面が下記です。
投稿2018/08/17 01:33
総合スコア80850
丁寧な文章をありがとうござます。
じっくり拝見させてください。
せっかく回答頂いていて、申し訳ありません。まだ時間がかかりそうです。ご承知おき願います。
ありがとうござます。よくわかりました(^^) これからもよろしくお願いします。
結局どのように解決されたのでしょうか？
催促するわけではないですが「わかりました」だけでは理解度は伝わりません。
解決した後の（望ましい）対応については下記を参考にしてください。
https://teratail.com/help/question-tips#questionTips4-2
あなたの回答
tips
プレビュー
