CSSとか、CSS in JSとか about self-study

[Yuya-Furusawa]

CSSの詳細度

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

詳細度の計算方法

高

0. HTML上のstyle属性に書かれたプロパティ(htmlに直接書かれたstyle=のやつ)
1. !important
2. IDセレクタ(#hogeのやつ)
3. クラスセレクタ(.hogeのやつ)、属性セレクタ([name="hoge"]のやつ)、擬似セレクタ(:hoverのやつ)
4. 要素型セレクタ、擬似要素
5. CSSの記載順序がうしろのプロパティ

低

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

!importantについて

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

参照

• CSSセレクタ詳細度の理解を深める
• CSSの詳細度とコーディングについて
• 【CSS】!importantとは

[Yuya-Furusawa]

remとem

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

参照

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

[Yuya-Furusawa]

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

参照

• Styled Components - Adopting based on props
• Styled Components - TypeScript
• styled-componentsをさくっとやる（tsx対応）

[Yuya-Furusawa]

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]

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

参照

• Tailwindcss
• TailwindCSSって何？なんで流行ってるの？

[Yuya-Furusawa]

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

参照

• twin.macro (GitHub)
• Styling React Components: styled-components + twin.macro (Tailwind CSS 2.0)

[Yuya-Furusawa]

Flexboxについて

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

[Yuya-Furusawa]

CSSの疑似要素

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

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

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

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

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

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

参考

• 擬似要素 (Pseudo-elements) MDN
• CSSの疑似要素とは？beforeとafterの使い方まとめ

[Yuya-Furusawa]

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

参照

• [SCSS]便利な&（アンパサンド）の使い方メモ
• Level up your Sass with the ampersand

[Yuya-Furusawa]

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]

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]

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

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

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

参照

• CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター
• CSSで作る！吹き出しデザインのサンプル19選

[Yuya-Furusawa]

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

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]

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もある

参照

• :last-child - CSS: カスケーディングスタイルシート | MDN
• 【CSS】構造擬似クラス:first-child、:last-childの使い方