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

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

ただいまの
回答率

89.63%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 104

RYO.K

score 9

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

イメージ説明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="test.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>模写1</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <!--##############header##################-->
            <a href="#">

            <img class="logo" src="air-logo.img" a href="#" height="30px" width="30px">
            </a>
        <div style="text-align:right;">
            <ul>
            <li>予想月収</li>
            <li><h4>¥151,550</h4></li>
            <li class="button"><a href="#" class="b2">はじめる</a></li></ul></div>

        </div>
    </div>

</body>
</html>
.logo{margin:25px 30px 30px 5px; }
ul{list-style: none;}
li{float: left; margin: 30px 20px;}
.button{border: solid; color: white; background-color: orangered; border-radius: 10px;
        padding: 7px 15px;}
.b2:hover{text-decoration: none; color: white;}
.b2{color: white;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="test.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>模写1</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row justify-content-between">
            <!--##############header##################-->
            <div class="col">
            <a href="#">

            <img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#" height="30px" width="30px">
            </a>
            </div>
        <div class="col-auto">
            <ul class="row"> 
            <li class="col">予想月収</li>
            <li class="col"><h4>¥151,550</h4></li>
            <li class="button col"><a href="#" class="b2">はじめる</a></li></ul></div>
            <div class="box"></div>



        </div>
    </div>

</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

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

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

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

screenshot

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="test.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>模写1</title>
</head>

<body>
  <div class="container">
    <div class="row justify-content-between">
      <!--##############header##################-->
      <div class="col">
        <a href="#">
          <img class="logo" src="https://seeklogo.com/images/A/airbnb-logo-1D03C48906-seeklogo.com.png" a href="#"
            height="30px" width="30px">
        </a>
      </div>
      <div class="col-auto">
        <ul class="row">
          <li class="col">予想月収</li>
          <li class="col">
            <h4>¥151,550</h4>
          </li>
          <li class="button col">
            <a href="#" class="b2">はじめる</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/14 20:03

    なぜclassの名前を変えるだけで右によるのでしょうか?

    後、コードこれで間違い無いと思うのですがうまくいきません、、
    本文に追加しました。

    キャンセル

  • 2020/02/14 20:20 編集

    あらかじめ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の改行が揃っていないとコードが読みにくいので、サンプルコードのように改行位置を揃えることを意識してみてください。

    キャンセル

  • 2020/02/14 20:41

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

    キャンセル

  • 2020/02/14 20:59

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

    キャンセル

0

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

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

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

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

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

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

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

<div class="right-box">
.right-box {
  margin-left: auto;
}

コメントより

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

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

<body>
    <div class="container">
        <div class="row">
            <!--##############header##################-->
            <a href="#">

            <img class="logo" src="air-logo.img" a href="#" height="30px" width="30px">
            </a>
        <div style="margin-left: auto">
            <ul>
            <li>予想月収</li>
            <li><h4>¥151,550</h4></li>
            <li class="button"><a href="#" class="b2">はじめる</a></li></ul></div>

        </div>
    </div>

</body>

ただし、bootstrapを使うなら、shgtkshruchさんの回答の方がいいですね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/14 20:09

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

    キャンセル

  • 2020/02/14 20:38

    参考になりましたありがとうございます!

    キャンセル

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

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る