高度なレイアウトと効果のための8つのCSSのヒント

公開: 2022-03-11

Webフロントエンド開発の領域は、過去数年間でかなりの進歩を遂げました。ただし、ユーザーが見るように、Webフロントエンドは同じです。CSSでスタイル設定されたHTMLマークアップです。

多くのレイアウトの問題は、最初は単純に見えるかもしれませんが、多くの場合、注意が必要です。特定のCSS機能がどのように機能するかについての広範な知識がなければ、これらの高度なレイアウトはCSSだけでは実現できないように思われる可能性があります。

この記事では、あまり知られていないCSS機能を活用してこれらの高度なレイアウトと効果のいくつかを実装する8つのエキスパートCSSのヒントとコツを紹介します。

1.CSS兄弟セレクターの最大化

問題：兄弟セレクターを使用しないことにより、最適化の機会が失われています。

解決策：意味のある場合はいつでも兄弟セレクターを使用してください。アイテムのリストを操作していて、最初または最後のアイテムを異なる方法で処理する必要がある場合は常に、最初の本能は:first-childおよび:last-child疑似CSSセレクターを使用することかもしれません。

たとえば、CSSのみのハンバーガーメニューアイコンを作成する場合：

CodePenのRicoMossesgeld（@ricotheque）によるPen Maximizing CSS SiblingSelectors1を参照してください。

これは理にかなっています。最後のバーを除いて、各バーにはマージンボトムがあります。

ただし、隣接する兄弟セレクター（+）でも同じ効果が得られます。

CodePenのRicoMossesgeld（@ricotheque）によるPen Maximizing CSS SiblingSelectors2を参照してください。

これも理にかなっています。最初のバーの後のすべてにマージントップがあります。このCSSトリックは、数バイト余分に節約するだけでなく（中規模のプロジェクトでは簡単に追加できます）、可能性の世界を開きます。

このカードのリストを検討してください。

CodePenのRicoMossesgeld（@ricotheque）によるPen Maximizing CSS SiblingSelectors3を参照してください。

それぞれにタイトルとテキストがあり、後者はデフォルトで非表示になっています。アクティブなカードのテキスト（ .activeクラスを含む）とそれに続くテキストのみを表示したい場合は、CSSだけを使用してすばやく実行できます。

CodePenのRicoMossesgeld（@ricotheque）によるPen Maximizing CSS SiblingSelectors4を参照してください。

少しのJavaScriptで、これもインタラクティブにすることができます。

ただし、JavaScriptだけに依存すると、次のようなスクリプトになります。

CodePenのRicoMossesgeld（@ricotheque）によるPen Maximizing CSS SiblingSelectors5を参照してください。

依存関係としてjQueryを含めると、コードがいくらか短くなります。

2.一貫したHTML要素のサイズ設定

問題：HTML要素のサイズはブラウザ間で一貫していません。

解決策：すべての要素のbox-sizingをborder-boxに設定します。 Internet Explorerは、Web開発者にとって長年の悩みの種でしたが、ボックスのサイズを適切に設定するという1つのことを正しく行いました。

他のブラウザは、HTML要素の幅を計算するときにコンテンツのみを確認し、他のすべては余剰として扱われます。 width: 200px div、 20pxのパディングと2pxの境界線で、242ピクセルの幅としてレンダリングされます。

Internet Explorerは、パディングと境界線を幅の一部と見なします。ここで、上からのdivは200ピクセル幅になります。

CodePenのRicoMossesgeld（@ricotheque）によるPen CSS Box ModelDemo1を参照してください。

一度コツをつかむと、標準に準拠していなくても、後者のアプローチの方が論理的であることがわかります。

幅が200pxだと言ったら、なんてことだ。20pxのパディングがあっても、200px幅のボックスになるだろう。

いずれの場合も、次のCSSは、すべてのブラウザーで要素サイズ（したがってレイアウト）の一貫性を維持します。

CodePenのRicoMossesgeld（@ricotheque）によるPen CSS Box ModelDemo2を参照してください。

CSSセレクターの2番目のセットは、ボーダーボックスを考慮せずにスタイル設定されたHTML要素をレイアウトの中断から保護します。

box-sizing: border-boxは非常に便利なので、sanitize.cssと呼ばれる比較的人気のあるCSSフレームワークの一部です。

3.動的高さ要素

問題： HTML要素の高さをその幅に比例させておく。

解決策：高さの代わりに垂直パッドを使用します。

HTML要素の高さを常にCSSの幅と一致させたいとしましょう。 height: 100%は、コンテンツの高さに一致する要素のデフォルトの動作を変更しません。

