CSSを使用したリセット
normalize.cssのようなcssリセットライブラリは長年使用されており、ブラウザ間の一貫性を確保するために、ウェブサイトのスタイリングに明確な基準を提供することができます。
ほとんどのプロジェクトでは、これらのライブラリに含まれるすべてのルールは必要なく、マージンやパディングをすべて削除し、ブラウザのデフォルトボックスモデルを変更する単純なルールによって、レイアウト内のすべての要素に適用できます。
*{
box-sizing:border-box;
margin:0;
padding:0
}
box-sizing 宣言の使用は任意であり、以下で継承するボックス・モデル・フォームを使用する場合は省略できます。
継承ボックスモデル
ボックスモデルはhtmlを継承します：
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
、フレックスボックスレイアウトの使用は、マージンの問題を避けるために
ポートフォリオやイメージギャラリーなど、フロートを使用したラスターレイアウトをデザインしようとしたときに、フロートをクリアして外側の余白をリセットし、希望する行数に分割する作業を何度繰り返したことでしょう。n番目、最初、最後の子の問題を回避するには、flexboxのspace-betweenプロパティの値を使用します。
.flex-container{
display:flex;
justify-content:space-between;
}
.flex-container .item{
flex-basis:23%;
}
、リスト境界の問題を解決するための:not()の使用
ウェブデザインでは、last-child nth-child セレクタを使用して、親セレクタで宣言されたスタイルを上書きするのが一般的です。たとえば、ナビゲーション メニューでは、ボーダーを使用して各リンクの区切り線を作成し、最後のリンクのボーダーを解除するルールを追加します。
.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;
}
上記のように、最後のliを除いて、すべての.nav liにボーダースタイルを追加しましたが、非常に単純ではありません！
もちろん、.nav li+liや.nav li:first-child ~liを使うこともできますが、:notの方がよりセマンティックでわかりやすいでしょう。
本文にline-heightスタイルを追加します。
非効率なスタイリングにつながるのは、宣言の繰り返しが絶えないことです。プロジェクトの計画を立て、CSSの流れがよくなるようにルールを組み合わせるのが最善です。これを実現するには、カスケードについて理解し、汎用セレクタで記述されたスタイルが他の場所でどのように継承されるかを理解する必要があります。
行間をプロジェクト全体の属性として設定することで、コードの量を減らすだけでなく、サイトのスタイルに標準的な外観を与えることができます。
body {
line-height: 1.5;
}
このステートメントには単位がなく、行の高さをフォント・サイズの1.5倍としてレンダリングするようブラウザに指示するだけであることに注意してください。
、任意の要素の垂直センタリング
CSSGridレイアウトを使用する準備ができていない場合に、コンテンツレイアウトをエレガントに設定するための基礎を築くには、垂直中央配置レイアウトのグローバルルールを設定するのがよい方法です。
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
SVGアイコンの使用
SVGはすべてのクラスで使用され、すべてのブラウザでサポートされているので、.png .jpg .gifファイルを破棄することができます。.png、.jpg、.gifなどのSVGアイコンフォントもFontAwsome5で利用可能です。SVGのフォーマットは他のイメージタイプと同じです：
.logo {
background: url("logo.svg");
}
ヒント: ボタンのようなインタラクティブな要素に SVG を使うと、SVG の読み込みに失敗します。以下のルールは SVG が
.no-svg .icon-only:after {
content: attr(aria-label);
}
"OWLセレクタ "の使用
ジェネリックセレクタ*と隣接兄弟セレクタ+の使用は、他の要素の直後にあるドキュメントフロー内のすべての要素に統一ルールを設定する強力なCSS機能を提供します。
* + * {
margin-top: 1.5rem;
}
一貫した垂直構造
一貫した垂直方向のリズムは、コンテンツをより読みやすくする視覚的な美しさを提供します。フクロウセレクタが汎用的すぎる場合は、要素内で汎用セレクタを使用して、レイアウトの特定の部分に一貫した垂直方向のリズムを作りましょう：
.intro > * {
margin-bottom: 1.25rem;
}
, 改行テキストをより美しくするには box-decoration-break を使用します。
複数の行に折り返された長いテキスト行に、均一な間隔、マージン、ハイライト、または背景色を適用したいが、段落や見出し全体を1つの大きな塊のように見せたくないとします。Box Decoration Breakプロパティを使用すると、パディングやマージンの整合性を維持したまま、テキストのみにスタイルを適用することができます。
これは、ホバー時にハイライトを適用したい場合や、スライダーのサブテキストにハイライトを適用したい場合に特に便利です：
.p {
display: inline-block;
box-decoration-break: clone;
-o-box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
インライン・ブロック宣言は、色や背景、マージンやパディングを要素全体ではなく、テキストの各行に適用することを可能にし、クローン宣言は、これらのスタイルが各行に均等に適用されることを保証します。
、同じ幅のテーブルセル
テーブルを扱うのは難しいので、table-layout: fixed を使ってセルの幅を等しく保つようにしてください：
.calendar {
table-layout: fixed;
}
、空のリンクを表示するために属性セレクタを使用せざるを得なくなりました。
これは、通常class属性を持たないCMS経由で挿入されたリンクに特に有効で、カスケードに影響を与えることなく特定の方法でスタイルを設定するのに役立ちます。例えば、
a[href^="http"]:empty::before {
content: attr(href);
}
スタイル「デフォルト」リンク
リンクのスタイルに関しては、ほぼすべてのスタイル・シートで一般的な A スタイルを見つけることができます。このため、子要素のリンクに対してオーバーライドやスタイリング・ルールを追加で記述する必要があり、WordPress のような CMS を使用している場合、ボタンのテキスト色よりもメイン・リンクのスタイリングに問題が生じる可能性があります。
Default "リンクをより邪魔にならないスタイルにする方法をお試しください：
a[href]:not([class]) {
color: #999;
text-decoration: none;
transition: all ease-in-out .3s;
}
比率ボックス
固有の比率を持つボックスを作成するために必要なことは、div に top または bottom padding を適用することだけです：
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}
.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
20%で埋めると、ボックスの高さはその幅の20%に等しくなります。サブディブはビューポートの幅に関係なく、アスペクト比を維持します。
ブロークン・スタイルのイメージ
このヒントはコードを減らすことではなく、デザインの細部を洗練させることです。壊れたイメージはさまざまな理由で発生し、見苦しかったり、混乱を招いたりします。この小さなCSSで、より美しい効果を生み出しましょう：
img {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
img:before {
content: "We're sorry, the image below is missing :(";
display: block;
margin-bottom: 10px;
}
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
, グローバルなリサイズにはremを、ローカルなリサイズにはemを使用します。
ルート・ディレクトリのベース・フォント・サイズ、例えばhtml font size: 15px;を設定した後、包含要素のフォント・サイズをremに設定することができます：
article {
font-size: 1.25rem;
}
aside {
font-size: .9rem;
}
次に、text要素のフォントサイズをemに設定します。
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}
含まれる各要素はパーティション化され、スタイルが簡単になり、メンテナンスが容易になり、柔軟性が増しました。
ルートタイプの柔軟な使用
これは、ソースコードから簡単に制御できないコンテンツを扱っているときに、ユーザースタイルシートをカスタマイズするための素晴らしいトリックです。このトリックは、ページが読み込まれたときに動画のサウンドを自動的に再生することで、訪問者の邪魔にならないようにするもので、今回も素晴らしい: not()擬似セレクタを提供します：
video[autoplay]:not([muted]) {
display: none;
}
ルートタイプの柔軟な使用
レスポンシブレイアウトのフォントサイズは、ビュースペースに合わせて自動的に調整できるようにする必要があります。フォントサイズは、:notとviewspace単位を使用して、ビュースペースの高さと幅に基づいて計算できます：
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
ルート・エム・ユニットを使うことができます：
body {
font: 1rem/1.6 sans-serif;
}
上記のrem/emのヒントを組み合わせることで、より良いコントロールが可能になります。
CSS変数
クリックしたモバイルブラウザがしないようにするには
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
CSS変数
最後に、CSSの最も強力なレベルは、スタイルシートの任意の場所でキーワードによって再利用することができるパブリックプロパティ値のセットを宣言することができますCSS変数から来ます。一貫性を保つために、プロジェクト全体で使用する色のセットがあるかもしれません。
CSSでこのような色の値を何度も何度も繰り返すのは、煩わしいだけでなく、エラーになりがちです。ある時点で色を変更する必要がある場合、それを見つけて置き換えることを余儀なくされますが、これは信頼性が低く、高速でもありません。例えば
:root {
--main-color: #06c;
--accent-color: #999;
}
h1, h2, h3 {
color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
color: var(--accent-color);
}
