画像、テキストが左寄せ右寄せできない

サイトの模写をしてるのですが左上のロゴマークがこれ以上左に行かない、それ以外の文字が右寄せされずに困ってます。。text-alignをしてもダメで。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" type="text/css" href="test.css">
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
9    <title>模写1</title>
10</head>
11<body>
12    <div class="container">
13        <div class="row">
14            <!--##############header##################-->
15            <a href="#">
16            
17            <img class="logo" src="air-logo.img" a href="#" height="30px" width="30px">
18            </a>
19        <div style="text-align:right;">
20            <ul>
21            <li>予想月収</li>
22            <li><h4>¥151,550</h4></li>
23            <li class="button"><a href="#" class="b2">はじめる</a></li></ul></div>
24            
25        </div>
26    </div>
27    
28</body>
29</html>

CSS
1.logo{margin:25px 30px 30px 5px; }
2ul{list-style: none;}
3li{float: left; margin: 30px 20px;}
4.button{border: solid; color: white; background-color: orangered; border-radius: 10px;
5        padding: 7px 15px;}
6.b2:hover{text-decoration: none; color: white;}
7.b2{color: white;}

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" type="text/css" href="test.css">
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
9    <title>模写1</title>
10</head>
11<body>
12    <div class="container-fluid">
13        <div class="row　justify-content-between">
14            <!--##############header##################-->
15            <div class="col">
16            <a href="#">
17            
18            <img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#" height="30px" width="30px">
19            </a>
20            </div>
21        <div class="col-auto">
22            <ul class="row">　
23            <li class="col">予想月収</li>
24            <li class="col"><h4>¥151,550</h4></li>
25            <li class="button col"><a href="#" class="b2">はじめる</a></li></ul></div>
26            <div class="box"></div>
27
28
29
30        </div>
31    </div>
32    
33</body>
34</html>

行動規範の内容に同意します

回答2件

ベストアンサー

HTMLのソースコードからBootstrapを利用されていると思うので、その前提で回答します。

左上のロゴマークがこれ以上左に行かないのは、.containerクラスをつけているからです。
もし画面いっぱいに広げたい場合は、containerクラスをcontainer-fluidクラスに置き換えます。

参考までにBootstrapのドキュメントをはっておきます。
Grid system Bootstrap

また、予想月収やボタンのあるカラムを右に寄せるためには、colやcol-autoクラスを使うとうまくいくと思います。
こちらに実装例とスクリーンショットをはっておきます。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link rel="stylesheet" type="text/css" href="test.css">
8  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
9    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10  <title>模写1</title>
11</head>
12
13<body>
14  <div class="container">
15    <div class="row justify-content-between">
16      <!--##############header##################-->
17      <div class="col">
18        <a href="#">
19          <img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#"
20            height="30px" width="30px">
21        </a>
22      </div>
23      <div class="col-auto">
24        <ul class="row">
25          <li class="col">予想月収</li>
26          <li class="col">
27            <h4>¥151,550</h4>
28          </li>
29          <li class="button col">
30            <a href="#" class="b2">はじめる</a>
31          </li>
32        </ul>
33      </div>
34    </div>
35  </div>
36</body>
37</html>

動くサンプルコードを作りましたので、よろしければ参考にしてください。
サンプルコード

投稿2020/02/14 10:34

shgtkshruch

総合スコア665

RYO.K

2020/02/14 11:03

なぜclassの名前を変えるだけで右によるのでしょうか？後、コードこれで間違い無いと思うのですがうまくいきません、、本文に追加しました。

shgtkshruch

2020/02/14 11:21 編集

あらかじめBootstrapがclassに対して、CSSの定義をしてくれているからです。 HTMLの9行目でBootstrapを読み込んでいますよね？このように読みこむだけで、Bootstrapが定義してくれたclassがすぐに使えます。 `col`と`col-auto`はBootstrapが用意しているclassで、これを一緒に使うと`col`をつけた方は一杯に広げて、`col-auto`をつけた方はレイアウトが崩れないように余ったスペースに配置してくれるのでボタンのあるカラムが右によります。本文のコードはHTMLの15行目に全角の空白が入ってるので、これを半角の空白に修正してください。また、<div class="box"></div>が追加されていますが、これもどこかのグリッドに収める必要があります。 `col`. `col-auto` とつけた既存の2つのカラムに入れるのか、新しく3カラム目にするかでコーディングが変わります。また、HTMLやCSSの改行が揃っていないとコードが読みにくいので、サンプルコードのように改行位置を揃えることを意識してみてください。

RYO.K

2020/02/14 11:41

やっとできましたいろいろ教えてくれてありがとうございます！！！

shgtkshruch

2020/02/14 11:59

解決できてよかったです！

行動規範の内容に同意します

ロゴマークがこれ以上左に行かない

containerクラスのブロック内に入れているからです。
bootstrapでは max-width で最大幅を制限しています。
幅を制限せずに画面幅一杯に広げたいなら、container-fluidクラスにしてください。

Bootstrap でのコンテナの利用 (continer と container-fluid の違い) (Bootstrapの使い方)

それ以外の文字が右寄せされずに困ってます。。text-alignをしてもダメで。

text-align はインライン要素に対して有効ですが、ブロック要素には効きません。
ブロック要素を右寄せするにはmargin-left: auto;を使います。

html
1<div style="margin-left: auto;">

呈示のコードではインラインスタイルで設定してますが、あちこちに分散させるよりcssファイルで設定するのに統一したほうが管理しやすいと思います。

html
1<div class="right-box">

css
1.right-box {
2  margin-left: auto;
3}

コメントより

真ん中に表示されてしまいます、、、

下記のコードを試してみてください。

html
1<body>
2    <div class="container">
3        <div class="row">
4            <!--##############header##################-->
5            <a href="#">
6
7            <img class="logo" src="air-logo.img" a href="#" height="30px" width="30px">
8            </a>
9        <div style="margin-left: auto">
10            <ul>
11            <li>予想月収</li>
12            <li><h4>¥151,550</h4></li>
13            <li class="button"><a href="#" class="b2">はじめる</a></li></ul></div>
14
15        </div>
16    </div>
17
18</body>