marginを適用させたい

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

<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がついたマークはついているのでしょうか。。。？

m.ts10806

2019/07/19 01:30 編集

毎回、点の解決方法の提示ばかり求めてるように思いますが、点の解決は線にも円にもならないので、徐々に崩壊していくだけです。まず円を書くことから始めては。設計ですね。毎回、ドキュメントも仕様も確認せずに「きっとこう書けばこう動くはずだ」「自分のコードが正しいという前提」では話になりません。

H40831

2019/07/20 14:19

なんだか色々な知識が不足してる気がするので、Progateという初心者向け学習サイトでHTML&CSSコースを学習してみてはいかがですか？体験は無料ですし、月額は１０００円です。

toll_tree

2019/07/21 06:29 編集

@H40831さん progateでhtml,css講座は受講しましたが、初心者といっても入門者向けだったので、深くは説明されていなかったので、今は書籍だったり、有料の動画講座で勉強してますね

m.ts10806

2019/07/21 06:24

学習する媒体の話はどこにもされていませんよ。CSSに限らずそこかしこで基礎学習を勧められていることに自覚を持てってことです。全部「やったつもり」で何一つ身に付いていないことを指摘されてるんですよ？学習する媒体が悪いのではなく自身の資質の問題を問われています。基礎から逃げるなってこと。

toll_tree

2019/07/21 06:31

@H40831さんあーでもprogateって有料版があったんですよね。有料版ってどうなんでしょうね？

m.ts10806

2019/07/21 06:41

言い訳はいいのでさっさと基礎学習を入門編からやり直してください。それだけ他者には入門者程度に見られている自覚をいい加減持ってください。いろいろな人に私のコメントに耳を傾けるように言われている意味を理解し、ちゃんと聞き入れてください。一生入門者未満をやりたいという宣言を続けて楽しいですか？

m.ts10806

2019/07/21 06:53

PHPのほうもですが、きちんと基礎学習を積んでいれば詰まるところではない質問ばかりを続けています。いい加減自身のやり方のマズさを自覚されては？非効率どころではありません。他者に迷惑かけるだけかけて自分は何も取り込んでいないのですから。

H40831

2019/07/22 01:02

Progateのコースは月額１０００円を払わないと受けられないレッスンがほとんどですが、そのレッスンまで終えて、やっと基礎学習が終わったと言えるラインです。無料でうけられるレッスンしかやってないのなら、それは基礎学習が終わってないということです。。。

toll_tree

2019/07/22 01:09 編集

@H40831さん progateはもちろん無料コースしか受けていないですが、記載しました通りドットインストールだったり、他の教材などで勉強はしています。progateのみしかやっていないということはではないです。

m.ts10806

2019/07/22 01:25 編集

それだけやったと宣言しても他者からは基礎学習すらできてない初心者という印象しか与えられてないということなんですけど。誰に言われたら気づきますか？親？友達？むしろエンジニアとして大先輩ばかりの場での意見を受け入れられないってどういう意識でプログラムやってきたんでしょうか。今あなたが出している質問と結果が全てです。「やりました」は誰でも言えるんですよ。だってどこにもそのやったという結果出てないじゃない。貴重な大事な意見全部スルーして逃げてるだけじゃない。むしろまともなコミュニケーション成り立ってることも少ないのに。当たり前のこと（ドキュメントを読む、デバッグをする）が何一つできないのに「こうなると思った」なんて偉そうにプログラム語らないでください。まともなコミュニケーションが成り立っていない直近の例 >レスポンシブデザインは既に当然の技術というコメントに対し >レスポンシブデザインでサイトを制作するということは当然のような感じになってきているのでしょうか？というコメント。「当然なの？」と聞いて「当然です」と返ってきているなら分かる。でも「当然です」というコメントに対して「当然なの？」って確認する意味が分からない。

H40831

2019/07/22 04:01

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

toll_tree

2019/07/23 05:04

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

m.ts10806

2019/07/23 05:44 編集

