本「プロのためのCSS」

カスケードスタイルシートの世界は常に改善されています。 多くのWeb開発者は、CSSを知っているとは思いますが、完全に理解するにはほど遠いことに気付いています。 近年、言語は大きく進化したため、かつて今日CSSに精通していた開発者でさえ、まったく新しいスキルを身に付けることができます。 この本は、これらのニーズを満たすように設計されています。深い言語スキルを提供し、最新のCSS機能の新しい開発とアプリケーションの成功に導きます。



この本は、ProのCSSと呼ばれていますが、包括的な本でもあります。 いくつかの概念や原則が難しい場合、または原則として誤って解釈される場合、著者はそれらが何を意味するのか、どのように機能するのか、そしてその理由を詳細に説明します。 他の章はそれほど包括的ではないかもしれませんが、Keith Grantは十分な情報を提供しているので、知識を広げたい場合は効果的に作業し、正しい方向に進むことができます。 一般的に、この本はあなたの理論的知識のギャップを埋めます。



いくつかのトピック：アニメーション、タイポグラフィ、フレキシブルコンテナ、さらにはCSSスタックも、別の本に値します。 著者の目標は、知識を具体化し、そのギャップを埋め、CSSを愛するようにすることです。

抜粋 4.1。 フローティング要素の目的

フローティング要素はページレイアウトを設計するように設計されていないという事実にもかかわらず、彼らはこれをうまくやっていました。 ただし、フローティング要素の意味を理解するには、元の目的を理解する必要があります。



フローティング要素は、コンテナの側面の1つに配置されたオブジェクト（多くの場合、画像）であり、ドキュメントの流れがその周りを流れるようにします（図4.1）。 この配置は、新聞や雑誌でよく見られるので、記載されている効果を達成するために、フローティング要素がCSSに追加されました。



この図では、要素は左揃えですが、右端にも配置できます。 フローティング要素は通常のドキュメントフローから削除され、コンテナの片側に配置されます。その後、ドキュメントフローはこの要素が配置されている領域の周りを流れます。 片側に2つのフローティング要素を配置すると、それらは次々に整列します（図4.2）。



しばらくCSSコードを書いている場合、この動作は新しいものではありませんが、浮動要素は本来の目的であるにもかかわらず、この方法で常に適用されるわけではないことに注意してください。



CSSの初期の頃、開発者は、この単純なツールを使用して、すべてのタイプのレイアウトを組版するときにページのセクションを移動できることに気付きました。 フローティング要素はページレイアウトツールではありませんでしたが、ほぼ20年間、これらの目的に正確に使用してきました。



それが唯一の選択肢だったので、私たちはそれをしました。 最終的に、display：inline-blockまたはdisplay：tableプロパティを使用することが可能になりました-非常に制限されていますが。 最近まで、フレックスコンテナとCSSグリッドが追加されるまで、ページレイアウトのレイアウトではフローティング要素が切り札でした。 それらがどのように機能するかを見てみましょう。 たとえば、図に示すページを作成します。 4.3。





この章の例では、フローティング要素を使用して、4つの灰色の各フィールドを配置します。 また、フィールド内で、テキストの横にフローティング画像を配置します。 空白のページを作成し、前に作成したスタイルシートに接続してから、リスト4.1のコードをページに追加します。















このリストは、ページの構造を示しています。ヘッダーと、すべてのページ素材を含むメイン要素です。 メイン要素の内部には、ページ名と、匿名のdivコンテナ、つまり、クラスまたは識別子を持たないdiv要素があります。 これにより、4つの灰色のメディアオブジェクトをグループ化でき、それぞれのbody要素に画像があります。



フローティング要素の操作を開始する前に、ページの外部構造を構築する必要があります。 リスト4.2をスタイルシートファイルに追加します。















このコードを使用すると、ボックスサイズプロパティの修正やロボット化されたフクロウセレクターなど、ページの基本的なスタイルを設定できます（第3章を参照）。 次に、ページコンテンツの幅を制限する必要があります（図4.4）。 両側の明るい灰色のフィールド、およびキャップとメインコンテナが同じ幅であることに注意してください。









このマークアップは、ページコンテンツの中央揃えによく使用されます。 これを実現するには、2つのネストされたコンテナ内にコンテンツを配置し、外側のコンテナを超えないように内側のコンテナのフィールドを調整します（図4.5）。 Web開発者のBrad Westfallは、このアプローチをダブルコンテナパターンと呼んでいます。









この例では、body要素は外部コンテナーとして機能します。 デフォルトでは、この要素はページ幅の100％を占めるため、新しいスタイルを適用する必要はありません。 この要素内のすべてのページコンテンツを、内部コンテナーとして機能する要素にまとめました。 リスト4.3のコードをスタイルシートに追加します。









widthプロパティの代わりにmax-widthプロパティを使用することにより、ビューポートの解像度がこの値を下回る場合、要素は1080ピクセル未満の値に圧縮されます。 言い換えると、コンテナは小さな表示領域を埋めますが、大きな表示領域では1080ピクセルに拡大します。 これは、表示領域が小さいデバイスでの水平スクロールを回避するために重要です。

