HTMLデザインパターン日次学習ノート照合

HTMLデザインパターンラーニングノート

今週はHTMLのデザインパターンを勉強してきたので、そのまとめです。

I. ボックスモデルについて学ぶ

CSSにはボックスモデルという基本的なデザインモデルがあり、要素を箱として見て解析する方法を定義しています。インラインボックス、インラインブロックボックス、ブロックボックス、テーブルボックス、アブソリュートボックス、フローテッドボックスの6つのボックスモデルについて学びました。

ボックスモデルのデザインパターンはCSSに組み込まれており、border、margin、padding、contentの各プロパティ間の関係を定義している。各プロパティは、top、right、bottom、left の 4 つの部分からなり、この 4 つの部分は同時に設定することも別々に設定することもできます。border にはサイズと色があり、これは私たちが生活の中で見るボックスの太さとボックスが何色の素材でできているかを解釈できます。border はボックスが他のものからどれだけ離れているか、content はボックス内のもの、padding はボックス内の空きを埋めてくれるもの、素材と言えます。

1.1 インラインボックスモデル

インラインボックスモデルは、インラインが配置された順にパースされます。インラインは左から右に水平に並べられ、最も近いターミナルブロックの祖先の幅を超えると新しい行に切り替わります。水平方向のマージンは、インライン要素の整列順序の位置を変更します。margin-leftを正の値にすると前の要素から離れ、負の値にすると近くなります。margin-rightを正の値にすると次の要素から離れ、負の値にすると近くなります。水平ボーダーは、インライン要素の整列位置を変更します。左のボーダーはその要素を左側に、右のボーダーは次の要素を右側に配置します。上下のボーダーは内マージンの外に表示されますが、行の高さまで伸びたり、要素の位置を縦に変えたりすることはありません。このパターンのテンプレートは次のように表すことができる。

このデザインパターンは、あらゆるインライン要素、およびインライン表示されるあらゆる要素に適用することができます。

1.2 インラインブロックボックスモデル

インラインブロック要素は、他のインラインボックスと同様にインラインアライメントに配置されますが、ブロック要素の属性の一部（外余白、ボーダー、内余白、幅、高さ）も含んでいる点が異なります。インラインブロック要素は他の行と交差することはありません。インラインブロック要素は、自身の高さ、内マージン、ボーダー、外マージンに合わせて行の高さを追加します。 width と height は要素の高さと幅を設定し、それらの幅または高さを特定の値に設定することによって、画像などの代替要素を拡大または縮小することができます。また、width:autoとheight:autoを使用すると、代替要素のサイズを実際のサイズと一致させることができます。例えば、display:inline-blockを持つspanが、widthとheightの設定によりサイズ変更されたとします。また、width:autoとheight:autoでインラインブロック要素を囲むことができます。インラインブロック要素は、width:100%で引き伸ばすことができます。margin要素は、上下左右の4方向に要素の大きさを変えます。margin-topとmargin-bottomは行の高さを増減させ、margin-leftとmargin-rightは要素を水平方向に前後の要素との距離を縮めたり広げたりします。 borderとpaddingはインライン要素の外寸を広げるのにも使用します。

インラインボックスモデルの典型的なパターンは以下の通りです。

このデザインパターンは、すべてのインライン要素に適用することができます。

1.3 ブロック・ボックス・モデル

ブロックフォーマット環境では、ブロックボックスモデルは上から下へ垂直に配置され、これはブロック要素の通常の滑らかな配置です。ブロックボックスモデルは、他のブロックボックスモデルを含むことができ、また、ブロックフォーマット環境を終了させ、インラインボックスモデルを含むインラインフォーマット環境を開始させることもできます。終端ブ ロ ッ ク 要素は、 その内枠に イ ン ラ イ ン組版環境を生成 し ますが、 その外枠は こ の時点ではブ ロ ッ ク 組版環境にな っ てい る 必要があ り ます。

