CSSのヒント

CSSスキルをプロにするためのヒント集。

他の素晴らしいリストについては、 @sindresorhusの素晴らしいリストの厳選されたリストをチェックしてください。

目次

• ヒント
• サポート
• 翻訳
• 貢献ガイドライン

ヒント

1. CSSリセットを使用する
2. 継承

   box-sizing

3. unset

   すべてのプロパティをリセットする代わりに使用する

4. :not()

   ナビゲーションで境界線を適用/適用解除するために使用します
5. フォントがローカルにインストールされているかどうかを確認する

6. line-height

   に追加

   body

7. :focus

   フォーム要素に設定
8. 垂直方向-何でも中央に配置
9. カンマ区切りのリスト
10. ネガティブを使用してアイテムを選択

    nth-child

11. アイコンにSVGを使用する
12. 「ロボトミー化されたフクロウ」セレクターを使用する

13. max-height

    純粋なCSSスライダーに使用
14. 等幅のテーブルセル
15. Flexboxでマージンハックを取り除く
16. 空のリンクで属性セレクターを使用する
17. スタイル「デフォルト」リンク
18. 固有の比率ボックス
19. 壊れた画像のスタイル

20. rem

    グローバルサイジングに使用します。

    em

    ローカルサイジングに使用
21. ミュートされていない自動再生動画を非表示にする

22. :root

    フレキシブルタイプに使用

23. font-size

    より良いモバイル体験のためにフォーム要素に設定
24. ポインタイベントを使用してマウスイベントを制御する

25. display: none

    間隔として使用される改行に設定

26. :empty

    空のHTML要素を非表示にするために使用

CSSリセットを使用する

CSSリセットは、スタイリング要素のスレートをきれいにして、さまざまなブラウザー間でスタイルの一貫性を強化するのに役立ちます。NormalizeなどのCSSリセットライブラリを使用できます。、または、より単純化されたリセットアプローチを使用できます。

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

これで、要素の余白とパディングが削除され

box-sizing

デモ

注：以下の継承

box-sizing

box-sizing

^{目次に戻る}

継承

box-sizing

box-sizing

html

html {
  box-sizing: border-box;
}

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

これにより、

box-sizing

デモ

^{目次に戻る}

unset

すべてのプロパティをリセットする代わりに使用する

要素のプロパティをリセットする場合、個々のプロパティをリセットする必要はありません。

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

all

unset

button {
  all: unset;
}

注：

all

unset

^{目次に戻る}

:not()

ナビゲーションで境界線を適用/適用解除するために使用します

ボーダーを置く代わりに...

