1. ホーム
  2. html

絶対配置を使用することはバッドプラクティスとみなされますか?[クローズド]

2024-01-06 12:32:11

質問

私はあるウェブページを開発していました。そこでは、チェスのようなゲームのためのボードと、いくつかの駒のトレイをレイアウトしていました。これはすべて HTML を使用して行われます (ゲームの実行中に jQuery で動的に更新されます)。ページ内の要素の絶対配置を使用することは悪い習慣と考えられており、相対配置を使用することが望ましいという考えをどこかで持っていたのです。

あまりにも長い間、相対的な配置と格闘した後、私は、ボード要素の絶対的な配置が、正しく行うのがずっとずっと簡単であることに気づきました...そしてそれは実現されました。

相対的な配置が絶対的な配置よりも望ましいという理由を知っている人はいますか?どちらのアプローチを取るべきかを決定する際に適用するガイドラインや経験則はありますか?

どのように解決するのですか?

あなたが開発しているようなチェスのようなゲームでは、絶対配置を使用することに本質的な問題はありません。 おっしゃるとおり、相対配置と通常のフロー レイアウトでは、この種のタスクは非常に困難です。

もちろん、公共サービスを提供するサイトなど、より標準的な Web サイトを開発する場合は、絶対位置はブラウザのデフォルトのフロー レイアウトを上書きするので、多くのユーザーにとってのアクセシビリティを低下させます。 この場合、私はそれを避けたいと思います。

とはいえ、絶対配置のあまり知られていない利点は、ローカライズされた絶対配置を可能にすることです。 内に の中で、最も近い "positioned"の親要素に、局所的な絶対位置決めができることです。

注意してください。 positioned"要素は、relative, fixed, absolute, stickyのいずれかにすることができます。

説明するために

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute;left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

ここで childDIV の左から20px、上から20pxに配置されています。 parentDIV , を文書全体に適用することができます。 これにより、ページ全体のフロー・レイアウトを犠牲にすることなく、ページ上のネストされた要素を正確に制御することができます。

ご質問(絶対配置よりも相対配置の方が望ましい)にお答えします。何を構築する必要があるかによって異なります。 しかし、一般的な位置決め (絶対または相対) とデフォルトのフロー レイアウトの比較では、私のアプローチは上記のとおりです。