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

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

新規登録して質問してみよう
ただいま回答率
85.45%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

3回答

1801閲覧

marginを適用させたい

toll_tree

総合スコア199

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/18 11:28

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

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

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

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

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

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

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

m.ts10806

2019/07/19 01:30 編集

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

2019/07/20 14:19

なんだか色々な知識が不足してる気がするので、Progateという初心者向け学習サイトでHTML&CSSコースを学習してみてはいかがですか? 体験は無料ですし、月額は1000円です。
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のコースは月額1000円を払わないと受けられないレッスンがほとんどですが、 そのレッスンまで終えて、やっと基礎学習が終わったと言えるラインです。 無料でうけられるレッスンしかやってないのなら、それは基礎学習が終わってないということです。。。
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さん ぜひこの質問者の過去質問とその対応を見てください。 この質問者に勧めるだけ無駄です。「自分が組んだことが正しい、動かないプログラムが悪い」っていう人なので。 「指摘は自分への悪意・攻撃」として無視・逃亡してるだけの人なので。 そうやって過去のあらゆるアドバイスを踏みつぶしてきているので。 (あとこの質問者の丸投げ質問に低評価をつけるとある一定数まで謎の高評価がつく変なシステムをお持ちです)
guest

回答3

0

ベストアンサー

tableタグにmargin-rightをつけ

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


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


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

投稿2019/07/18 11:46

kei344

総合スコア69462

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

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

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がモバイルファーストインデックスを導入してもう結構経つのに・・・。
guest

0

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

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}

投稿2019/07/19 05:32

dit.

総合スコア3235

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

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

toll_tree

2019/07/19 09:35

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

2019/07/19 09:41

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

0

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

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

投稿2019/07/19 10:01

mepon

総合スコア480

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

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

toll_tree

2019/07/19 10:06

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問