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

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

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

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

Q&A

解決済

2回答

2351閲覧

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

RYO.K

総合スコア46

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/14 09:50

編集2020/02/14 11:05

サイトの模写をしてるのですが左上のロゴマークがこれ以上左に行かない、それ以外の文字が右寄せされずに困ってます。。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>

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

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

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

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

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

guest

回答2

0

ベストアンサー

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

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

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

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

screenshot

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

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

0

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

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>

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

投稿2020/02/14 10:44

編集2020/02/14 11:21
hatena19

総合スコア33620

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

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

RYO.K

2020/02/14 11:09

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

2020/02/14 11:38

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問