033.4 レッスン 1

ブラウザがドキュメントツリーをレンダリングするデフォルトの方法を 通常フロー と呼びます。要素に対応する四角形は、ドキュメントツリーに表示される順序とほぼ同じ順序で、親要素に対して配置されます。ただし、要素の種類によっては、対応するボックスの配置ルールが異なる場合があります。

通常フローのロジックを理解するには、ボックスを可視化するのがよいでしょう。まず、非常に基本的なページから始めましょう。3つの独立した div 要素があり、それぞれがランダムなテキストの段落を持っています。

すべての単語は span 要素の中にあるので、単語にスタイルを与えて、ボックスとしてどのように扱われるかを見ることができます。ボックスを表示するためには、HTMLドキュメントで参照されているスタイルシートファイル style.css を編集する必要があります。以下のルールで必要なことができます。

結果は Figure 1 に表示されます。

Figure 1 では、各HTMLタグがレイアウト上で対応するボックスを持っていることを示しています。 div 、 h2 、 p の各要素は、親要素の幅に合わせて拡張されます。例えば、 div 要素の親要素は body 要素なので、bodyの幅に合わせて拡張され、 h2 や p 要素の親要素は対応する div です。親要素の幅に合わせて拡張されたボックスは、 block 要素と呼ばれます。ブロックとして表示される最も一般的なHTMLタグには、 h1 、 h2 、 h3 、 p 、 ul 、 ol 、 table 、 li 、 div 、 section 、 form 、 aside などがあります。兄弟ブロック要素（同一の直系親要素を持つブロック要素）は、親要素の内側に上から下へと積み重ねられます。

テキスト自体の他に、 h1 、 p 、 li などの要素は、 inline 要素のみを子として想定しています。西洋の多くのスクリプトと同様に、インライン要素はテキストの左から右への流れに従います。右側に空きがなくなると、インライン要素の流れは、テキストと同じように次の行に続きます。インラインボックスとして扱われる一般的なHTMLタグには、 span 、 a 、 em 、 strong 、 img 、 input 、 label などがあります。

サンプルのHTMLページでは、段落内のすべての単語が span タグで囲まれており、対応するCSSルールで強調表示できるようになっています。図のように、各 span 要素は、左から右へと、親要素に空きがなくなるまで水平に配置されます。

要素の高さはその内容に依存するため、ブラウザはコンテナ要素の高さを調整して、そのネストしたブロック要素やインライン要素の行に対応させます。しかし、いくつかのCSSプロパティは、ボックスの形状、位置、およびその内部要素の配置に影響を与えます。

margin と padding のプロパティは、すべてのボックスタイプに影響します。これらのプロパティを明示的に設定しなくても、ブラウザは標準的な値を使っていくつかのプロパティを設定します。 Figure 1 に見られるように、 h2 と p の要素は、それらの間にギャップがある状態でレンダリングされています。これらのギャップは、ブラウザがこれらの要素にデフォルトで追加する上下のマージンです。 h2 と p のセレクタのCSSルールを変更することで、このギャップを取り除くことができます。

結果は Figure 2 に示されます。

また、デフォルトでは、 body 要素には小さなマージンがあり、周囲にギャップが生じます。このギャップは、 margin プロパティを使って取り除くこともできます。

要素の margin プロパティが要素とその周囲との間のギャップを定義するのに対して、要素の padding プロパティは、コンテナの限界とその子要素との間の内部ギャップを定義します。例えば、サンプルコードの各 div の中にある h2 と p という要素を考えてみましょう。これらの要素のmarginプロパティを使用して、対応する div の境界にギャップを作ることもできますが、コンテナの padding プロパティを変更する方が簡単です。

2つ目の div のルールだけを変更したので、結果 (Figure 3) は2つ目の div と他の div コンテナの違いを表しています。

margin プロパティは、ボックスの4つの側面を制御する4つのプロパティの省略形です。 margin-top 、 margin-right 、 margin-bottom 、 margin-left です。これまでの例のように、 margin に1つの値が割り当てられている場合は、ボックスの4つの余白すべてが使用されます。2つの値が書かれている場合は、1つ目の値で上下の余白を、2つ目の値で左右の余白を定義します。例えば、 margin: 1em 2em とすると、上下の余白は1em、左右の余白は2emと定義されます。4つの値を書くと、上から時計回りに4辺の余白が設定されます。短縮形プロパティの異なる値は、同じ単位を使用する必要はありません。

padding プロパティも同様に、 margin プロパティと同じ原則に従った短縮形です。

デフォルトの動作では、ブロック要素は利用可能な幅に合わせて伸縮します。しかし、これは必須ではありません。 width プロパティでは、ボックスの水平方向のサイズを固定することができます。

CSSルールに width: 6em を追加すると、最初の div が水平方向に縮小され、その右側に空白ができます (Figure 4) 。

最初の div を左寄せにするのではなく、中央寄せにしたい場合があります。ボックスを中央に配置することは、両側に同じ大きさのマージンを設定することと同じなので、marginプロパティを使って中央に配置することができます。利用可能なスペースの大きさが異なる場合があるので、左右のマージンには auto の値を使用します。

左右の余白はブラウザで自動的に計算され、ボックスは中央に配置されます (Figure 5) 。

このように、ブロック要素の幅を狭くしても、残りのスペースを次の要素に利用することはできません。あたかも幅の狭い要素がすべての幅を占めているかのように、自然な流れが維持されます。

通常フローは、シンプルで連続的なものです。CSSでは、通常フローを断ち切って、特定の方法で要素を配置することができ、必要に応じてページのスクロールを上書きすることもできます。このセクションでは、要素の位置を制御するいくつかの方法を紹介します。

CSSには、画面の大きさに合わせて要素やフォントのサイズを調整するプロパティが用意されています。しかし、さらに進んで、デスクトップと一定の大きさ以下の画面サイズのデバイスでは、異なるデザインを使用したいと思うこともあるでしょう。これを レスポンシブWebデザイン と呼びますが、CSSではこれを実現するために メディアクエリ と呼ばれる手法が用意されています。

先ほどの例では、 div 要素を列に並べて配置するようにページレイアウトを変更しました。このレイアウトは大きな画面には適していますが、小さな画面ではごちゃごちゃしすぎてしまいます。この問題を解決するには、スタイルシートにメディアクエリを追加して、幅が最低でも 600px のスクリーンのみにマッチさせます。

@media ディレクティブ内のCSSルールは、カッコ内の基準が満たされた場合にのみ使用されます。この例では、ビューポートの幅が 600px 未満の場合、コンテナの div にはルールが適用されず、その子は従来の div 要素としてレンダリングされます。ブラウザはビューポートの寸法が変わるたびにメディアクエリを再評価するので、ブラウザのウィンドウサイズを変更したり、スマートフォンを回転させたりしながら、リアルタイムにレイアウトを変更することができます。