ogiori.com

検索中..

All

  • 特定のブラウザのみ適応させる。

    👍

    ■ Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .クラス名 {
    /* ここに書く */
  }
}

■ Safari
::-webkit-full-page-media, :future, :root .クラス名 {
  /* ここに書く */
}

■ Firefox
_:lang(x)::-moz-placeholder, .クラス名 {
  /* ここに書く */
}
    ⚠️ ブラウザのアップデートで動作しなくなる可能性があります

  • ページのコンテンツ量が少ない時にフッターを下にする。

    👍

    body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}
    headerを「position: fixed」にしているときは、「grid-template-rows: 1fr auto」にする。

  • iPhoneで住所、電話番に点線が付くのをやめる。

    👍

    <meta name="format-detection" content="telephone=no, address=no, email=no">
    iPhoneで住所、電話番に点線が付きます。 それを、無効化してくれます。

  • 「」等の空白を詰める。

    👍

    font-feature-settings: 'palt';
font-kerning: auto;
    指定しているfont-familyに寄っては、効かないので注意。

  • ホバー操作が使えるデバイス（マウス等）のみホバースタイルを適用する。

    👍

    @media (hover: hover) {
  el:hover {
ここにhover時のスタイル
  }
}
    ホバー操作が使えるデバイス（マウス等）のみホバースタイルを適用する。

  • backgroundを左右2色にする。

    👍

      background: linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%);
    【90deg】を【180deg】にすると、上下2色になる。

  • 2行でテキストを切り、末尾を…で省略する。

    👍

    odisplay: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
    【-webkit-line-clamp: 2;】の数字を変更すると、テキストを切り取る行を変更できる。

  • 1文字分下げ。

    👍

    padding-left: 1em;
text-indent: -1em;
    1文字分、字下げすることができます。

  • 英単語を折り返すようにする。

    👍

    overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
    長いURLや連続した英数字は、通常スペースがないと折り返されず、 要素をはみ出すことがあります。 これを折り返すように設定できます

  • CSSで変数を使用する。

    👍

    /* 変数の設定 */
:root {
  --black: black;
  --white: white;
  --jp: 'Zen Maru Gothic', serif;
}

/* 使用時 */
.title {
  color: var(--black;
  font-family: var(--jp);
}
    :root内で宣言することによって、どこからでも変数を使用することができます。