CSSとか、CSS in JSとか

Yuya-Furusawa commented 3 years ago

CSSに関する細々したメモ

Yuya-Furusawa commented 3 years ago

CSSの詳細度

親要素と子要素のCSSが異なる場合、どちらを優先すれば良いか？ →CSSの詳細度（specificity）で優先度で決まる、詳細度が高い方が優先順位が高い

詳細度の計算方法

高

HTML上のstyle属性に書かれたプロパティ(htmlに直接書かれたstyle=のやつ)

!important

IDセレクタ(#hogeのやつ)

クラスセレクタ(.hogeのやつ)、属性セレクタ([name="hoge"]のやつ)、擬似セレクタ(:hoverのやつ)

要素型セレクタ、擬似要素

CSSの記載順序がうしろのプロパティ

低

これらに点数をつけて計算する（計算方法はQiita参照）

!importantについて

何が優先されるか分からなくなってしまうので、!importantはあまり使うべきではない

参照

Yuya-Furusawa commented 3 years ago

remとem

em：親要素のfont-sizeを基準に決定される rem：html要素のfont-sizeを基準に決定される

参照

CSS3のremとemの違いについて

Yuya-Furusawa commented 3 years ago

styled componentsのProps

styled componentsにもpropsを使うことができる

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

TypeScriptの場合はPropsに型付けする必要がある

//こんな感じで型付け
const Button = styled.button<{primary: boolean}>`
`;

参照

Yuya-Furusawa commented 3 years ago

styled componentsのcssヘルパー関数

テンプレートリテラルからCSSを生成する関数条件付けてCSSを記述するときとかに便利

import styled, { css } from 'styled-components'

const complexMixin = css`
  color: ${props => (props.whiteColor ? 'white' : 'black')};
`

const StyledComp = styled.div`
  /* This is an example of a nested interpolation */
  ${props => (props.complex ? complexMixin : 'color: blue;')};
`

参照

Styled Components - Helpers, css

Yuya-Furusawa commented 3 years ago

TailwindCSSについて

ユーティリティファーストのクラス設計
- クラスで機能を指定
クラス名を考えなくて良い
CSS自体を書く必要がない

こんな感じでユーティリティクラスを指定する

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

注意点 レスポンシブや疑似要素のときは注意。prefixを使うときはスペースを入れない！

// ダメな例（`:`の前後にスペースを入れてはいけない）
hover: text-red-500
hover :text-red-500
hover : text-red-500

//良い例
hover:text-red-500

参照

Yuya-Furusawa commented 3 years ago

twin.macroについて

TailwindとStyled Componentを併用することができる
Styled Componentを使ってインラインではなくコンポーネントで、Tailwindを使ってUtility CSSで

こんな感じで書ける

import React from 'react';
import tw, { styled } from 'twin.macro';
import ButtonComponent from './components/Button';

const App = () => {
    return (
        <StyledApp> {/* new */}
            <ButtonComponent />
        </StyledApp>
    );
};

const StyledApp = styled.div`
    ${tw`flex justify-center items-center h-screen`}
`;

参照

Yuya-Furusawa commented 3 years ago

Flexboxについて

MDNの説明：https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
チートシート：https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

Yuya-Furusawa commented 3 years ago

CSSの疑似要素

選択された要素に対してスタイル付けをすることができる :beforeや:afterが有名だが、他にもいろいろある、a:hoverとかも擬似要素

例：文章の前後に青色の『』をつける

<p class="example">これは例文です</p>

.example:before {
  content: '『' //pタグ要素の前に挿入したいもの
  color: blue //挿入するものに適用したいスタイル
}

.example:after {
  content: '』' //pタグ要素の後に挿入したいもの
  color: blue //挿入するものに適用したいスタイル
}

メリットとしては、HTMLを汚すことなく様々な表現ができる

参考

Yuya-Furusawa commented 3 years ago

CSSの「&（アンプリサンド）」について

&は親要素との結合的に使われる

疑似要素

//コンパイル前
.pagination {
  a {
    &:hover,
    &:focus {
      color: red;
    }
  }
}

//コンパイル後
.pagination a:hover, 
.pagination a:focus {
  color: red;
}

クラス名の結合

//コンパイル前
.pagination {
  &-number {
    // & = .pagination-number
    &.is-current {
      border: 3px solid green;
    }
  }
  &-prev {
    background-color: red;
    &:after {
      content: '<';
    }
  }
}

//コンパイル後
.pagination-number.is-current {
  border: 3px solid green;
}
.pagination-prev {
  background-color: red;
}
.pagination-prev:after {
  content: '<';
}

参照

Yuya-Furusawa commented 3 years ago

CSSのセレクタ

子セレクタ：> 子要素にスタイルを適用する（孫要素以下には適用しない） http://www.htmq.com/selector/child.shtml

隣接セレクタ：+ 直後の要素にスタイルを適用する（離れると適用されない） http://www.htmq.com/selector/adjacent.shtml

兄弟セレクタ：~ 同じ親をもつ要素に適用する（ただし指定段階より後に来なきゃいけない） https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator

Yuya-Furusawa commented 2 years ago

cssで変数

--[変数名]: [値]という形式で、cssに変数を使うことができる

:root {
  --main-gutter: 30px;
}
.box {
  width: 300px;
  height: 100px;
  margin: var(--main-gutter);
}

JSXとかで使うならこんな感じで応用できる

//JSファイル
<div class="title" style={{ [--text-color]: #FFFFFF }}>
  This is title!
</div>

// cssファイル
.title {
  color: --text-color
}

参照

CSSで変数（カスタムプロパティ）を使ってみよう

Yuya-Furusawa commented 2 years ago

CSSだけで三角形を作る方法

cssのborderプロパティのみで三角形を作る事ができる borderを太くし、要素の幅・高さを０まで縮めると良い

これを応用して、疑似要素とかと組み合わせると吹き出しを作ることができる

参照

Yuya-Furusawa commented 2 years ago

文字サイズを小さくする方法

Google Chromeでは10px、Safariでは9pxが最小単位になっている。なのでCSSでそれ以上小さいものを指定しても反映されない。

それでも小さく文字を表示したいときはscaleを使って無理やり小さくする

.sample {
  font-size:10px
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  -ms-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
}

参照

【CSS3】ブラウザの限界を突破した極小サイズの文字を表示させてみた。

Yuya-Furusawa commented 2 years ago

CSSの擬似クラス`:last-child`について

兄弟要素のうち最後の要素に対するスタイル指定

<div>
  <div class="hoge">fuga</div>
  <div class="hoge">fuga</div>
  <div class="hoge">fuga</div> //こいつだけ青文字
</div>

.hoge {
  color: red;
}
.hoge:last-child {
  color: blue;
}

同じようなものとして:first-child, :nth-childもある

参照

Yuya-Furusawa / Self-Study