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

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

ただいまの
回答率

90.00%

marginを適用させたい

解決済

回答 3

投稿

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

toll_tree

score 29

以下のコードについてお聞きしたいことがあります。

<div class="main_box">
    <h3>〇〇〇動物病院 | ネット予約</h3>
    <div>
      <form method="post" action="#">
        <table class="login_table">
          <tr>
            <th>飼い主様ID</th>
            <td><input type="text" name="owner_id"></td>
          </tr>
          <tr>
            <th>パスワード</th>
            <td><input type="text" name="password"></td>
          </tr>
        </table>
        <div class="save_info_box"><input type="checkbox" name="save_login_info">ログイン情報を保存</div>
        <div class="login_submit_box"><input type="submit" value="ログイン"></div>
      </form>
    </div>
  </div>
.main_box{
  width:350px;
  margin-left:651px;
}
.login_table{
  border-collapse: collapse;
  border: solid 1px orange;
  width:350px;
}
.login_table th, .login_table td{
  border: solid 1px orange;
} 
.login_table td{
  width:193px;
}
.save_info_box{
  text-align: center;
  margin: 15px;
}
.login_submit_box{
  width:276px;
  text-align:center;

}

.login_submit_box input[type="submit"]{
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f3f3f3), color-stop(0.5, #e2e2e2), to(#d1d1d1));
  text-shadow:0 1px 0 silver;
  border:1px solid silver;
  width:100px;
  height:30px;
  border-radius:3px;
}

.login_submit_box input[type="submit"]:hover{
  background:none;
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8b5b5), color-stop(0.5, #c4c1c1), to(#aaa7a7));
}
.login_table td input[type="text"]{
  border:1px solid #444;
  padding: 5px 5px;
  width: 180px;
}
.login_table th{
  background:#fce5bc;
}
body{ 
  margin:0;
}

p{
  margin:0;
}


こちらのコードなのですが、tableタグにmargin-rightをつけ、全体的に左に寄せたいのですが、全く左に寄せることができません。しかし、デベロッパーツールで確認しますと、margin-rightをつけた分だけmarginをつけたことを示すオレンジ色のマークがついています。何故要素自体は左に寄っていないにも関わらず、marginがついたマークはついているのでしょうか。。。?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • H40831

    2019/07/22 13:01

    自分は初学でドットインストールはキツくてやってなかったので実態は分からないのですが
    (当時、ドットインストールはある程度知識があること前提の話をされてる気がしたので)
    Progateは基礎学習にかなり分かりやすいとおもうので、Progateの有料版を使って学習するのはオススメですよ^^

    キャンセル

  • toll_tree

    2019/07/23 14:04

    @H40831さん
    ご親切にどうもです!
    おすすめなんですね!progateの有料版も検討してみたいと思います!

    キャンセル

  • m.ts10806

    2019/07/23 14:09 編集

    「検討します」「考えておきます」「やってみます」「確認してみます」
    常套句のように使っていますね。もはやオオカミ少年です。
    本当に実施されてたら、130も質問してきていまだに「基礎から」ってすすめられることはないです。

    H40831さん
    ぜひこの質問者の過去質問とその対応を見てください。
    この質問者に勧めるだけ無駄です。「自分が組んだことが正しい、動かないプログラムが悪い」っていう人なので。
    「指摘は自分への悪意・攻撃」として無視・逃亡してるだけの人なので。
    そうやって過去のあらゆるアドバイスを踏みつぶしてきているので。
    (あとこの質問者の丸投げ質問に低評価をつけるとある一定数まで謎の高評価がつく変なシステムをお持ちです)

    キャンセル

回答 3

checkベストアンサー

+4

tableタグにmargin-rightをつけ

まず、それをしたコードを提示されたほうが良いです。


.main_box .login_table が 350px なので、何に対して「左」かはわかりませんが margin-right は効かないでしょう。


