🚅 ✍🏼 ☝🏽 実用的なCSSのヒント ⛲️ ⏸️ 🐦

CSSのヒント

これらは、一般的な問題に対する最新のソリューションであり、プロのCSSスキルを向上させるためのヒントのコレクションです。

翻訳者から

ご挨拶、CSS関連のメモの別の翻訳が用意されています。ポートランドの開発者Matt SmithはCSSのヒントを共有し、 GitHubに投稿しました。私は彼の選択が特に好きでした。それは構造化されており、退屈な大きなテキストや説明の面では特に面倒ではなく、一般的に初心者でも理解できます。コメントで各項目について議論し、最終的にいくつかの結論を出せれば嬉しいです。それでは始めましょう。

内容

疑似クラスを使用します：ナビゲーションフレームを設定するためではありません。

このように境界線を設定する代わりに...

/*   */ .nav li { border-right: 1px solid #666; }

...さらに、境界線を最後の要素にリセットします...

 /*   */ .nav li:last-child { border-right: none; }

...必要な要素のみを選択するのに役立つ擬似クラス：not（）を使用できます。

 .nav li:not(:last-child) { border-right: 1px solid #666; }

もちろん、 .nav li + liまたは.nav li：first- child〜liのような選択を使用することもできますが、意図的に：not（）を使用する場合、CSSは最後を除くすべての要素の境界を定義し、ここで何が起こっているかは誰でも理解できます。この方法は、IE9以降でサポートされています。

body要素に行間隔を追加します

各要素を定義して、各段落または見出し（<p>、<h *>）にそれぞれ行の高さを追加しないでください。代わりに、このコードをbody要素の本文に追加します。

 body { line-height: 1; }

このようにして、すべてのテキスト要素は、メインの親body要素からこのプロパティを継承します。

すべてを垂直方向に中央揃え

いいえ、これは黒魔術ではありません。要素を垂直に中央に配置できます。

 html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

どういうわけか別の中心にしたいですか垂直、水平...どういうわけか、どこか？ CSS-Tricksでは、記事を読むことができ、その後は何でもできます。この例は、IE11 +およびその他でサポートされています。

注：IE11のフレックスボックスのバグ（エラー）を追跡し、htmlレイアウトプロセスを制御します。

コンマ区切りリストアイテムを正しく分離する

li要素を作成して、エントリがコンマで区切られた実際のリストのように見えるようにすることができます。

 ul > li:not(:last-child)::after { content: ","; }

擬似クラス：not（）を使用して、最後を除く各ul-list項目の後にコンマを追加します。

n番目の子の負のシリアル番号

nth-childで負の引数を使用して、アイテム1〜nを選択します。

 li { display: none; } /*    1  3    */ li:nth-child(-n+3) { display: block; }

または、擬似クラス：not（）の使用に関するすべてを知ったので、これを試すことができます：

 /*    ul-,    1  3 */ li:not(:nth-child(-n+3)) { display: none; }

まあ、それはとても簡単でした。

SVGロゴを使用します

いいえ、SVGを使用しない理由はありません。

 .logo { background: url("logo.svg"); }

SVGは任意の解像度に対応し、すべてのブラウザー（IE9 +）でサポートされています..png、.jpg、または.gifファイルの代わりにsvgを使用できるようになりました。

注：1つのボタンのみにSVGアイコンがあり、SVGがロードされていない場合は、使用可能なテキストプロンプトを使用できます。

 .no-svg .icon-only::after { content: attr(aria-label); }

公理CSS

Lobotomized owl（axiomatic CSS）、はい、これはかなり奇妙な名前ですが、ユニバーサルセレクター（*）とシングルレベルセレクター（+）を使用すると、強力なCSS機能を取得できます。

 * + * { margin-top: 1.5em; }

この例では、別の要素の後に位置するストリーム内のすべての要素は、1.5emに等しいインデントを受け取る必要があります。「ロボット化されたフクロウ」については、Haydon Pickeringの記事または

CSSスライダーの最大の高さ

「max-height」と「overflow：hidden」を使用してCSSスライダーを実装できます。

 .slider ul { max-height: 0; overflow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; /*   max-height */ }

ボックスサイズの継承

ボックスサイズをhtmlから継承します。

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

独自の動作ルールを使用するプラグインまたはコンポーネントで、ボックスサイズを簡単に制御できるようになりました。 IE8 +およびその他のサポート。

同じセル幅

場合によっては、テーブルの作業が苦痛になることがあるため、同じ幅のセルを使用するように修正されたtable-layout：を使用してみてください 。

 .calendar { table-layout: fixed; }

table-layoutで痛みを取り除きます。 IE8 +およびその他のサポート。

フレックスボックスを使用した動的インデント

列レイアウトを使用する場合、フレックスボックス値space-betweenでcssセレクターnth- * 、 first- * 、およびlast-childの使用を取り除くことができます。

 .list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; /*      */ }

IE11 +およびその他でのサポート。

空のリンクに属性セレクターを使用します

a要素にテキスト値がなく、href属性にリンクが含まれている場合にリンクを表示します。

 a[href^="http"]:empty::before { content: attr(href); }

とても便利です。 IE9 +およびその他のサポート。

プレーンリンクのデフォルトスタイル

デフォルトのリンクスタイルを追加します。

 a[href]:not([class]) { color: #008000; text-decoration: underline; }

これで、通常はクラスを持たないCMSのビジュアルエディターを介して挿入されたリンクは、カスケードに影響を与えずに他のリンクとは異なります。

実用的なCSSのヒント