4.2。 折りたたみコンテナーとclearfix

過去には、ブラウザエラーによりフローティング要素の動作が歪められましたが、これは主にInternet Explorer 6および7で一般的でした。これらのブラウザをサポートする必要はほとんどないので、これらのエラーについて心配する必要はありません。 これで、ブラウザがフローティング要素を正しく処理することを確認できます。



ただし、フローティング要素の動作の一部の機能は、今日驚くことでしょう。 これらはエラーではなく、浮動要素は本来の動作をします。 それらがどのように機能し、どのように動作をカスタマイズして目的のマークアップを作成できるかを検討してください。

4.2.1。 コンテナ崩壊とは

ページ上の4つのフローティングメディアオブジェクトを左に揃えます-問題はそれほど長くかかりません（図4.6）。









白い背景はどうなりましたか？ ページの名前の後ろに表示されますが（「役に立つヒント」）、これはすべてのメディアオブジェクトを含めるように展開するのではなく、これに限定されています。 ページでこれを確認するには、リスト4.4のコードをスタイルシートに追加します。 次に、これが起こっている理由とその修正方法を検討します。









各メディアオブジェクトに明るい灰色の背景を設定し、コンテナーの白い背景がそれらの背後（またはむしろ）にあることを想定しています。 ただし、代わりに、メディアオブジェクトの上端で白い背景が消えます。 なぜそう



問題は、通常のドキュメントフローの要素とは異なり、フローティング要素は親要素に高さを追加しないことです。 これは奇妙に思えるかもしれませんが、このプロパティはフローティング要素の元の目的に戻ります。



この章の最初で学んだように、フローティング要素はテキストが周囲を流れるように設計されています。 テキストの段落にフローティング画像を配置すると、その段落は画像に合わせて拡大されません。 そのため、画像の高さが段落の高さよりも大きい場合、次の段落のテキストは最初の段落のテキストのすぐ下から始まるため、両方の段落のテキストはこのフローティング画像の周りを流れます。 説明は図に示されています。 4.7。









ページでは、ページ名を除いて、メイン要素内のすべてがフローティング要素です。 したがって、名前だけがコンテナの高さに影響し、すべてのフローティングメディアオブジェクトは、メインコンテナの白い背景を超えて下流に拡張されます。 私たちにとって、この動作は望ましくないため、修正してください。 メイン要素は下向きに展開し、灰色のブロックを含む必要があります（図4.8）。









調整する1つの方法は、隣接する明確なプロパティを使用することです。

フローティング要素。 メインコンテナの最後にアイテムを配置した場合

clearプロパティを使用すると、コンテナが展開されます

フローティング要素の下端。 リスト4.5のコードは基本的に

なすべきこと。 しばらくの間、ページに追加できます

仕組みをご覧ください。









clear：両方の宣言により、この要素はフローティング要素の隣に配置されるのではなく、フローティング要素の下に移動します。 このプロパティを左または右のいずれかの値に割り当てて、左端または右端にそれぞれ配置されているフローティング要素のみの周りのフローをリセットできます。



これにより、目的のサイズを設定できますが、このアプローチは、HTMLコードに不要なマークアップを追加するため、ハッキングに少し似ています。これが、CSS関数を使用する理由です。 したがって、空のコンテナdivを削除する必要があります。 CSSコードのみを使用して同じタスクを実行する方法を検討してください。

4.2.2。 clearfixとは

別のdivコンテナをマークアップに追加する代わりに、疑似要素を使用します。 ::疑似要素セレクターを使用すると、コンテナをマークアップに追加せずに、コンテナの最後でDOMに要素を効果的に挿入できます。



リスト4.6は、clearfixと呼ばれるフロート問題を解決する一般的なアプローチを示しています。 （一部の開発者は、クラス名をcfに短縮することを好みます。これは、float（フローティング要素の配置）を含むフレーズの省略形でもあるため便利です。）次のコードをスタイルシートに追加します。









clearfixクラスは、フローティング要素を含む要素に適用されることを知っておくことが重要です。 よくある間違いは、このクラスを不適切な要素に適用することです。たとえば、フローティング要素や、フローティング要素を持つコンテナの後にあるコンテナに直接適用することです。



ただし、clearfixメソッドには1つの問題があります。clearfixが適用されていると、囲まれたフローティング要素のフィールドはコンテナーの外側で崩壊せず、非フローティング要素のフィールドは通常どおり崩壊します。 これはページに表示され、「役に立つヒント」の見出しが白いメイン要素の上端にしっかりと押し付けられています（図4.8を参照）。そのフィールドはコンテナーの外側に折りたたまれています。