CodePenのRicoMossesgeld（@ricotheque）によるPen Dynamic HeightElements1を参照してください。

答えは、高さを0に設定し、代わりにpadding-topまたはpadding-bottomを使用して.containerの実際の高さを設定することです。どちらのプロパティも、要素の幅のパーセンテージにすることができます。

CodePenのRicoMossesgeld（@ricotheque）によるPen Dynamic HeightElements2を参照してください。

これで、 .containerは、幅がいくら広くなっても正方形のままになります。 overflow: hiddenは、長いコンテンツがこの比率を壊さないようにします。

この手法は、いくつかの変更を加えて、任意のサイズでアスペクト比を保持するビデオ埋め込みを作成するのに最適です。埋め込みを.containerの上部と左の位置に揃えるだけposition: absolute 、埋め込みの両方の寸法を100％に設定して、 .containerを「埋める」ようにし、 .containerのpadding-bottomをビデオのアスペクトに一致するように変更します。比率。

CodePenのRicoMossesgeld（@ricotheque）によるPen Dynamic HeightElements3を参照してください。

position: relative .containerの相対位置により、 iframeの絶対位置が正しく機能するようになります。新しいpadding-bottomは、アスペクト比の高さを幅で割った値に100を掛けたものです。たとえば、ビデオ埋め込みのアスペクト比が16：9の場合、パディングボトムのパーセンテージは9を16で割った値（.5625）になります。 100を掛けます（56.25）。

4.動的幅要素

問題： HTML要素の幅をその高さに比例させておく。

解決策：要素のサイズの基準としてフォントサイズを使用します。

さて、逆、または高さのように幅が変わるコンテナはどうですか？今回は、 font-sizeが役に立ちます。幅と高さはemで表すことができます。つまり、要素のfont-sizeの比率にすることができます。

font-sizeが40px、幅が2em 、高さが1emの要素は、幅80ピクセル（40 x 2）、高さ40ピクセル（40 x 1）になります。

CodePenのRicoMossesgeld（@ricotheque）によるペンの動的幅要素を参照してください。

.containerの高さを変更したいですか？フォントの大きさを変える。

唯一の注意点は、CSSだけでは、要素のフォントサイズを親の高さと自動的に一致させることはできないということです。ただし、この手法を使用すると、Javascriptのサイズ変更スクリプトを次の場所から削減できます。

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

に：

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5.動的コンテンツの垂直方向のセンタリング

問題： HTML要素（高さが不明）を別の要素の垂直方向の中央に配置しておく。

解決策：外側の要素をdisplay: table次に、内側の要素をCSS table-cellに変換します。または、CSSFlexboxを使用します。

1行のテキストをline-heightで垂直方向に中央揃えにすることができます。

CodePenのRicoMossesgeld（@ricotheque）による動的コンテンツ1のペン垂直センタリングを参照してください。

複数行のテキストまたは非テキストコンテンツの場合、CSSテーブルがその答えです。 .containerの表示をtableに設定してから、 display: table-cellおよびvertical-align: middle for .text ：を使用します。

CodePenのRicoMossesgeld（@ricotheque）による動的コンテンツ2のペン垂直センタリングを参照してください。

このCSSトリックは、 margin: 0 auto 。 Internet Explorerのバグのあるサポートが受け入れられる場合、CSS3のFlexboxはこの手法の優れた代替手段です。

CodePenのRicoMossesgeld（@ricotheque）による動的コンテンツ3のペン垂直センタリングを参照してください。

6.同じ高さの列

問題：列を同じ高さに保つ。

解決策：列ごとに、大きな負margin-bottom値を使用し、同じ大きさのpadding-bottomでそれをキャンセルします。 CSSテーブルとFlexboxも機能します。

floatまたはdisplay: inline-blockを使用すると、CSSを介して列を並べて作成できます。

CodePenのRicoMossesgeld（@ricotheque）によるPen Same-HeightColumns1を参照してください。

.colsのサイズを適切に設定するには、 box-sizing: border-boxを使用していることに注意してください。上記の一貫性のあるHTML要素のサイズ設定を参照してください。

最初と最後の列の境界線は完全には下がっていません。背の高い2列目の高さと一致しません。これを修正するには、 overflow: hiddenを.rowに追加するだけです。次に、各.colのmargin-bottomを99999pxに設定し、そのpadding-bottomを100009px（99999px + .colの反対側に適用される10pxのパディング）に設定します。

CodePenのRicoMossesgeld（@ricotheque）によるPen Same-HeightColumns2を参照してください。