「検討します」「考えておきます」「やってみます」「確認してみます」常套句のように使っていますね。もはやオオカミ少年です。本当に実施されてたら、130も質問してきていまだに「基礎から」ってすすめられることはないです。 H40831さんぜひこの質問者の過去質問とその対応を見てください。この質問者に勧めるだけ無駄です。「自分が組んだことが正しい、動かないプログラムが悪い」っていう人なので。「指摘は自分への悪意・攻撃」として無視・逃亡してるだけの人なので。そうやって過去のあらゆるアドバイスを踏みつぶしてきているので。（あとこの質問者の丸投げ質問に低評価をつけるとある一定数まで謎の高評価がつく変なシステムをお持ちです）

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

回答3件

ベストアンサー

tableタグにmargin-rightをつけ

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

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

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

投稿2019/07/18 11:46

kei344

総合スコア69643

toll_tree

2019/07/18 12:01

ご回答ありがとうございます。「margin-left:651px;」が無理な配置となっているといった点なのですが、あまりこういったmarginを大幅に付ける手段は適切ではないということなのでしょうか？

toll_tree

2019/07/18 12:03

ですが確かにスマホなどのデバイスに対して、651pxとしたら崩れてしまうような気はしますね...

kei344

2019/07/18 12:31

> あまりこういったmarginを大幅に付ける手段は適切ではないはい、そうです。

toll_tree

2019/07/19 03:13

例えばなのですが、marginを大幅に取らなかった場合、要素を少し大きく動かしたい場合、どのような方法があるか教えて頂いてもよろしいでしょうか？

kei344

2019/07/19 04:14

「要素を少し大きく動かしたい場合」が発生しないように組みます。 > 教えて頂いても書籍で勉強してください。少なくとも回答欄レベルで提示できるものではありません。

toll_tree

2019/07/19 09:44

書籍探してみようと思います。やはり、「今風の組み方」ということですとレスポンシブデザインの書籍が良いでしょうか...？

kei344

2019/07/19 14:35

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

toll_tree

2019/07/19 14:42

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

m.ts10806

2019/07/21 06:38 編集

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

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

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

html
1<div class="main_box">
2  <h3>〇〇〇動物病院 | ネット予約</h3>
3  <div>
4    <form method="post" action="#">
5      <table class="login_table">
6        <tr>
7          <th>飼い主様ID</th>
8          <td><input type="text" name="owner_id"></td>
9        </tr>
10        <tr>
11          <th>パスワード</th>
12          <td><input type="text" name="password"></td>
13        </tr>
14      </table>
15      <div class="save_info_box"><input type="checkbox" name="save_login_info">ログイン情報を保存</div>
16      <div class="login_submit_box"><input type="submit" value="ログイン"></div>
17    </form>
18  </div>
19</div>

css
1.main_box *{
2  box-sizing: border-box;
3}
4body, p {
5  magin: 0;
6}
7
8.main_box {
9  width: 50%;
10  margin: 0 auto;
11}
12.main_box h3 {
13  text-align:left;
14}
15.login_table {
16  border-collapse: collapse;
17  width:100%;
18}
19
20.login_table th, .login_table td {
21  border: solid 1px orange;
22}
23
24.login_table th {
25  background: #fce5bc;
26}
27
28.save_info_box, .login_submit_box {
29  text-align: center;
30}
31
32.login_submit_box input[type="submit"] {
33  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f3f3f3), color-stop(0.5, #e2e2e2), to(#d1d1d1));
34  text-shadow: 0 1px 0 silver;
35  border: 1px solid silver;
36  border-radius: 3px;
37  padding: 5px 15px;
38}
39
40.login_submit_box input[type="submit"]:hover {
41  background: none;
42  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8b5b5), color-stop(0.5, #c4c1c1), to(#aaa7a7));
43}
44
45.login_table td input[type="text"] {
46  border: 1px solid #444;
47  padding: 5px;
48  width: 100%;
49}
50@media only screen and (max-width:480px) {
51  .login_table th, .login_table td {
52    display: block;
53    width: 100%;
54  }
55
56  .login_table tr:nth-child(n+2) th, .login_table td {
57    border-top: none;
58  }
59}