CSSの問題。 パート2

記事「CSSの問題」の翻訳を続けました。 パート1」

100％に等しい幅/高さを使用する場合

高さ：100％

簡単なものから始めましょう。 高さを使用する場合：100％ ？ 実際、質問はしばしば少し違って聞こえます：「どのようにすれば自分のページを画面の高さ全体にカバーできますか？」 本当ですか？



それに答えるには、 高さ：100％が親要素の高さに等しいことを理解する必要があります。 これは魔法のような「窓の高さ」ではありません。 したがって、要素がウィンドウの高さの100％をすべて占有するようにしたい場合は、高さを設定しても100％では十分ではありません。



なんで？ ただし、コンテナの親はbody要素であり、そのheightプロパティはデフォルトでautoに設定されているためです。 つまり、その高さはコンテンツの高さと等しくなります。 もちろん、身長：100％を身体に追加することもできますが、それでも十分ではありません。



なんで？ すべての理由は、body要素の親はhtml要素であり、これもautoと同じプロパティheightを持ち、コンテンツのサイズに合わせて拡大するためです。 そして今、html要素にheight：100％を追加すると、機能します。



明確になりましたか？ ルートhtml要素は、実際にはページの最上位ではなく、「ビューポート」です。 簡単にするために、これはブラウザウィンドウであると仮定します。 したがって、html要素にheight：100％を設定すると、これは言っていることと同じになり、ブラウザウィンドウと同じ高さになります。



受信した情報を小さなコードで要約します。

