CSSのプロのスキルになるようにアドバイスのリストを紹介します。
他のリストのため： Awesome リスト の @sindresorhus をチェックSしてください。.
- CSSのリセットを使用します
- box-sizingをコンポーネントごとに変更
- すべてのプロパティをリセットする代わりに
unsetを使う :not()を使用 / ボーダーを削除- フォントがローカルにインストールされているかどうかを確認します
bodyにline-heightを加える- フォーム要素に
：focusを設定する - 天地の中央に配置
- リストをカンマ区切りにする
- ネガティブな「:nth-child」を使用してアイテムを選択
- SVGのアイコン
- Owlを使用
- CSSで実装されたスライダーにはmax-heightを使う
- テーブルのセルの幅を均等にする
- Flexboxのマージンハックを取り除く
- リンクにテキストが無い時はURLを表示
- デフォルトのリンクをスタイル
- 内在比率のボックス
- リンク切れの画像要素をスタイル
- グローバルのサイズ指定に「rem」、ローカルに「em」を使用
- 動画の自動再生を隠す
- フレクシブルタイプの
:rootを使用 - スマホ向け、フォーム要素のフォントサイズの設定
- ポインターイベントを使用してマウスイベントを制御する
- 間隔として使用される改行に「display：none」を設定します
CSSのリセットはスタイリング要素のための白紙の状態で異なるブラウザ間でスタイルの一貫性を強化するのに役立ちます。あなたはNormalize、_et al._のようにCSSのリセットライブラリを使用するか、より簡略化リセットアプローチを使用することができます。
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}今の要素は、マージンやパディングを剥奪し、box-sizingは、CSSボックスモデルとレイアウトを管理することができますされます。
**注意：**あなたがあなたのCSSのリセットでInherit box-sizing プロパティが含まれていないことを選択する可能性があります下にbox-sizingヒントに従っている場合。
box-sizingはhtml要素で指定し、継承して利用すると、コンポーネントで変える時に簡単です。
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}これでプラグインかその他のコンポーネントに box-sizing を変更しやすくなります。
要素のプロパティをリセットするときは、個々のプロパティをリセットする必要はありません。
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}要素のプロパティのすべてを all省略形で指定することができます。 値を unsetに設定すると、要素のプロパティが初期値に変更されます：
button {
all: unset;
}ボーダーを書いて。。。
/* add border */
.nav li {
border-right: 1px solid #666;
}ラストチャイルドで非表示するより
/* remove border */
.nav li:last-child {
border-right: none;
}:not()を使用するとシンプルなコードで指定できます。
.nav li:not(:last-child) {
border-right: 1px solid #666;
}CSSセレクターは、境界線を人間が表現する方法で定義します。
フォントをリモートでフェッチする前に、フォントがローカルにインストールされているかどうかを確認できます。これもパフォーマンスのヒントになります。
@font-face {
font-family: "Dank Mono";
src:
/* Full name */
local("Dank Mono"),
/* Postscript name */
local("Dank-Mono"),
/* Otherwise, download it! */
url("//...a.server/fonts/DankMono.woff");
}
code {
font-family: "Dank Mono", system-ui-monospace;
}このプロチップとデモを共有してくれたAdam Argyleへの帽子のヒント.
body要素でline-heightを指定することでp, h*などにその値が継承されるため、それぞれにline-heightを指定する必要がなくなります。
body {
line-height: 1.5;
}視認されたキーボードユーザーは、キーボードイベントがページ内のどこに移動するかを決定するためにフォーカスを当てています。 フォーム要素のフォーカスを目立たせ、ブラウザのデフォルトの実装と一貫性を持たせる：
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: none;
outline: #000 dotted 2px;
outline-offset: .05em;
}なんでも天地の中央に配置できます！！
html,
body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}...CSSグリッド:
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}なんでも中央に揃いたいですか？ CSS-Tricks のセントリングガイド をチェックしてください。
リストの各アイテムをカンマ区切りにします。
ul > li:not(:last-child)::after {
content: ",";
}:not() を使えば最後のエレメントにカンマ追加されないようにします。
備考: アクセシビリティによくないので気をつけてをお使いください。
nth-childにはネガティブな値も指定できます。
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}また :not() を使用してこちらをのコードを書いてみてください：
/* select all items except the first 3 and display them */
li:not(:nth-child(-n+3)) {
display: none;
}簡単でしょう〜！
アイコンとしてSVGを使えない理由がないです！
.logo {
background: url("logo.svg");
}SVGは IE9以降のすべてのブラウザでサポートされています。
備考: ボタンがSVGだけで作られている場合、SVGがローディングされなかったらアクセシビリティのためこちらのコードを書いて見てください:
.no-svg .icon-only::after {
content: attr(aria-label);
}変な名前ですが(*) と (+) を使用するとパワフルCSSセレクターになります！
* + * {
margin-top: 1.5em;
}全てのページの要素にある要素がmargin-top: 1.5emをもらいます。
Owlについて詳しくはこちら：List Apart のヘイドンピケリングの記事
CSSで実装されたスライダーは、max-heightをoverflow: hidden;と一緒に使ってください。
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}ホバーの時max-heightの要素を拡張オバーフローの結果でスライダーが表示されます。
テーブルの各セルの幅を均等にするには、table-layout: fixed;を使うと簡単にできます。
.calendar {
table-layout: fixed;
}簡単にテーブルレイアウトを作れます。
flexboxでカラムの溝をつくる時、nth-, first-, last-childなどのハックで最後の溝を取り除くことができますが、それはflexboxのspace-betweenプロパティを使うだけで解決します。
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}columnのスペースが揃えている。
リンクのhref属性にはURLがあり、リンクのテキストがない場合に、下記のCSSを使用すると、リンク先のURLを表示します。
a[href^="http"]:empty::before {
content: attr(href);
}便利ですよー！
デフォルトのリンクのスタイルを追加：
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}CMSで挿入される通常class属性を持たないリンクに:notを使ってスタイルを定義します。
ボックスを内在比率で作成するには、ボックスの上部か下部にdivの詰め物を適用します。
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}
.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}paddingに20%を使っているのは、そのボックスの高さを幅の20%と等しくします。ビューポートの幅に関わらず、子のdiv要素のアスペクト比は「100%:20%(5:1)」を保持します。
よりよいユーザエクスペリエンスを提供するために、リンク切れの画像要素にスタイルを定義します。もちろんリンク切れがないのがベストですが、絶対に存在しない訳ではありません。
img {
display: block;
font-family: 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 broken :(";
display: block;
margin-bottom: 10px;
}
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}このようなスタイリングに興味があればこちらに参考してください：イレ アデリノクン' リンク切れの画像についての記事.
ベースのフォントサイズをhtml{font-size: 16px;}にルート指定し、テキスト要素をemで指定します。
h2 {
font-size: 2em;
}
p {
font-size: 1em;
}モジュールのフォントサイズはremで指定します。
article {
font-size: 1.25rem;
}
aside .module {
font-size: .9rem;
}モジュールごとに分けるとスタイルするのが簡単で、メンテナンス性もアップします。
これはカスタマイズされたユーザースタイルシートのための素晴らしいテクニックです。ページがロードされた時、動画が自動再生されて音がでてしまうユーザーの負担を軽減します。もし無音にできないなら、動画を使わないでください。
video[autoplay]:not([muted]) {
display: none;
}こちらも :not()を使用できます！
レスポンシブ対応時に、フォントのサイズをビューポートごとに適応することができます。:rootを使い、ビューポートの高さと幅に基づいてフォントのサイズを定義することができます。
:root {
font-size: calc(1vw + 1vh + .5vmin);
}:rootで定義した値に基づいて、それぞれのタグや要素にemを使って利用します。
body {
font: 1rem/1.6 sans-serif;
}スマホでセレクト要素のドロップダウンをタップした時に、iOS Safariでフォーム要素にズームインするのを回避するために、フォントサイズを加えます。
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}💃
Pointer eventsでは、マウスがタッチしている要素とどのように対話するかを指定することができます。 ボタン上のデフォルトポインタイベントを無効にするには、次のようにします。
button:disabled {
opacity: .5;
pointer-events: none;
}それは簡単です。
ハリー・ロバーツが指摘したように、これはCMSユーザーがスペースのために余分な改行を使用するのを防ぐのに役立ちます：
br + br {
display: none;
}現在のChrome, Firefox, Safari, のバージョンとEdge.