開発者は、すべてのフィールドに対応し、より予測可能なclearfixメソッドの修正バージョンを使用することを好む場合があります。 このバージョンをページに追加すると、メイン要素の外側にあるページ名のトップフィールドが折りたたまれないようにします（図4.9）。これにより、タイトルの上に目的の距離が残ります。









変更したバージョンを使用するには、リスト4.7に示すように、スタイルシートのclearfixメソッドコードを更新します。









このバージョンでは、display：ブロックではなく、display：tableプロパティを使用します。 :: beforeと:: afterの両方の擬似要素に適用すると、コンテナの上下にある子要素のフィールドにフィットします。 以下のサイドバーの「clearfixメソッドと表示：テーブルプロパティ」では、この仕組みについて詳しく説明しています。



プロジェクトで使用するclearfixメソッドのバージョンを決定します。 一部の開発者はこの議論をしています。フィールドの折りたたみはCSSの基本的な機能であるため、フィールドをコンテナーに収めないことを好みます。 ただし、フローティング要素フィールドに適合するバージョンはないため、他の開発者は変更されたバージョンに対してより合理化された動作を好みます。 各引数には独自の理由があります。

Clearfixメソッドと表示：テーブルプロパティ

clearfixメソッドでdisplay：tableプロパティを使用すると、CSS機能のおかげでフィールドに適合します。 テーブル要素（この場合は擬似要素）を作成すると、この要素内にテーブル行と、行内のテーブルセルが暗黙的に作成されます。 フィールドはテーブル要素を介して折りたたまれないため（第3章で説明）、テーブル疑似要素を介してフィールドは折り畳まれません。



display：table-cellプロパティを使用すると同じ効果が得られるように見えるかもしれません。 ただし、clearプロパティはブロック要素に対してのみ機能し、テーブルセルには機能しません。 したがって、clearプロパティをdisplay：table-cellプロパティに適用することはできません。 一般に、フィールドに合わせるには、すべてのフローティング要素と暗黙的なセルの周りのフローをリセットし、display：tableプロパティを使用します。

4.3。 フローティング要素の予期しない「キャプチャ」

白いコンテナにフローティングメディアオブジェクトが含まれているので、別の問題が明らかになります。必要に応じて、4つのメディアオブジェクトが2つの同一行を形成しません。 代わりに、最初の2つのブロック（「Physical Culture」と「Temp」）は予想どおり同じ行にありますが、3番目のブロック（「Change」）は右側の2番目のブロックの下にあります。 この配置では、最初のブロックの下に大きなギャップが残ります。これは、ブラウザーがフローティング要素を可能な限り高く配置するためです。



図 4.10は簡略図です。









ブロック2はブロック1よりも低いため、ブロック3の場合、ブロック1の下には場所がありません。ブロック1をバイパスする代わりに、ブロック3はそれを「キャプチャ」します。 言い換えると、ブロック3は左に揃えられず、ブロック1の下隅を流れます。



この動作のニュアンスは、各フローティングブロックの高さに依存します。 1ピクセルの違いでさえ、この問題を引き起こす可能性があります。 同時に、ブロック1がブロック2より短い場合、ブロック3にはキャッチできるエッジがなく、コンテンツが変更されるまで記載された問題は発生せず、要素の高さの変更につながります。



1つのエッジに複数のフローティング要素を配置すると、各ブロックの高さに応じて、多くのレイアウトオプションのいずれかを取得できます。 ブラウザウィンドウの幅を変更しても、テキスト行の周りのフローに影響を与え、それに応じて要素の高さを変更するため、すべてを再構築できます。 このページでは、1行に2つのフローティングブロックが表示されます（図4.11）。









この問題を修正するのは簡単です。3番目のフローティング要素は、その上にあるフローティング要素の周りのフローをリセットする必要があります。 または、言い換えると、各行の最初の要素は、その上にある浮動要素の周りのフローをリセットする必要があります。 行ごとに2つのブロックがあるため、奇数行の要素ごとに親行の周りのフローをリセットする必要があります。 擬似クラスセレクターnth-child（）を使用して、このような要素をアドレス指定して選択できます。 次のルールセットをスタイルシートに追加します（リスト4.8）。









このコードは、後で新しい要素をページに追加しても機能します。 コードは、1番目、3番目、5番目の要素などに適用されます。1行に3つの要素を配置する場合は、3番目ごとの要素をセレクターのターゲットにできます。.media：nth-​​child（3n + 1）（付録を参照）セレクターの使用に関する詳細については、nth-child）。



メディアオブジェクトのフィールドを追加して、それらの間にギャップが形成されるようにします。 ロボット化されたフクロウセレクターは、最初のマージンを除くすべての要素に上部マージンも設定します。 これにより、最初の行の要素の配置が失敗するため、これらの要素のトップフィールドをリセットする必要があります。 リスト4.9に示すように、スタイルシートを更新します。











»本の詳細については、出版社のウェブサイトをご覧ください

» コンテンツ

» 抜粋



Savory Agentsの25％割引クーポン-CSS



本の紙版が支払われると、電子版の本が電子メールで送信されます。