/* 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;
}

このヒントとデモを共有してくれたAdamArgyleへのH/T 。

^{目次に戻る}

line-height

に追加

body

line-height

<p>

<h*>

body

body {
  line-height: 1.5;
}

このようにして、テキスト要素は

body

デモ

^{目次に戻る}

:focus

フォーム要素に設定

目の見えるキーボードユーザーは、キーボードイベントがページのどこに行くかを決定するためにフォーカスに依存しています。フォーム要素に焦点を合わせて目立たせ、一貫性を持たせてから、ブラウザのデフォルトの実装を作成します。

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には、そのすべてを実行するための優れた記事があります。

注： IE11のflexboxでバグのある動作に注意してください。

デモ

^{目次に戻る}

カンマ区切りのリスト

リストアイテムを実際のコンマ区切りのリストのように見せます。

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

:not()

注：このヒントは、アクセシビリティ、特にスクリーンリーダーには理想的ではない場合があります。また、ブラウザからのコピー/貼り付けは、CSSで生成されたコンテンツでは機能しません。注意して続行してください。

^{目次に戻る}

ネガティブを使用してアイテムを選択

nth-child

CSSでネガティブ

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: block;
}

デモ

^{目次に戻る}

アイコンにSVGを使用する

アイコンにSVGを使用しない理由はありません。

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

SVGはすべての解像度タイプに対応し、IE9までのすべてのブラウザーでサポートされています。.png、.jpg、または.gif-jif-whatevファイルを破棄します。

注：視力のあるユーザー向けのSVGアイコンのみのボタンがあり、SVGの読み込みに失敗した場合、これはアクセシビリティを維持するのに役立ちます。

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

^{目次に戻る}

「ロボトミー化されたフクロウ」セレクターを使用する

奇妙な名前かもしれませんが、ユニバーサルセレクター（

*

+

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

この例では、他の要素に続くドキュメントのフロー内のすべての要素がを受け取り

margin-top: 1.5em

「ロボトミー化されたフクロウ」セレクターの詳細については、AListApartのHeydonPickeringの投稿を参照してください。

デモ

^{目次に戻る}

max-height

純粋なCSSスライダーに使用

max-height

.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でマージンハックを取り除く

列ガターを操作する場合、flexboxのプロパティを使用して

nth-

first-

last-child

space-between

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

これで、列の側溝は常に等間隔で表示されます。

^{目次に戻る}

空のリンクで属性セレクターを使用する

<a>

href

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

それはかなり便利です。

デモ

^{目次に戻る}

スタイル「デフォルト」リンク

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

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

これで、通常は属性を持たないCMSを介して挿入されたリンクは

class

^{目次に戻る}

固有の比率ボックス

固有の比率でボックスを作成するには、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%;
}

パディングに20％を使用すると、ボックスの高さが幅の20％に等しくなります。ビューポートの幅に関係なく、子divはアスペクト比（100％/ 20％= 5：1）を維持します。

デモ

^{目次に戻る}

壊れた画像のスタイル

少しのCSSを使用して、壊れた画像をより美しく見せます。

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Now add pseudo-elements rules to display a user message and URL reference of the broken image:

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;
}

Learn more about styling for this pattern in Ire Aderinokun's original post.

^{back to table of contents}

Use

rem

for Global Sizing; Use

em

for Local Sizing

After setting the base font size at the root (

html { font-size: 100%; }

em

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Then set the font-size for modules to

rem

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.

^{back to table of contents}

Hide Autoplay Videos That Aren't Muted

This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video:

video[autoplay]:not([muted]) {
  display: none;
}

:not()

^{目次に戻る}

:root

フレキシブルタイプに使用

レスポンシブレイアウトのタイプフォントサイズは、各ビューポートで調整できる必要があります。次を使用して、ビューポートの高さと幅に基づいてフォントサイズを計算できます

:root

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

root em

:root

body {
  font: 1rem/1.6 sans-serif;
}

デモ

^{目次に戻る}

font-size

より良いモバイル体験のためにフォーム要素に設定

ドロップダウンがタップされたときにモバイルブラウザ（iOS Safariなど）がHTMLフォーム要素を拡大しないようにするには、セレクタルールに次の項目を追加します。

<select>

font-size

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

^{目次に戻る}

ポインタイベントを使用してマウスイベントを制御する

ポインタイベントを使用すると、マウスが触れている要素とどのように相互作用するかを指定できます。たとえば、ボタンのデフォルトのポインタイベントを無効にするには、次のようにします。

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

とても簡単です。

^{目次に戻る}

display: none

間隔として使用される改行に設定

ハリーロバーツが指摘したように、これは、CMSユーザーが間隔に余分な改行を使用するのを防ぐのに役立ちます。

br + br {
  display: none;
}

^{目次に戻る}

:empty

空のHTML要素を非表示にするために使用

空のHTML要素がある場合、つまり、コンテンツがCMSによってまだ設定されていないか、動的に挿入されていない場合（たとえば、

<p class="error-message"></p>

:empty

:empty {
  display: none;
}

注：空白のある要素は空とは見なされないことに注意してください。例：

<p class="error-message"> </p>

^{目次に戻る}

サポート

Chrome、Firefox、Safari、Opera、Edge、IE11の現在のバージョン。

^{目次に戻る}

翻訳

注：翻訳されたヒントの増え続けるリストを維持するために利用できる時間が少なくなりました。新しいヒントを追加するには、それを12以上の翻訳に含める必要があります。そのため、翻訳されたREADMEファイルには、メインのREADMEファイルに記載されているすべてのヒントが含まれていない場合があります。

• 简体中文
• 正體中文
• ドイツ語
• スペイン語
• フランス語
• λληνικά
• ગુજરાતી
• イタリア語
• 日本語
• 한국어
• ポーランド
• ポルトガル語はブラジル
• ポルトガル語はヨーロッパを行います
• Русский
• TiếngViệt

^{目次に戻る}