ブロック要素は、親要素と同じ長さか、それより小さいか大きいかを選択できる。親要素より大きい場合はオーバーフローします。overflow属性は、ブラウザがオーバーフローをどのように処理するかを制御するために使用されます。ブロックボックスモデルでは、要素の幅と高さを設定するために、依然として width と height が使用されます。margin-leftとmargin-rightは、伸ばしたブロック要素の辺をインデントまたは拡張し、設定されたブロック要素の大きさを調整するものです。ブラウザは、隣接するブロック要素の上下のマージンをオフセットします。margin-left:autoとmargin-right:autoは、サイズが固定されたブロック要素の水平方向の配置を制御するために使用します。ブロック要素に幅が設定されている場合、 margin-left:auto はブロック要素を親要素の右側に、 margin-right:auto はブロック要素を親要素の左側に配置します。margin-left:auto と margin-right:auto の両方を設定すると、ブロック要素は親要素の中央に配置されます。border と padding は、ボックスモデルの外側の幅と高さを拡張することもできます。ブロックのボックスモデルのパターンは以下のとおりです。

このデザインパターンは、すべてのブロック要素に使用することができます。

1.4 テーブルボックスモデル

テーブルは、多数のセル列を持つブロック・ボックス・モデルである。テーブルもブロック要素の配列の中にあり、テーブルのセルは "行" と "列" に配列されています。テーブルには外側の余白がありますが、内側の余白はありません。セルには内側に余白がありますが、外側に余白はありません。テーブルの幅はwidthで設定します。widthは内側のマージンの幅ではなく、外側のボーダーの幅を意味します。テーブルの高さはheightで設定し、マージンの内側ではなくボーダーの外側の高さを参照する。マージンは、テーブルがサイズ調整されているか、ラップされているか、ストレッチされているかによって解決される。サイズ調整されラップされている場合、外側のマージンはテーブルとそれに続く要素を移動させる。負のマージンは、隣接する要素がテーブルと重なるようになる。テーブルが引き伸ばされると、外側のマージンはテーブルをインデントし、その内側の寸法を小さくし、セルのサイズを小さくする。 border は、定義されたサイズまたは引き伸ばされたテーブルの内側のボックスを小さくする。また、オーバーフローはテーブルには適用できません。テーブルはオーバーフローできず、オーバーフローできるのはテーブルのセルのみだからです。border-collapseは、隣接するボーダーを1つに統合するかどうかを決定し、table-layoutは、テーブルのサイズを固定するか（fixed）、内容に応じて変化させるか（auto）を決定します。 . テーブルボックスのモデルは次のようなスキーマを持ちます。

このデザインパターンは、すべてのフォーム要素に使用することができます。

1.5 絶対位置決めボックスモデル

絶対位置指定された要素は、通常の要素配置の順序から外れ、1レベル上または1レベル下に配置される。それは、最も近い位置決めされた祖先からの相対的なビューポート内の位置に配置または固定される。それは、その親要素と同じサイズにサイズ、ラップ、または伸張されることができる。どの要素も絶対位置指定が可能です。絶対位置指定されたボックスモデルの位置は、他のボックスモデルの位置には影響を与えません。

z-indexは、配置された要素の積み重ねの順番を制御します。負の値では通常配置されるレイヤーの下に配置され、正の値では上に配置されます。値が高いほど、より垂直方向に整列されます。絶対位置指定ボックスモデルには、top,left,bottom,rightを割り当てることができます。値を設定すると、leftは絶対位置指定された要素のコンテナを参照として、設定された正負の値に従って位置指定します。他の3つの属性も同様です。要素の幅を設定するには width を、要素の高さを設定するには height を使用します。そして、marginは正の値であれば絶対位置指定ボックスモデルをコンテナの中心に向かって移動し、負の値であれば中心から離れる。 borderとpaddingは、伸ばした絶対位置指定ボックスモデルの内側のボックスを縮める。絶対位置指定ボックスモデルのパターンは，次のとおりである。

このデザインパターンは、すべての要素に適用することができます。

1.6 フローティングボックスモデル

