0

だから、ここ数ヶ月、私は独学でウェブデザインを学んできました。もちろん、学ぶことはまだまだたくさんありますが、これまでに知っていることをしっかりと把握できていると感じています。私が最近疑問に思っていることの 1 つは、特に絶対配置を使用することになった場合に、div がどれほど必要かということです。たとえば、最近、次のコードを書きました。

<section id="header-section">
        <header class="main-header">
            <h1>The Voice of Jeremy Donahue</h1>
                <nav class="main-navigation">
                    <ul>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/about">About</a></li>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/contact">Contact</a></li>
                    </ul>
                </nav>
        </header>
</section>

多くのページのソース コードを読むと、一般的にこのようにグループ化されているか、非常に似ているように思えます。もちろん、デザイナーとして、ユーザー エクスペリエンスを念頭に置き、コードのセマンティックを維持しながら、芸術的なライセンスを持っていて、好きなようにページを配置できると思います。

しかし、多くの場合、{position: absolute} プロパティを使用して要素を配置し、含まれている div を完全に無視してしまいます。したがって、たとえば H1 があり、説明したように配置する予定がある場合、なぜわざわざ div に配置する必要があるのでしょうか? また、そのように配置する他の要素についても同じです。それらを独立した要素として持たないのはなぜですか？セマンティックな理由からそうするのが良いのか、それともこのように物事をグループ化するのがベストプラクティスと考えられているだけなのか、私は疑問に思っています. 私がこれを説明した方法で明確になったことを願っています。

できるだけわかりやすくするために、これまでにこのページの特定の繰り返しに適用した css を次に示します。(明らかに) 完成にはほど遠いですが、このヘッダー セクションに適用した絶対的な配置をいくつか確認できます。

/*global*/

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background: rgb(234, 234, 234);
}

body, .container {
    min-height: 100%;
}

.container {
    background: white;
    margin-top: 6.25em;
}

header {
    position: absolute;
    top: 0.625rem;
    background: transparent;
    text-align: center;

}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/*typography*/

h1 {
    font-family: 'Parisienne', cursive;
    font-size: 2.5rem;
    color: #2713e7;
    position: relative;
    top: 1.25rem;

}

/*lists*/

.main-navigation {
    position: relative;
    top: 2.5rem;
}

.main-navigation li  {
    position: absolute;
    top: 10px;
    display: inline-block;
    margin-right: 10%;
    font-family: 'Atomic Age', cursive;
    font-size: 1.5625rem;

}

/*borders*/

.main-navigation {
    border: 2px solid black;
}

.main-navigation li  {
    display: inline-block;
    border: 2px solid black;


}
4

1 に答える 1

1

1. それで、ここ数ヶ月、私は独学で Web デザインを学びました。

よくできた！がんばり続ける。

2. しかし、多くの場合、{position: absolute} プロパティを使用して要素を配置し、含まれている div を完全に無視してしまいます。

よくありません。キャンバスから毎回要素を配置したくありません。あなたは？position: absolute最も近い相対的に配置された先祖に基づいて要素を配置します。ない場合は、キャンバスに従って配置する必要があります。

3したがって、たとえば H1 があり、説明したように配置することを計画している場合、なぜそれを div に配置する必要があるのでしょうか?そして、そのように配置する他の要素についても同じです。それらを独立した要素として持たないのはなぜですか？

猫の皮を剥ぐ方法はたくさんあります。このタイプのセットアップを行う Web デザイナーは多くありません。そして、ページ上の各要素を個別に配置します。ドキュメントに非常に多くのクラスを追加することになるため、これは大きな問題です。

于 2013-10-07T02:45:01.180 に答える