CSS の calc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 

```scss
width: calc(100% + 20px);
width: calc(100% - 20px);
width: calc(100% * 2);
width: calc(100% / 2);
```

[calc()](https://developer.mozilla.org/ja/docs/Web/CSS/calc())

CSS calc()

<p>CSS の calc() 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。</p>
<pre><code>width: calc(100% + 20px);
width: calc(100% - 20px...

## 問題

```
------------
scroll area
scroll area
scroll area
------------
fixed element // 👈 固定したい！
------------
```

`position: sticky`などでも良いが、heightを設定しないといけないので、計算が面倒になる。

## 実装

```css
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.scroll-area {
  flex-grow: 1;
}
```

```html
<div class='container'>
  <div class='scroll-area'>...</div> 👈 ここでスクロールするようにする
  <div>...</div> 👈 下に固定される
</div>
```

スクロールできる要素の中で特定の要素を下に固定する

```
------------
      |
      | div
img   |
------------
```

こんな感じで配置したい場合に使えるcss

```css
img {
  align-self: 'end',
}
```

👍

display flex で flex item を一番下に配置する

HTML要素は、複数のCSSルールで設定できます。

```html
<p id="proverb" class="message">
  何の為に生まれて、何をして生きるのか、答えられないなんてそんなのは嫌だ
</p>
```

<div class="html">
  <p id="proverb" class="message">
    何の為に生まれて、何をして生きるのか、答えられないなんてそんなのは嫌だ
  </p>
</div>

`タグ名`の使用

```css
p { color: blue; }
```

`.class`の使用

```css
.message { color: green; }
```

`#id`の使用

```css
#proverb { color: red; }
```

ブラウザは`<p> </p>`に1つの色しか設定できないため、CSSに優先順位を付けて選択します。

上記の例では、`#id` が最も優先されるため、パラグラフの色は赤になります。

# CSSルールの順序
同様のセレクターがCSSにある場合、最後に定義されたセレクターが優先されます。

```css
p { color: green; }
p { color: red; }
/* Paragraphs will be red */
```

# 100小節
CSSルールがどれほど「強力」であるかを理解する簡単な方法の1つは、セレクターの特異性を測定することです。

|指定方法|評価値|
|---|---|
|`#id`|100|
|`.class`|10|
|タグ|1|
|Inline Styles|1000|
|属性セレクタ(`p[title]`)|10|
|擬似要素(`p::before`)|1|
|ユニバーサルセレクタ(`*`)|0|
|!important|最上位。同列の場合、評価値計算|

- `#id` セレクターは100の価値があります
- `.class` セレクターは10の価値があります
- `tag` セレクターは1の価値があります
CSSルールが表示される順序に関係なく、「スコア」が最も高いセレクターが優先されます。

```html
#introduction{ color: red;}
.message{ color: green;}
p{ color: blue;}
<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>
```

# 競合を回避する方法
CSSを作成しているときに、同じプロパティが複数回適用される競合するルールを作成するのは簡単です。

それを回避するには：

- クラスのみを使用する: `#id`でstyleを設定しない。
- 単一のHTML要素に複数のクラスを適用することは避けてください。記述せず`<p class="big red important">、<p class="title">`より意味的に説明的なものにします。
- 次のようなインラインスタイルを使用しないでください`<div style="background: blue;">`
- !importantを使用しない。


CSSの優先順位

`className="sticky top-0 z-50"`で固定する。

```js
import Header from '@/components/organisms/header.js'

export default function Layout({ children }) {
  return (
    <>
      {/* ヘッダーを固定する */}
      <div className="sticky top-0 z-50">
        <Header />
      </div>
      {/* メインコンテンツ */}
      <div>{children}</div>
    </>
  )
}
```

TailwindCSS

TailwindCSSでHeaderを固定する

[Font Size](https://tailwindcss.com/docs/font-size)

## 設定

`tailwind.config.js`

```js
module.exports = {
  theme: {
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem', 
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      'mobile-input': '16px', // 追記
    },
  }
}
```

1つ定義すると、それしか見なくなるようなので、全部定義した。
lineHeightもやった方がいいかも。。

## 使い方

```sass
sm:text-lg text-mobile-input
```


TailwindCSSでmobileのinput系を16pxにする

## リソース一覧
- [Tailwind CSS](https://tailwindcss.com/)
- [Resources - Tailwind CSS](https://tailwindcss.com/resources)
- [Tailwind UI](https://tailwindui.com/)
- [Tailwind Components](https://tailwindcomponents.com/)
- [Tailwind Templates](https://tailwindtemplates.io/)
- [Tailwind Page Creater | DevDojo](https://devdojo.com/tails/app)
- [Tailwind UI Kit](https://tailwinduikit.com/)

## Breakpointの設定
- [Breakpoints](https://tailwindcss.com/docs/breakpoints)

TailwindCSSの良さげなサイトまとめ

## ケース: Pタグからcodeタグがはみ出してしまうケース

```js
<p><code>some...</code></p>
```

```css
overflow-wrap: break-word;
```

## TailwindCSS

```css
p {
  @apply break-words;
}
```

- [Word Break](https://tailwindcss.com/docs/word-break#class-reference)

overflow-wrap

```css
position: absolute !important;
```

を高さが影響しているHTMLタグに付与してみる。

```css
line-height: 77px
```

line-heightを設定してみる。

Heightの伸縮がうまく行かない時に確認してみる箇所

## プロパティ

- `auto` 瞬時にスクロールします。

- `smooth` スムーズにスクロールします。

## 例

```scss
html {
  scroll-behavior: smooth;
}
```

目次など`#`でスクロールする際に、スムーズになります。

## 資料

[scroll-behavior](https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior)

CSS calc()

Related

Tags

Share