float:leftまたはfloat:rightで任意の要素を浮遊させることができます。フローティング要素は通常の要素順序から外れて、隣接するブロック要素のボーダーや背景の上に配置されることもある。これにより、浮動要素の親要素は縮小され、すべての子要素が浮動化されると完全に消滅します。フローティング要素が元の要素の配置から外れていても、キュー内の隣接するコンテンツがある方向にインデントされるようになります。左フロートは隣接するコンテンツを右へ、右フロートはコンテンツを左へインデントさせます。フロートされた要素は、元の位置で垂直に配置される。親要素のインナーマージンでは、右または左から水平に配置される。フローティング要素は、元の位置で1つずつ縦に整列される。浮動要素がその次の浮動要素と隣り合わせになれないときは、下に移動する。浮動要素の位置、サイズ、内マージン、ボーダー、外マージンは、隣接する浮動要素や隣接するインラインコンテンツの位置に影響します。 width と height は浮動要素の幅と高さを設定するために使用されます。マージンは独自の浮動機能を持ち、正のマージンは浮動要素を元の位置から遠ざけ、他の浮動要素やインラインコンテンツを遠ざけ、負のマージンはその逆をします。左のフローティング要素の左マージンと左インナーマージンはそれを右に押しやり、その右マージンと右インナーマージンは他のフローティング要素をインラインコンテンツのさらに右に押しやる。右のフローティング要素では、その逆が真となる。フロートボックスモデルのパターンは以下の通りです。

このデザインパターンは、so要素に適用することができる。

II: ポジショニングモデルの学習

CSSでは、要素を配置するために、static、absolute、fixed、relative、float、relative floatの6つの位置決めモデルが用意されています。静的位置決めモデルは、インライン、インラインブロック、ブロック、テーブルのボックスモデルを配置することができます。絶対配置モデルと固定配置モデルは、絶対的なボックスモデルを配置することができます。フローティング配置モデルは、フローティングボックスモデルを配置することができる。相対位置指定モデルは、絶対ボックスモデル以外のボックスモデルを、絶対ボックスモデルに対して相対的に位置指定することができる。相対フローティング配置モデルは、フローティングボックスモデルを互いに相対的に配置することができる。各位置決めモデルは、同じ一連の基本プロパティを使用して、位置決めを制御する。

2.1 静止画の位置決め

インライン要素やブロック要素の順序で次々に要素を並べるには、要素に適用されるposition:staticを使用します。ブロック要素内では、1つまたは複数のブロック要素またはインライン要素が垂直下方に解決されます。インライン要素内では、テキストとオブジェクトは水平方向に一行ずつ解析されます。静的要素の開始位置は、その前にある静的要素によって決定される。そのパターンは以下の通りです。

インラインの静的要素。

静的要素をブロック化する。

2.2 絶対位置決め

Absolute要素は、位置が最も近い祖先要素との相対的な位置関係を正確に制御することができます。絶対要素は、流動的でない浮動要素とは異なり、あたかも別のボックスモデルであるかのように、通常の要素順序よりも上の位置決めレベルで解決されます。どの要素も、position:absolute を使って絶対ボックスモデルとして解決することができます。width と height を使ってそのサイズを設定します。パーセンテージは、親要素ではなく、その位置決めに対して最も近いボックスモデルです。値は left, right, bottom, top に割り当てられ、最も近い位置にある祖先要素の側に配置することができる。Marginは、最も近い位置にある祖先要素の辺に対して、要素の辺を相対的にオフセットするために使用することができます。z-indexを使用して要素の積み重ね順序を制御し、大きなz-indexを持つ要素がユーザーにより近い位置に配置されるようにします。パターンは以下の通りです。

2.3 固定位置

要素をその位置決めレイヤから取り出して、ビューポートのどこかに固定したい、または要素の元の配置にあった場所に留まらせたい場合。ウィンドウがスクロールしても、必ずしも追従する必要はありません。これを固定位置要素または固定要素と呼びます。position:fixedを使用すると、任意の要素を固定位置の要素に変換することができます。固定要素は、ビューポートに対して相対的に配置され、他の配置された直近の祖先要素には配置されません。そのため、ある要素を整列順序の元の位置に固定すると、ビューポートがスクロールされたときにもその位置に留まることになります。そのパターンは以下の通りです。

2.4 相対的な位置決め

通常配置される位置の要素の積み重ね順序を制御するために、position:relativeを使用してその要素から相対的に配置することができます。要素の相対的な配置は、通常の要素の配置から離れたり、通常の配置にあるときの形状を変更したりしません。例えば、インライン要素が複数の行（1行以上）にまたがっている場合、相対的な位置に配置されてもこの独自のレイアウトは維持されます。相対的に配置された要素は、オプションでleftとtopを使用して元の配置からオフセットすることができます。任意の要素にposition:relativeを指定し、絶対的な子孫要素をその要素に対して相対的に配置できるようにします。パターンは以下の通りです。

