marginのみでデザイン

css
1html{
2    font-size: 75.0%;
3    font-family: Helvetica, Arial;
4}
5body{
6    background-color: #FAFAFA;
7}
8header{
9    background-color: #00BCD4;
10    color: #F5F5F5;
11    font-size: 2.667rem;
12    padding-top: 1.167rem;
13    padding-bottom: 1.167rem;
14    box-shadow: 0 0.5px 10px rgba(66,66,66, 0.8);
15}
16header a{
17    text-decoration: none;
18    color: #F5F5F5;
19}
20a.title{
21    margin-left: 6.250rem;
22}
23a.main{
24    margin-left: 60.250rem;
25}
26

HTML
1<body>
2
3
4
5    <header>
6        <a href="index.html" class="title">EXAMPLE</a>
7        <a href="main.html" class="main">MAIN</a>
8    </header>
9
10
11
12</body>

このように並びをmarginのみで操作するのはレイアウト手法としてどうなんですか？

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

回答1件

ベストアンサー

個人的な意見ですがmarginのみでサイト全体をレイアウトするのは困難だと思います。
というより、ネガティブマージンでも使わない限り難しいレイアウトが出てくるのではでしょうか。

floatを使う方法が一般的だと思います。
(最近はフルスクリーン型のレイアウトも多く、positionの方が向いていることもあるかもしれませんが)
widthやheightを指定し、floatを指定して、その上でmarginやpaddingを用いてレイアウトを組みますね。
場合によってはpositionを使うこともあると思います。
(追従するheaderなど含め)

ですからmarginやpaddingを用いてレイアウトを組むこと自体は間違いではないと思いますが、それのみで組むというのはmarginやpaddingだけで実現できる形でない限り、通常はないと思います。
あとからそれぞれを変更して調整するのも大変ですしね。

結論としてはレイアウトにはmarginやpadiingを用いますが、それだけでレイアウトするのは変更に弱く、色々と苦労するだけではないでしょうか。
組みやすいレイアウト以外を組むとなると更に苦労することになると思います。
(逆に今回のような組みやすいレイアウトなら後々調整するのが大変ですが問題はないかと)

今回の例ですとlistタグとfloat、marginなどを使って組んでおくと後々要素が増えたりしても対応しやすいですね。

投稿2015/08/15 11:28