3つのカラフルな列で構成されるページを設計します。 左の列は幅100ピクセルで、中央と右の列はページの端に均等に残っているすべてのスペースを占有します。 3つすべての高さは、ページの100％です。 ページの周りにスクロールバーと白いバーがないはずです。
フロントエンド開発での数年の作業の後、このようなタスクは「5分、100回行った」と分類されます。3列のページのほうが簡単だからです。 しかし、学生は問題を解決するすべての段階で問題を抱えていました。本質を理解し、構造を開発することから、実験室の仕事を守ることまで。
そして、タスクとオラトリオの用語を読むことを学ぶことが、Webテクノロジーの基礎の主題を超えている場合、そのようなシンプルなレイアウトで私を驚かせたさまざまなアイデアを反映させることは、私を興味深いものにしました。
学生は、この問題を解決するための合計約10の異なるオプションを示しました。 完全に役に立たないものから完全に受け入れられるものまで。 もちろん、私は正気の半分だけを考慮します。つまり、私が再現した5つの例と、コメントでコミュニティが提案したいくつかがあります。
私はオプション
最初のオプションはかなり学生です。 通常、すべてはこのように見えました。 そして、明白な理由のため：HTML + CSSテクノロジーと背景として最も単純なCSSセレクターの組み合わせの一般原則のみを理解している学生は、おそらく他に何も書くことができませんでした。
<body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body>
html, body { width: 100%; height: 100%; margin: 0; display: flex; } .one { width: 100px; height: 100%; background: red; } .two { width: calc(50% - 50px); height: 100%; background: green; } .three { width: calc(50% - 50px); height: 100%; background: blue; }
コデペン
また、一部の若いプログラマーはコード設計のルールを聞いたことがないため、その「美しさ」と読みやすさにはリファクタリングが必要であることを理解する必要があります。
そのため、ここにはいくつかのアンチパターンがあります：意味のないクラス名、繰り返されるコードの繰り返し、コンテナーの欠如、そしてその結果としての
body
様式化。 この段階で、学生はBEMの命名規則とDRY、DIE、KISS、SOLID、YAGNIの原則の研究に没頭しました。
初めてネットワーク上に単一の答えがなかったので、私が
body
ぶら下がるスタイルを禁止する理由を別にお伝えしたいと思います。 この決定は個人的な練習から来ました。最初に、プロジェクトの1つで、以下が設定されました：
body { max-width: 1024px; }
その結果、デザインが全幅に引き伸ばされたブロックである新しいページを作成するとき、問題がありました。 CSSの規則に従って、子要素は物理的に親より大きくすることはできません。 この問題の修正にはかなりの時間を費やし、その結果、「ページの本文に重要なスタイルをかけないでください」というルールが策定されました。
次に、簡潔にするために、一般的な繰り返しスタイルを作成します。 列を塗りつぶす色はここで定義されます。 これらのスタイルは、以降のすべての例で使用されます。
.red { background: red; } .green { background: green; } .blue { background: blue; }
IIオプション
もう1つの最も明白なオプションは、テーブル内のレイアウトです。 キーワード「列」は、問題の定式化に役割を果たしました。
<table class="blocks"> <td class="blocks--block__fixed-width red"></td> <td class="blocks--block green"></td> <td class="blocks--block blue"></td> </table>
html, body { margin: 0; width: 100%; } .blocks { height: 100vh; width: 100%; border-collapse: collapse; } .blocks--block__fixed-width { width: 100px; } .blocks--block { width: calc(50% - 50px); }
コデペン
このオプションは機能しますが、存在しない表形式のデータを表すためにテーブルを使用する必要があるため、拒否されました。 学生は、タスクに対するよりシンプルでエレガントなソリューションとして、 Flexbox Layoutを学ぶように招待されました。
IIIオプション
次のオプションの機能は、2番目と3番目の列の追加ラッパーです。 このラッパーにより、Flexboxレイアウトの機能を使用せずに、中央と右の列の間でページスペースを分散する問題を簡単に解決できます。
<div class="blocks"> <div class="blocks--block__fixed-width red"></div> <div class="blocks--wrapper"> <div class="blocks--block green"></div> <div class="blocks--block blue"></div> </div> </div>
html, body { margin: 0; } .blocks, .blocks--wrapper { display: flex; height: 100vh; } .blocks--wrapper { width: calc(100% - 100px); } .blocks--block { width: 50%; } .blocks--block__fixed-width { width: 100px; }
コデペン
IVオプション
次の例では、まず、 擬似クラス
:first-child
および
:not(:first-child)
して、
class="block"
でそれぞれfirstおよびall_crome_first要素を強調表示します。 次に、 Flexbox Layoutのより多くの機能 、特に
flex-grow, flex-shrink flex-basis
のプロパティを組み合わせて、要素の相対的なサイズを決定する
flex
childrenのプロパティを使用します。
<div class="blocks"> <div class="block red"></div> <div class="block green"></div> <div class="block blue"></div> </div>
html, body { margin: 0; } .blocks { display: flex; height: 100vh; } .block:first-child { flex: 0 0 100px; } .block:not(:first-child) { flex: 1 1 50%; }
コデペン
前のオプションの大きな利点は、左の列の幅に応じて1回しか発生しないことです。 これにより、プロジェクトのサポートとさらなる開発が大幅に促進されます。
次に別に強調したいのは、さまざまなタイプの列の数が増えて、たとえば
map
関数を使用して列を作成する決定が下された場合、そのようなスタイル化方法はこれをはるかに簡単にします。 次のコード例を使用して、このケースを検討してください。
<div id="root"></div>
const colours = ['red','blue','green']; const blocks = colours.map(colour => <div className={"block " + colour}></div> ); ReactDOM.render( <div className="blocks">{blocks}</div>, document.getElementById('root') );
#root, html, body { margin: 0; } .blocks { display: flex; height: 100vh; width: 100%; } .block:first-child { flex: 0 0 100px; } .block:not(:first-child) { flex: 1 1 50%; }
コデペン
この場合コンポーネントがレンダリングされるReactライブラリの作業を詳しく調べることなく、同じタイプの要素を大量に作成することは頻繁なタスクであり、その自動化の可能性は大きなプラスになると説明します。 これは、Web開発のすべての段階（設計、レイアウト、プログラミング）で覚えておく必要があります。
Vオプション
そして問題の最後の解決策は、ページの色付けに正確に関係しているという警告だけです。
<div class="container"></div>
html, body { margin: 0; } .container { width: 100%; height: 100vh; background: linear-gradient( to right, red 100px, green 100px, green calc(50% + 50px), blue calc(50% + 50px) ); }
コデペン
ここでは
background
プロパティが使用され、左から右へのグラデーションカラーの変更が設定されます。 明確な境界線の場合、後続の各色は前の色のブレークポイントから始まります。
VIオプション
コメントで、 SmithZxはグリッドレイアウトに関する優れたソリューションを提案しました。これは、既存のレイアウトに代わる非常に便利で現代的な代替手段です。 それに基づいて、おそらく最も簡潔なソリューションでした：
<div class="blocks"> <div class="red"></div> <div class="green"></div> <div class="blue"></div> </div>
html, body { margin: 0; } .blocks { display: grid; height: 100vh; grid-template-columns: 100px 1fr 1fr; }
コデペン
VIIオプション
以下の例はコメントで Ukrop1975を提案しました。
display:table
プロパティの値を使用します。これにより、任意の要素のテーブル動作を設定できます。
<div class="blocks"> <div class="block fixed-width red"></div> <div class="block green"></div> <div class="block blue"></div> </div>
html, body { margin: 0; } .blocks { display: table; width: 100%; height: 100vh; table-layout: fixed; } .block { display: table-cell; width: 50%; } .block.fixed-width { width: 100px; }
コデペン
このアプローチにより、セマンティクスの規則に違反することなく、ブロックよりもテーブルのすべての利点を使用できます。 これらの利点の1つは、デフォルトでは、テーブル列の幅がコンテンツに依存し、高さが同じであることです。
VIIIオプション
また、非常に興味深いのは、 コメントで nebsehemviが提案した
display:block
のみを使用しないというアイデアでした。 FlexboxとGridをサポートしていないブラウザはまだ広く使用されているため、このようなニーズは、たとえば、下位互換性を提供するために発生する可能性があります。
<div> <div class="block fixed-width red"></div> <div class="block green"></div> <div class="block blue"></div> </div>
html, body { margin: 0; } .block { display: block; float: left; height: 100vh; width: calc((100% - 100px)/2); } .fixed-width { max-width: 100px; }
コデペン
IXオプション
そして、 コメントで dimpa91によって提案された非常に極端なバージョン。 ここでの考え方は、
calc
関数を破棄して、CCS2でも機能するようにすることです。
<div class="blocks"> <div class="block fixed-width red"></div> <div class="block green"></div> <div class="block blue"></div> </div>
body, html { margin: 0; } .blocks { margin-left: 100px; } .block.fixed-width { width: 100px; margin-left: -100px; } .block { width: 50%; height: 100vh; float: left; }
コデペン
専門的な意見を述べてくれたすべての人に感謝し、コードでそれを説明してくれた人に感謝します！ すべての善の光線。）