Q&A
対して長くもないので「長文失礼しました」は要らないのでは。
要件をきちんと書いていれば長くても短くても気になりません。それよりも質問の質の問題のほうが気になります。
「添付画像を例に」とありますが、画像が最初のほうが回答する側としては見やすいです。
確かにIDやCLASSに全角は使えますが、
https://www.attend.jp/html_170817
「分かりやすいように」とするのであれば全角よりも実コードのほうが分かりやすいです。
添付画像を例に質問させて下さい
【HTMLの構造】
（１） 『全体』や『ラッパー１』のように子要素が多数ある親要素は、それらの子要素をCSSでまとめて調整したい時に便利だとは思うのですが、その分記述も増えるので特に必要ないと考えますか？
それとも、最初は必要ないように思えても後々の変更の為に最初からidやclassで振り分けておくべきでしょうか？
【position:absolute;】
（２） 初期値の場合は画面の左上(図：①)が基準位置になるのは分かるのですが、『ラッパー１』にabsoluteを指定後、『ぷりん』や『さかな』にabsoluteを指定するとそれらの中身は②が基準位置になりますか？
（３） その後、今度は③を基準位置として『ねこ』の位置調整をしたい場合、『ラッパー２』にabsoluteを指定して
更に『ねこ』にもabsoluteで③が基準位置に更新されますか？
（４） 『ラッパー１』と『ラッパー２』は<div>でそれぞれグループ分けしてあるので、ちゃんと区切ってやれば基準位置も別々と認識してくれる仕組みかなと思っていますが、グループ分けは必要or必要ないどちらでしょうか？
【marginとpadding】
（５） 既存サイトをデベロッパーツールで検証した際、周りの余白にはmarginよりもpaddingが使われている＆綺麗に上下左右を覆っているように思います。(図：コップのa)
marginでもpaddingでも間違いではないと思うのですが、なぜ内側の余白であるpaddingが使用される傾向が強いのでしょうか？
（６） 例えば右側に特に余白が必要ないと感じた場合、自分でコーディングすると(図：木)のようになってしまいますが不恰好ですか？やはり配置の見栄えの為にも上下左右を綺麗に覆う癖を付けた方が良いのでしょうか？
（７） 既存サイトの多くが(図：コップ)のように改行も兼ねて余白を大きく取っているようにも感じるのですが、absoluteやrelativeで位置調整するのと何か違いがありますか？
長文失礼いたしました。
(idやclassは分かりやすいように日本語にしてあります)
質問項目が多すぎるため、回答に通常よりも労力がかかってしまいます。
各質問項目にあまり関連性がないため、質問を分けることで、回答が得られやすくなると思います。
回答3件
0
問題が散らばりすぎて回答が難しいですが、適当に答えてみます。（どの意味の「適当」かは考えてみてください）
（１）
場合による。具体的なコードを出してください。
（２）
試してみればわかると思います。
（３）
試してみればわかると思います。
（４）
場合によるし、色々試してみて決めれば良いと思います。
実現したいレイアウトが実現できていれば、まずそれで良いので。
何を目指すかは作る側のさじ加減です（もちろんマークアップは正しいほうが良い）
（５）
「marginでもpaddingでも間違いではない」というのは間違った認識です。
それぞれに明確な意味、役割と持っています。そこは色々調べて試して理解を深めてください。
（６）
自分でコーディングすると(図：木)のようになってしまいますが不恰好ですか？
やはり配置の見栄えの為にも上下左右を綺麗に覆う癖を付けた方が良いのでしょうか？
なぜ、それをどのようにしたいか全く知らない他人に聞くのでしょうか？
もし聞きたいのであれば、再現するコードと、「このようにしたい」画面イメージを以て質問するべきです。
「やりたいイメージ」が分からないのに不格好かどうかを他人に判断する権利はありません。
見栄えについてもそうです。それが「やりたいイメージが実現できている」のであれば他人に文句を言う権利はありません。
（７）
ちょっと意味が分かりません。
「既存サイト」が何なのかにもよりますし、
それぞれのサイトはそれぞれのサイトの方針に従ってレイアウトされているので「流行に乗っている」というわけではありません。
サイトの利用者（性別や年齢層、職業など）を想定して作られているので「絶対的に同じ基準で作られている」サイトというのは1つも存在しません。
病院のWebサイトを例にしますと、科によっても違いますし、同じ科でもそこの先生が強みにしている症状・病気によっても作りが違ってきます。地方によっても違うでしょう。
もちろんレイアウトのパターンを増やすために他のWebサイトを参考にするのは非常に良いことです。
デザイン力をあげたいなら様々なデザインに触れることが最も着実です。
ですが、自身が作ろうとしているWebサイトにはそのWebサイトの目的があるわけですので、
空間1つとってもそのWebサイトが果たすべき目的によって決められるものです。
そこは仕様です。作る側が決めることです。「何がいいか」「どれくらいがいいか」はそのサイトの目的、全体のバランスによって決めてください。
投稿2019/05/13 01:40
総合スコア80850
0
ベストアンサー
かいつまんで言えば･･･
【HTMLの構造】
（１）～最初からidやclassで振り分けておくべきでしょうか？
HTMLの構造とは別に、デザインに寄る部分が大きく、不要と分かっている時点では、コーディングの邪魔になるだけなので、最初のうちは、必要になったら追加していく方が良いと思います。
【marginとpadding】
（５）～なぜ内側の余白であるpaddingが使用される傾向が強いのでしょうか？
状況にも寄りますが、paddingの範囲までが、背景色や背景画像が設定できるからです。
【marginとpadding】
（７）～余白を大きく取っているようにも感じる
余白はデザインに必要不可欠のものです。どこにどのように余白を取り、如何に訴求力を上げるのかが、デザインの難しさでもあります。
～absoluteやrelativeで位置調整するのと何か違いがありますか？
意図するデザインを表現するために、コーディングの手法はひとつだけでなく、いくつもあるため、どれが正解だとは言えません。
状況にも寄りますし、コーダーのプロパティに対する、得意不得意や好き嫌いもあるので、そこが「違い」なだけだと思います。
まずは、自分なりにコーディングの数をこなしてみてください。そうすれば、今回の質問は、自然と理解でき、解決に繋がると思います。
投稿2019/05/13 09:59
総合スコア3523
参考にさせていただきます。
質問自体が回答のしづらい形となってしまったにも関わらず、ご丁寧にありがとうございます。
コーディングの数をいくつもこなしてみようと思います。
アドバイスありがとうございました。
0
（１）あなたの考えとか、他の人の考えで決めてる時点で、議論が不要なような気がしますが。
好きにしたらいいと思いますが、必ず必要とかではなく、実装したいものによりけりです。
世の中でそういったことが慣例的に行われることが多いのは、
考え云々ではなく、様々な実装や管理上、必要だと判断されているからです。
div#wrapperで囲われるのが多いのは、body直下で展開すると、CSSの割り当て、JavaScriptでのコントロール時に、
困難になることが多いためと、ページ間で仕様を統一し、ソースを管理をしやすくするためです。
必要ないと思うなら、div#wrapperなしで実装、ソースコードを管理してみるとよろしいかと思います。
また、本当に必要ない場合もあります。
ようは冒頭で言った通り、考え方云々ではなく、実装上必要なら必要って話です。
（２）なります。ご自分で調べて実際にやってみました？
（３）ならない。親子同時にabsoluteを利かせた場合、親が基準になり、その子要素に対して、相対座標が適用されるので、ラッパー2とラッパー3と別れる時点で、お互いは独立しているので、干渉しません。
というか、absoluteにこだわりがあるようですが、この画像のレイアウト実現するのに、absolute全く必要ないかと思いますが。（というか、余計レイアウト難しくなる）
（４）というか、この画像を見た限りではこのレイアウトでそもそもabsoluteがまったくいらない。
（余計にレイアウト難しくなる）
（５）間違いないとかではなく、仕様と用途の違いです。実装したいことによって、どっちを使うかは違ってきます。
傾向として見て、padding使っとけと言うエンジニアは絶対数少なからずいますが、
その考えでは、込み入った実装をするときに、必ず行き詰ります。
padding使っとけば大丈夫な場面は確かに多いのは事実ですが、marginでないと、正確な動きをしないことももちろんあります。
ex）CSSで線を引くときなど、marginとpaddingを正確に使い分けていないと、正しくレイアウトができない。
なので傾向云々ではなく、正しい用途で使うことが、エンジニアとしてのレベルが高いってことです。
（６）このレイアウトをしたデザイナーさんと相談してください。
これはコーダーの実装の仕方云々の話ではありません。
（７）用途や実装目的の違いです。
absolute好きなようですが、
不必要に使うと、全ての要素に対して、座標を明確にCSSで組む必要がでてしまいますよ？
それはかなり無駄という物です。しかも、HTMLの内容が変化、更新するたびに座標の数値いじらなくてはならなくなりますよ？
HTMLの性質上、上から下に積みあがっていく性質があるので、absoluteばかり使っていると、
せっかくHTMLで自動的にやってくれる部分も、いちいち自身で座標指定やらしなくてはならなくなります。
absoluteの使いどころは、例えば、コップブロックの右上に木を重ねて表示したい、とか、
通常のHTMLの性質ではできないようなレイアウトの時に使用するものです。
何度も申し上げますが、今回の画像のようなレイアウトには、abusoluteは全く必要ありません。
余計にCSS組むのが大変になりますよ。
投稿2019/05/13 07:28
総合スコア9528
あなたの回答
tips
プレビュー