より簡単な代替手段はFlexboxです。繰り返しますが、これはInternetExplorerのサポートが必須ではない場合にのみ使用してください。

CodePenのRicoMossesgeld（@ricotheque）によるPen Same-HeightColumns3を参照してください。

より優れたブラウザサポートを備えたもう1つの代替手段：CSSテーブル（ vertical-align: middle ）。

CodePenのRicoMossesgeld（@ricotheque）によるPen Same-HeightColumns4を参照してください。

7.箱を超えて

問題：ボックスと直線が非常に陳腐化しています。

解決策： transform: rotate(x) 、またはborder-radiusを使用します。

マーケティングまたはパンフレットのWebサイトから、典型的な一連のペインを取得します。単一のポイントを持つスライドの垂直スタックです。そのマークアップとCSSは次のようになります。

CodePenのRicoMossesgeld（@ricotheque）によるPen Going Beyond theBox1を参照してください。

マークアップをはるかに複雑にするという犠牲を払って、これらの箱型のペインを平行四辺形のスタックに変えることができます。

CodePenのRicoMossesgeld（@ricotheque）によるPen Going Beyond theBox2を参照してください。

ここでは多くのことが起こっています：

各ペインの高さは、.pane-containerによって制御されます。負のマージンボトムは、ペインがぴったりと積み重なるようにします。

.pane-background 、その子.mask-box 、およびその孫.imageはすべてposition: absoluteに設定されます。各要素には、異なるtop 、 left 、 bottom 、およびright値があります。これにより、以下で詳しく説明する回転によって生じる間隔がなくなります。
.mask-boxは2度（反時計回り）回転します。
.imageは-2度回転して、 .mask-boxの回転を打ち消します。
.mask-boxのオーバーフローは非表示になり、回転した上下の側面が.image要素をクリップします。

関連するメモとして、画像を円または楕円形に変えるのは非常に簡単です。 border-radius: 100%をimg要素に適用するだけです。

CodePenのRicoMossesgeld（@ricotheque）によるPen Going Beyond theBox3を参照してください。

このようなリアルタイムのCSS変更により、Webサイトに公開する前にコンテンツを準備する必要が少なくなります。 Photoshopで写真にサークルマスクを適用する代わりに、Web開発者は、元の写真を変更せずに、CSSを介して同じ効果を適用できます。

追加の利点は、コンテンツをそのままにして、Webサイトの現在のデザインに依存しないようにすることで、将来の再デザインや刷新が容易になることです。

8.ナイトモード

問題：新しいスタイルシートを作成せずにナイトモードを実装する。

解決策： CSSフィルターを使用します。

一部のアプリはナイトモードを備えています。ナイトモードでは、暗い場所での読みやすさを向上させるためにインターフェースが暗くなります。新しいブラウザでは、CSSフィルタは、Photoshopのような効果を適用することにより、同じ効果を作成できます。

便利なCSSフィルターはinvertです。これは、要素内のすべての色を（当然のことながら）反転します。これにより、新しいスタイルのセットを作成して適用する必要がなくなります。

CodePenのRicoMossesgeld（@ricotheque）によるペンナイトモード1を参照してください。

黒のテキストと白の背景にこのフィルターを使用すると、ナイトモードがシミュレートされます。 !importantは、これらの新しい色が既存のスタイルを上書きすることを保証します。

CodePenのRicoMossesgeld（@ricotheque）によるペンナイトモード2を参照してください。

残念ながら、画像は他のすべてのものと色が反転しているため、奇妙に見えます。良いニュースは、複数のフィルターを同時に適用できることです。色相回転フィルターを追加すると、画像やその他の視覚的コンテンツが通常の状態に戻ります。

CodePenのRicoMossesgeld（@ricotheque）によるペンナイトモード3を参照してください。

なぜこれが機能するのですか？ hue-rotate(180deg)は、 invert(1)と同じ効果を生み出します。これは、JavaScriptを利用したボタンで切り替えたときにナイトモードCSSがどのように機能するかのデモです。

CSSを最大限に活用する

ブラウザやWebサイトの構築方法が将来劇的に変化しない限り、CSSに関する十分な知識はWeb開発分野の基本的なスキルであり続けます。

これらのCSSのヒントはすべて、共通点があります。それらは、CSSをスタイリング言語として最大限に活用し、ブラウザー自体に手間のかかる作業をさせます。そして、正しく行われると、これは常により良い結果、より良いパフォーマンス、したがってより良いユーザーエクスペリエンスをもたらします。

以下のコメントセクションで、興味深く有用だと思うCSSトリックがあるかどうかをお知らせください。