margin-left:651px; という指定があるので、たぶんご自身のブラウザに合わせて無理やりな配置をしていると思われます。ブラウザウィンドウはデバイスによって違うため、それに対応する「今風の組み方」を書籍を読むなどして身に着けることをお勧めします。(この手間を惜しむと同じような手詰まりが頻発するので)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/19 23:35

    Flex と Grid についての記載があるものを選ぶと良いです。レスポンシブデザインは既に当然の技術です。

    キャンセル

  • 2019/07/19 23:42

    ありがとうございます!
    少し、サイトなどを制作する上で気になっていた部分なのですが、最近はスマホなども浸透してきていますし、やはりレスポンシブデザインでサイトを制作するということは当然のような感じになってきているのでしょうか?

    キャンセル

  • 2019/07/21 15:26 編集

    スマホが浸透してきたのは最近どころの話ではないです。おいくつなんでしょうか。
    Googleがモバイルファーストインデックスを導入してもう結構経つのに・・・。

    キャンセル

+1

一案として。
他のスタイルの影響で調整が必要かもしれませんがあえて説明はしません。

<div class="main_box">
  <h3>〇〇〇動物病院 | ネット予約</h3>
  <div>
    <form method="post" action="#">
      <table class="login_table">
        <tr>
          <th>飼い主様ID</th>
          <td><input type="text" name="owner_id"></td>
        </tr>
        <tr>
          <th>パスワード</th>
          <td><input type="text" name="password"></td>
        </tr>
      </table>
      <div class="save_info_box"><input type="checkbox" name="save_login_info">ログイン情報を保存</div>
      <div class="login_submit_box"><input type="submit" value="ログイン"></div>
    </form>
  </div>
</div>
.main_box *{
  box-sizing: border-box;
}
body, p {
  magin: 0;
}

.main_box {
  width: 50%;
  margin: 0 auto;
}
.main_box h3 {
  text-align:left;
}
.login_table {
  border-collapse: collapse;
  width:100%;
}

.login_table th, .login_table td {
  border: solid 1px orange;
}

.login_table th {
  background: #fce5bc;
}

.save_info_box, .login_submit_box {
  text-align: center;
}

.login_submit_box input[type="submit"] {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f3f3f3), color-stop(0.5, #e2e2e2), to(#d1d1d1));
  text-shadow: 0 1px 0 silver;
  border: 1px solid silver;
  border-radius: 3px;
  padding: 5px 15px;
}

.login_submit_box input[type="submit"]:hover {
  background: none;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8b5b5), color-stop(0.5, #c4c1c1), to(#aaa7a7));
}

.login_table td input[type="text"] {
  border: 1px solid #444;
  padding: 5px;
  width: 100%;
}
@media only screen and (max-width:480px) {
  .login_table th, .login_table td {
    display: block;
    width: 100%;
  }

  .login_table tr:nth-child(n+2) th, .login_table td {
    border-top: none;
  }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/19 18:35

    ご回答ありがとうございます。
    実は、要素を中央揃えにする為、「margin 0 auto」というのはたまに使ったりするのですが、確かに中央揃えにはなるのですが、少しだけ、右や左に寄せたいといったことができない為、marginを大幅につけることで解決してしまっている部分はあるんですよね...

    キャンセル

  • 2019/07/19 18:41

    「@media only screen and」こちらの記述はメディアクエリと呼ばれる書き方ですよね!
    なんとなく気になったのですが、サイトの制作など行う際は、スマホなども浸透してきていますし、レスポンジブデザインで制作することは当たり前になってきているのでしょうか。。。?

    キャンセル

0

marginがついてる理由については他の回答にも出てる通り、親要素の影響です。

寄せるだけなのであればleftrightでよくないですか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/19 19:06

    ご回答どうもです。
    そうですね...他の方にコードの提案を受けていますので、見直してみたいと思います。

    キャンセル

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

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

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