html, body, .container { height: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

できた ビューポートがどのように機能するかというトピックに興味がある場合は、PPKの記事を強くお勧めします 。

しかし、親要素に高さではなくmin-heightプロパティが設定されている場合はどうでしょうか？

最近、Roger Johanssonは、親要素がheightに設定されていないがmin-heightが指定されている場合に発生する高さの問題：100％について説明しました。 記事で述べられたことを掘り下げたくはありませんが、結論にまっすぐ進みます。 子がmin-heightで指定された高さ全体を占めることができるように、親に対してheight：1pxを設定する必要があります。

 .parent { min-height: 300px; height: 1px; /* Required to make the child 100% of the min-height */ } .child { height: 100%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jsFiddleの例。



この質問を使用すると、 Roger Johanssonの記事を詳しく知ることができます。

幅：100％

それでは、 幅：100％を扱いましょう。 まず、簡単な説明： width：100％プロパティを設定することにより、要素が親要素の幅全体を占めるようにします。 すべてが標準です。



少し秘密を教えてください。 このプロパティの幅はあまり適切な名前ではありません。 widthプロパティは要素の絶対サイズではなく、要素のコンテンツのサイズであり、これは大きな違いです。



幅が100％の要素にパディングやボーダーを追加すると、親要素には収まりません。 なぜならパディングとボーダーが現れたからであり、それが幅をcontent-widthと呼ぶべきだったからです。 さて、上記を実証する例を見てください。



jsFiddleの例。



親の幅が25emで、子が（親の幅の）100％で、1em（右側に1em、左側に1em、少なくとも水平に2em）に等しいパディングと、サイズが0.5em（右側に0.5em、左側に0.5em、完全に水平に1em）の境界があるとします）、最終的に25em（100％）+ 2em + 1em = 28emになります。



この問題には4つの解決策があります。 最初の、おそらく最良の方法は、 width：100％プロパティを避けることです。この場合、特にこの場合はまったく役に立たないためです。 子がブロック要素である場合、親の幅全体をすでに自動的に占有します（パディングと境界線の問題なし）。 しかし、インラインブロック要素を使用する場合、この問題をそれほど簡単に解決することはできません。



width：100％を静的なサイズに置き換えることができます。 この例では、25-（2 + 1）= 22emです。 もちろん、幅を手動で計算する必要があるため、これは悪い決定です。 他の方法で行こう！



3番目の方法は、calc（）を使用して幅を計算することです： width：calc（100％-3em） 。 しかし、それも適合しません。 最初に、まだパディング+境界サイズを計算する必要があります。 第二に、calc（）はブラウザーでのサポートが不十分です（IE 8、Safari 5、Opera 12、ネイティブAndroidブラウザーでは動作しません）。



アイデア4は、 box-sizing：border-boxプロパティを使用することです。 要素の幅と高さを計算するアルゴリズムを変更して、パディングと境界線のプロパティを考慮するようにします。 すばらしいニュースは、ボックスサイズ設定が優れたブラウザサポートを備えていることです （IE8 +、Opera 7+）。 また、他のすべてのブラウザーでは、 polyfillを使用できます。



結論： box-sizing：border-boxなしでwidth：100％を使用しないでください 。

Z-Indexを使いこなす方法。

ページ上のすべての要素は3つの平面に配置されます。垂直および水平軸に加えて、追加のZ軸（深さ）があります。 最初は、すべてが非常に単純に見えます。大きなz-indexを持つ要素は、小さなz-indexを持つ要素よりも高くなります。 残念ながら、すべてがはるかに複雑です。 z-indexはその歴史の中で最も複雑なcssプロパティであると確信しています。 また、cssを使用する場合、z-indexに関連する問題は他の問題よりも一般的であると確信しています。 私たちが可能な解決策を啓発することを願っています。



はじめに。 z-indexプロパティは、静的要素には影響しません。 要素をZ軸に沿って移動できるようにするには、その位置を相対、絶対、または固定に変更する必要があります。



DOMツリーのすべての要素が同じレベルに配置されるわけではないことをz-indexで理解することが重要です。 つまり、要素のz-indexを非常に大きな値に変更しても、要素がフォアグラウンドに配置されることは保証されません。 これは、オーバーレイコンテキストと呼ばれます。



簡単に言えば、オーバーレイコンテキストは、ある意味では、1つのhtml要素に基づくグループであり、すべての子要素がコンテキスト内の同じ位置と同じz-indexを取得します。 必要に応じて、要素のz-indexを変更すると、他の要素と重なる場合があります。 要素を1つのオーバーレイコンテキスト（下から上）に配置する方法は次のとおりです。

1. コンテキスト要素の背景と境界線
2. 負のZ-index子オーバーレイコンテキスト（最小が最初）
3. 未配置アイテム
4. z-indexがautoまたは0に設定された配置済みアイテム
5. 正のz-indexを使用して配置された要素（z-indexが等しい場合、次の順番は前の順番よりも高くなります）

状況が不快になったとき

だから、私たちはあなたを多くの時間を節約するz-indexの理解の基本を調べました、信じてください。 残念ながら、それらは十分ではありません。 その後、すべてが単純すぎるでしょう。



実際、各オーバーレイコンテキストには独自のZ軸があり、たとえば、コンテキスト1の要素Aとコンテキスト2の要素Bは、z-indexを介して相互作用できません。 つまり、オーバーレイコンテキスト全体の最下部にあるオーバーレイコンテキストの一部としての要素Aは、非常に大きなz-index値であっても、レベルより上の別のコンテキストの要素Bと重複することはできません。



しかし、さらに悪いことです。 html要素は、ルートオーバーレイコンテキストを作成します。 次に、z-indexプロパティがautoに等しくない非静的に配置された各要素も、独自のオーバーレイコンテキストを作成します。 新しいものはありません。 しかし、ここですべてが崩れ始めます。CSSオーバーレイコンテキストに関係しない一部のプロパティは、新しいコンテキストも作成します。 たとえば、opacityプロパティ。







そうです、opacityプロパティは新しいオーバーレイコンテキストを作成します。 変換プロパティとパースペクティブプロパティは同じことを行います。 それは何の意味もありませんが、そうでしょうか？ たとえば、不透明度が1未満の要素や変換がある場合、問題が発生する可能性があります。



残念ながら、z-indexの各問題には独自のコンテキスト（しゃれではない）があり、普遍的なソリューションは不可能です。



上記を要約しましょう：

• z-indexを適用する前に、positionプロパティを非静的に設定してください
• z-index値に5桁を超えて使用しないでください。これはまったく意味がありません。 ほとんどの場合、約10のz-indexで十分です
• オーバーラップする要素が同じオーバーレイコンテキストにあることを確認してください。
• それでも正常に機能しない場合は、変換がなく、親要素の不透明度が高いことを確認してください。

このトピックについては 、Philip WaltonによるZ-indexについて誰も教えてくれなかったことと、 公式のcss仕様を読むこともお勧めします。

インデント折りたたみ

どうやら-これは、問題を把握するために最も多くの時間を盗むCSSグリッチの1つです。 z-indexのバグにいくらか似ていると言えます。 場合によっては、インデントの崩壊は、2つの要素の上下のインデントが1つ（2つのうち最大）に崩壊するときです。



幸いなことに、原則として、この動作は予期されています。 おそらくそれがそのように動作する理由です（css仕様で述べられているように）。 ただし、場合によっては、垂直方向の余白を折りたたむ必要はありません。 これを回避する方法を理解するために、まずこれが起こる理由を確認します。 インデントの崩壊は、3つの異なるケースで発生する可能性があります。

近くのアイテム

隣接する2つの要素に垂直方向の余白がある場合、それらは最大に折りたたまれます。 崩壊を防ぐ方法はいくつかあります。

• クリア：左。 float：左; （権利は同じように機能します）
• 表示：インラインブロック。

jsFiddleの例は、修正の仕組みを示しています。

親と最初/最後の子

通常、親要素と子要素の上部のインデントは最大に折りたたまれます。 最後の子と下のインデントでも同様に機能します。 この問題を解決するには、いくつかの方法もあります。 そのほとんどは、次のプロパティのいずれかを親要素に追加することです。

• オーバーフロー：非表示（またはその他の表示されていない）
• パディング：1px（または0より大きい別の値）
• border：1px solid solid（またはその他の境界線）
• float：左（右は同じように機能します）

jsFiddleの例は、修正の仕組みを示しています。

空のブロック

空のブロックに境界線がない場合、パディング、高さ、その上下のインデントは1つに折り畳まれます。 何らかの方法で空のブロックを使用するのは悪い習慣なので、これは一般的ではありません。

おわりに

残念ながら、ここではcssのバグとハッキングによる氷山の一角についてのみ説明します。 しかし、これらは実際には他のものよりも一般的なものですが、ブラウザの非互換性、ベンダープレフィックス、セレクターの特異性、カスケードと継承など、さらに多くのものがあります。



また、次の記事やサイトを読むことをお勧めします。

• Philip Waltonが作成したZ-indexについて誰もあなたに言わなかったことと、ハブでのその翻訳（ ヒントはSelenIT2に感謝）
• 親が最小の高さを持ち 、ロジャー・ヨハンソンの高さがない場合のパーセント単位の高さ
• CSS公式仕様
• Nicolas Gallagherによるマイクロフィックスフィックスハック
• インラインブロック、なぜ揺れるのか、なぜ嫌なのかをRobert Nymanが表示
• Tim Pietruskyと私によるBrowserhacks

この記事が、将来の問題からあなたを救うことができるいくつかのことを理解する助けになることを願っています。