III：ボックスモデル探索学習

CSS 2.1では、ブロック-レベル要素は長方形のみであった。ブロック-レベル要素の全体のサイズを計算する必要があるとき、コンテンツ領域の長さと幅、および要素の外側と内側のマージンとボーダーを考慮する必要があります。ボックスモデルは、W3C標準のボックスモデルとIEのボックスモデルに分けられます。W3C標準のボックスモデルは以下の通りです。

図1

このボックスモデルのスコープには、margin、border、padding、contentが含まれ、content部分には他のパーツは含まれない。つまり、ブロックレベル要素の width と height のプロパティを css で .box{width : 100px; height:100px} のように設計しても、幅と高さは content の部分だけに設定され、上の図の padding-top と padding-bottom の間の領域の長さ (padding-left と padding-bottom) は定義されます。 bottom (と padding-left と padding-right の間の領域の幅) は定義されます。その代わり、content、inner margin、borderの合計となる。そして、IEのボックスモデルは次のようになります。

図2

このボックス モデルのスコープには、標準の W3C ボックス モデルとは異なり、margin、border、padding、および content が含まれます。IE ボックス モデルの content 部分には border と padding が含まれるので、css でブロック レベル要素の width と height プロパティを .box {width: 100px; height:100px} のように設計すると、幅と高さは content と inner margin と border を合計した値になります。

静的に配置された（つまり、配置されていない）要素と相対的に配置された要素のうち、幅が自動的に決まるものについては、要素の水平方向における外側、内側、境界、スクロールバーのすべての幅から、それらを含むブロックの幅を差し引くことで幅が計算されます。すなわち，要素の水平方向の外側のマージン，内側のマージン，ボーダー及びスクロールバー（存在する場合）の幅が，包含ブロックの幅から除去され，残りの値が結果となる。例として

ここで、.test1にはposition属性が設定されておらず、デフォルトのposition:staticとなっています。ここで、htmlコードは、 <div class="test1"> static positioning or relative positioning </div> となっています。その結果は次のようになります。

図3

つまり、ブロックの幅を拡張して、親要素の幅領域を自動的に埋めているのである。

しかし、フローティング要素や絶対位置指定要素は、その逆の結果になり、コンテンツをしっかりと包み込むように縮んでしまうのです。例の.test1が次のように書き直されたとします。

htmlは変更しないまま、その結果は

図4

図1、2では、要素の必要面積の算出例で、余白が計算に含まれていることがよくわかる。しかし実際には、縦に配置されていない要素の隣接する余白を重ね合わせて、2つの余白の合計ではなく、幅の大きい方の余白の値に合成しているのです。つまり、実際に要素を収める領域の大きさを計算する際には、余白の端から数えるのではなく、最も幅の広い余白だけが有効となり、幅の狭い余白は大きい方の余白に重畳されることになります。下図のように。

図5

また、要素の幅が100%に設定されている場合（つまり、親要素のコンテンツの幅が100%の場合）、外側の余白や内側の余白、ボーダーがあってはならず、配置される領域がより多くの領域を必要とするだけである。これはデザイナーが見落としがちなことですが、ページのレイアウトを著しく乱し、コンテンツがはみ出したり、要素の幅が必要以上に広くなったりすることがあります。例を挙げます。

そして、htmlコードは、 <div class="contain"><div class="box"></div></div> となります。結果はこのようになります。

つまり、marginやpaddingがない状態で、100%のコンテンツが親要素をちょうどいい具合に埋めているのです。ここで、.box が次のようなスタイルになっているとします。

残りは変更せずに、結果は次のようになります。

この時点では、要素の位置がずれて、左マージンだけが表示されています。解決策としては、ほとんどの場合、width属性に特定の値を追加することを避け、外側のマージン、内側のマージン、ボーダーのみを適用するようにすることです。

IV：まとめ

今週は、htmlのboxモデルとpositionモデルについて学び、属性とその関係性について理解を深めたので、今後の応用に役立てることができる。また、ブラウザがどのようにcssを解析しているのかについても学びました。