Webフロントエンド開発の領域は、過去数年間でかなりの進歩を遂げました。ただし、ユーザーが見るように、Webフロントエンドは同じです。CSSでスタイル設定されたHTMLマークアップです。
多くのレイアウトの問題は、最初は単純に見えるかもしれませんが、多くの場合、注意が必要です。特定のCSS機能がどのように機能するかについての広範な知識がなければ、これらの高度なレイアウトはCSSだけでは実現できないように思われる可能性があります。
この記事では、あまり知られていないCSS機能を活用してこれらの高度なレイアウトと効果のいくつかを実装する8つのエキスパートCSSのヒントとコツを紹介します。
問題： 兄弟セレクターを使用しないことにより、最適化の機会を失っています。
ソリューション： 意味があるときはいつでも兄弟セレクターを使用してください。アイテムのリストを操作していて、最初または最後のアイテムを異なる方法で処理する必要がある場合は常に、最初の本能は:first-childを使用することかもしれません。および:last-child疑似CSSセレクター。
たとえば、CSSのみのハンバーガーメニューアイコンを作成する場合：
ペンを見る CSS兄弟セレクターの最大化1 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
これは理にかなっています。最後のバーを除いて、各バーにはマージンボトムがあります。
ただし、隣接する兄弟セレクター（+）でも同じ効果が得られます。
ペンを見る CSS兄弟セレクターの最大化2 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
これも理にかなっています。最初のバーの後のすべてにマージントップがあります。このCSSトリックは、数バイト余分に節約するだけでなく（中規模のプロジェクトでは簡単に合計できます）、可能性の世界を開きます。
このカードのリストを検討してください。
ペンを見る CSS兄弟セレクターの最大化3 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
それぞれにタイトルとテキストがあり、後者はデフォルトで非表示になっています。アクティブなカードのテキスト（.activeクラスを含む）とそれに続くテキストのみを表示したい場合は、CSSだけを使用してすばやく実行できます。
ペンを見る CSS兄弟セレクターの最大化4 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
少しのJavaScriptで、これもインタラクティブにすることができます。
ただし、JavaScriptだけに依存すると、次のようなスクリプトになります。
ペンを見る CSS兄弟セレクターの最大化5 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
依存関係としてjQueryを含めると、コードがいくらか短くなります。
問題： HTML要素のサイズは、ブラウザごとに一貫していません。
ソリューション： セットbox-sizing border-boxまでのすべての要素。 Internet Explorerは、Web開発者にとって長年の悩みの種でしたが、ボックスのサイズを適切に設定するという1つのことを正しく行いました。
他のブラウザは、HTML要素の幅を計算するときにコンテンツのみを確認し、他のすべては余剰として扱われます。 A width: 200px div、20pxパディングと2px境界線、幅242ピクセルとしてレンダリングされます。
Internet Explorerは、パディングと境界線を幅の一部と見なします。ここで、上からのdivは200ピクセル幅になります。
ペンを見る CSSボックスモデルのデモ1 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
一度コツをつかむと、後者のアプローチが見つかります より論理的にする 、従わなくても 標準 。
幅が200pxだと言ったら、まあ、20pxのパディングがあっても、幅は200pxのボックスになります。
いずれの場合も、次のCSSは、すべてのブラウザーで要素サイズ（したがってレイアウト）の一貫性を維持します。
ペンを見る CSSボックスモデルデモ2 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
CSSセレクターの2番目のセットは、ボーダーボックスを考慮せずにスタイル設定されたHTML要素をレイアウトの中断から保護します。
box-sizing: border-box非常に便利なので、比較的人気のあるCSSフレームワークの一部です。 sanitize.css 。
問題： HTML要素の高さをその幅に比例させます。
ソリューション： 高さの代わりに垂直パッドを使用します。
HTML要素の高さを常にCSSの幅と一致させたいとしましょう。 height: 100%コンテンツの高さに一致する要素のデフォルトの動作は変更されません。
ペンを見る 動的高さ要素1 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
答えは、高さを0に設定し、代わりにpadding-topまたはpadding-bottomを使用して.containerの実際の高さを設定することです。どちらのプロパティも、要素の幅のパーセンテージにすることができます。
ペンを見る 動的高さ要素2 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
今.containerどんなに広くなっても正方形のままです。 overflow: hidden長いコンテンツがこの比率を壊さないようにします。
この手法は、いくつかの変更を加えて、任意のサイズでアスペクト比を保持するビデオ埋め込みを作成するのに最適です。埋め込みを.containerの上部と左からposition: absoluteまで揃え、埋め込みの両方の寸法を100％に設定して、.containerを「埋める」ようにし、| _ + _を変更します。 |の.container動画のアスペクト比に合わせます。
ペンを見る 動的高さ要素3 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
padding-bottom position: relativeの場合.containerを保証します 絶対測位は正しく機能します 。新しいiframeは、アスペクト比の高さを幅で割った値に100を掛けたものです。たとえば、ビデオ埋め込みのアスペクト比が16：9の場合、パディングボトムのパーセンテージは9を16で割って（.5625）、100を掛けます（ 56.25）。
問題： HTML要素の幅をその高さに比例させます。
ソリューション： 要素のサイズの基準としてfont-sizeを使用します。
さて、逆、または高さのように幅が変わるコンテナはどうですか？今回はpadding-bottom救助へ。幅と高さはfont-size sにすることができます。つまり、要素のemの比率にすることができます。
font-sizeを持つ要素40px、幅font-size、高さ2em幅80ピクセル（40 x 2）、高さ40ピクセル（40 x 1）になります。
ペンを見る 動的幅要素 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
1emの高さを変更したいですか？フォントの大きさを変える。
唯一の注意点は、CSSだけでは、要素のフォントサイズを親の高さと自動的に一致させることはできないということです。ただし、この手法を使用すると、Javascriptのサイズ変更スクリプトを次の場所から削減できます。
.containerに：
var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px'; 問題： HTML要素（高さが不明）を垂直方向の中央に配置します。
ソリューション： 外側の要素をdocument.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px'; に設定してから、内側の要素をCSS display: tableに変換します。または単に使用する CSSFlexbox 。
table-cellを使用して、1行のテキストを垂直方向に中央揃えにすることができます。
ペンを見る 動的コンテンツの垂直方向のセンタリング1 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
複数行のテキストまたは非テキストコンテンツの場合、CSSテーブルがその答えです。 line-heightの表示を.containerに設定してから、tableを使用しますおよびdisplay: table-cell vertical-align: middleの場合：
ペンを見る 動的コンテンツの垂直方向のセンタリング2 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
このCSSトリックは、垂直方向の.textに相当すると考えてください。 CSS3のFlexboxは、この手法の優れた代替手段です。 InternetExplorerのバグのあるサポート 許容できる：
ペンを見る 動的コンテンツの垂直方向のセンタリング3 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
問題： 列を同じ高さに保つ。
ソリューション： 各列には、大きな負の値を使用しますmargin: 0 auto値を設定し、同じ大きさのmargin-bottomでキャンセルします。 CSSテーブルとFlexboxも機能します。
padding-bottomを使用するまたはfloatの場合、CSSを使用して列を並べて作成できます。
ペンを見る 同じ高さの列1 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
display: inline-blockの使用に注意してくださいbox-sizing: border-boxのサイズを適切に設定します。上記の一貫性のあるHTML要素のサイズ設定を参照してください。
最初と最後の列の境界線は完全には下がっていません。背の高い2列目の高さと一致しません。これを修正するには、.colsを追加するだけです。 overflow: hiddenへ。次に、各.rowの.colを設定します99999pxとそのmargin-bottomに〜100009px（99999px + padding-bottomの反対側に適用される10pxのパディング）。
ペンを見る 同じ高さの列2 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
より簡単な代替手段はFlexboxです。繰り返しますが、これはInternetExplorerのサポートが必須ではない場合にのみ使用してください。
ペンを見る 同じ高さの列3 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
より良いブラウザサポートを備えたもう1つの選択肢：CSSテーブル（.colなし）。
ペンを見る 同じ高さの列4 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
問題： ボックスと直線はとても決まり文句です。
ソリューション： vertical-align: middleまたはtransform: rotate(x)を使用します。
マーケティングまたはパンフレットのWebサイトから、典型的な一連のペインを取得します。単一のポイントを持つスライドの垂直スタックです。そのマークアップとCSSは次のようになります。
ペンを見る ボックスを超えて1 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
マークアップをはるかに複雑にするという犠牲を払って、これらの箱型のペインを平行四辺形のスタックに変えることができます。
ペンを見る ボックスを超えて2 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
ccorpとscorpとllcの違い
ここでは多くのことが起こっています：
各ペインの高さは、.pane-containerによって制御されます。負のmargin-bottomは、ペインがぴったりと積み重なるようにします。
border-radius、その子.pane-background、およびその孫.mask-boxすべて.imageに設定されます。各要素には、異なるposition: absolute、top、left、およびbottomがあります。値。これにより、以下に詳述する回転によって生じる間隔がなくなります。right 2度（反時計回り）回転します。.mask-box .imageの回転を打ち消すために-2度回転します。.mask-boxのオーバーフローは非表示になっているため、回転した上面と下面が.mask-boxをクリップします。素子。関連する注記として、画像を円または楕円に変えるのは非常に簡単です。適用するだけです.image border-radius: 100%へ素子。
ペンを見る ボックスを超えて3 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
このようなリアルタイムのCSS変更により、コンテンツをWebサイトに公開する前に準備する必要が少なくなります。 Photoshopで写真にサークルマスクを適用する代わりに、Web開発者は元の写真を変更せずにCSSを介して同じ効果を適用できます。
追加の利点は、コンテンツをそのままにして、Webサイトの現在のデザインに依存しないようにすることで、将来の再デザインや刷新が容易になることです。
問題： 新しいスタイルシートを作成せずにナイトモードを実装する。
ソリューション： CSSフィルターを使用します。
一部のアプリはナイトモードを備えており、暗い場所での読みやすさを向上させるためにインターフェースが暗くなります。新しいブラウザでは、CSSフィルタは、Photoshopのような効果を適用することにより、同じ効果を作成できます。
便利なCSSフィルターはimgです。これは、（当然のことながら）要素内のすべての色を反転します。これにより、新しいスタイルのセットを作成して適用する必要がなくなります。
ペンを見る ナイトモード1 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
黒のテキストと白の背景にこのフィルターを使用すると、ナイトモードがシミュレートされます。 invertこれらの新しい色が既存のスタイルを上書きすることを保証します。
ペンを見る ナイトモード2 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
残念ながら、画像は他のすべてのものと色が反転しているため、奇妙に見えます。良いニュースは、複数のフィルターを同時に適用できることです。色相回転フィルターを追加すると、画像やその他のビジュアルコンテンツが通常の状態に戻ります。
ペンを見る ナイトモード3 Rico Mossesgeld（ @ricotheque ） オン CodePen 。
なぜこれが機能するのですか？ !important hue-rotate(180deg)と同じ効果を作成するだけですした。 これがデモです JavaScriptを利用したボタンで切り替えたときにナイトモードCSSがどのように機能するかについて説明します。
ブラウザーやWebサイトの構築方法が将来劇的に変化しない限り、CSSに関する十分な知識はWeb開発スペースの基本的なスキルであり続けます。
これらのCSSのヒントはすべて、共通点があります。 CSS スタイリング言語として、ブラウザ自体に手間のかかる作業を任せます。そして、正しく実行されると、これは常により良い結果、より良いパフォーマンス、したがってより良いユーザーエクスペリエンスをもたらします。
以下のコメントセクションで、興味深く有用だと思うCSSトリックがあればお知らせください。
高さの代わりに垂直パディングを使用します。高さプロパティは、パーセンテージで設定すると、親の高さを基準にして計算されます。ただし、高さが0に設定されているDIVでは、padding-topまたはpadding-bottomのいずれかを幅のパーセンテージに設定できます。
テキストが1行しかない場合は、「line-height」をコンテナの高さに設定します。テキスト以外のコンテンツの場合は、DIVを「display：table」DIVでラップし、内部DIVを「display：table-cell」に設定します。プリミティブWebブラウザーのサポートがToDoリストにない場合は、いつでもFlexboxを使用できます。
