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内で宣言することによって、どこからでも変数を使用することができます。