HTML, CSSでよく使う指定方法まとめ

# これは何

CSSで私がよく使用する指定をまとめました

# 画像

## レスポンシブで画像を出し分ける

`picture`タグを使う

```CSS:こんな感じ
<picture>
  <source srcset="1200px以上で表示する画像" media="(min-width: 1200px)" />
  <source srcset="770px以上で表示する画像" media="(min-width: 770px)" />
  <img src="上記以外で表示する画像" alt="hogehoge"/>
</picture>
```

https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture

## 画像の下にできる余白を削除する

画像に`display: block`を追加する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLjPGJz" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/yLjPGJz">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## ボックスにアスペクト比を設定する

画像に`aspect-ratio`を設定する

```CSS:こんな感じ
aspect-ratio: 16/9;
```

https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

## 画像の縦横比が変わってしまう

`object-fit: conain` もしくは `object-fit: cover`を指定する

- `contain`
    - アスペクト比を維持したまま、コンテンツボックスに収まるように拡大縮小される
- `cover`
    - アスペクト比を維持したまま、コンテンツボックス全体を埋めるように拡大縮小される

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxjPmPM" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/xxjPmPM">
  object-fit</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

# レイアウト

## なるべく少ない行数で上下左右中央揃えにする

```CSS:こんな感じ
display: grid;
place-items: center;
```

## `position: absolute`を指定した要素が飛んでいってしまう

親要素に`position: relative`を指定する

:::note
`position: absolute`を指定して`top`や`left`などの位置指定をすると、基本はウィンドウ基準で位置が決定されます。
親要素に`position: relative`を指定すると、その親要素が基準位置になります。
:::

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ExLQgQR" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/ExLQgQR">
  dropdown</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## z-indexが効かない時の対処法

指定したい要素に`position: relative`を追加する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdLXrYJ" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/mdLXrYJ">
  z-index</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## gridでstickyが効かない時の対処法

親要素に`align-items: start;`を追加する
または`sticky`させたい要素に`height`を指定する

🔽 gridを指定した要素の子要素に`position: sticky`を指定しても効いていない

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKRQNPy" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/KKRQNPy">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

🔽 親要素に`align-items: start;`を追加すると`sticky`するようになる

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNJMoxX" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/WNJMoxX">
  sticky</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## テキストのはみ出し部分を「...」で省略する

### 1行の時

```CSS:こんな感じ
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
```

### 2行以上の時

```CSS:こんな感じ
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BaxYQpZ" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/BaxYQpZ">
  text</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow

https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

# レスポンシブ対応

## 要素を左端と右端に設置する

親要素に`display: flex`と`justify-content: space-between;`を指定する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxjYRdv" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/xxjYRdv">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

## 要素が溢れるときに折り返す

```CSS:こんな感じ
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
```

`flex-wrap: wrap;`を指定すると、フレックスボックスの子要素が複数行で表示されるようになり、`gap`で要素間の余白を決定できます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYjRWaK" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/zYjRWaK">
  wrap</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

https://developer.mozilla.org/ja/docs/Web/CSS/gap

## [よくやるレスポンシブ対応]特定のサイズより大きくならないようにする

例えば画面幅が1280px以下の時は画面幅いっぱいにコンテンツが表示され、1280pxより大きい時はコンテンツが一定より幅が大きくならないようにする などという実装をしたい時に使います

コンテンツに`width: 100%;`と`max-width`を指定することで、コンテンツが一定より幅が大きくならないようにしつつ特定の幅以下の時は親要素の幅いっぱいに表示されます。

🔽 コンテナをリサイズすると、特定の幅からはコンテンツの幅が一定になります

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abGqYPW" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/abGqYPW">
  responsive</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# アクセシビリティ

## アイコンフォントの読み上げをスキップする

`aria-hidden: true`

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

## アイコンフォントが読み上げられるようにする

`aria-label="読み上げて欲しい内容"`

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

# スクロール系

## 要素がはみ出す時だけスクロールバーを表示するようにする

`overflow: scroll;` ではなく `overflow: auto;`を利用する

`overflow: scroll;`を指定すると常にスクロールバーが表示されるため、要素がはみ出す時だけスクロールバーを表示したい場合は `overflow: auto;`を指定します。

🔽コンテナーをリサイズしてみると、上は常にスクロールバーが表示され、下はコンテナーが大きい時はスクロールバーが表示されません。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdLXLya" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/mdLXLya">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/overflow

## 最後までスクロールしたときに、次のコンテナーがスクロールされるのを防ぐ

通常、ページの中にモーダルなどpositionが固定されたスクロールするコンテンツがある時、そのコンテンツをスクロールし切ると下のコンテンツがスクロールされます。

この、**スクロールチェーン**`は、CSSで`overscroll-behavior: contain;`を指定することで防ぐことができます。

🔽 `overscroll-behavior: contain;`なし

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoeQemM" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/PoeQemM">
  scroll-behavior</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

🔽 `overscroll-behavior: contain;`あり

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abGqGwY" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/abGqGwY">
  overscroll-behavior: contain;</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior

## スムーズスクロール

スクロールするコンテナーに`scroll-behavior: smooth;`を指定する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYrVrre" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/eYrVrre">
  smooth-scroll</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

## スクロールスナップ

`scroll-snap-type`と`scroll-snap-align`を指定する

`scroll-snap-type`とは、スクロールする時のスナップの設定、`scroll-snap-align`はスクロールする時のスナップする位置を設定するプロパティです。

スクロールするコンテナにはスクロールする方向とスナップの仕方を指定します。

- スクロールする方向
    - `x`：横スクロール
    - `y`：縦スクロール
    - `both`：両方
- スクロールする時のスナップの仕方
     - `mandatory`：スクロール中でなければスナップする
     - `proximity`：スクロール中でなく、スナップする位置が近ければスナップする

```CSS:こんな感じ
scroll-snap-type: x proximity;
```

スクロールするコンテナの子要素には、スナップする時の位置を指定します

```CSS:こんな感じ
scroll-snap-align: center;
```

 - スナップする位置
     - `start`：先頭位置でスナップします
     - `end`：末尾位置でスナップします
     - `center`：中央位置でスナップします


上が`mandatory`、下が`proximity`を指定しています。
数字のあたりまでスクロールして離すと違いがわかりやすいですが、`mandatory`はどこで離してもスナップするのに対し、`proximity`はスナップする点が遠いとスナップしません。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOzvQPo" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/gOzvQPo">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type

https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-align

# インプット系

## textareaの高さを変える

`rows`を追加する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYjRWKv" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/zYjRWKv">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea#attr-rows

## プレースホルダーの色を変える

`textarea`に`placeholder`属性を追加し、CSSでの疑似要素`::placeholder`を用いて指定する

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWGQVpg" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/MWGQVpg">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder

# テキスト

## テキストの折り返し位置を決める

改行して欲しい位置に`<wbr>`を入れ、`word-break: keep-all;`と`overflow-wrap: break-word;`を指定する

https://developer.mozilla.org/ja/docs/Web/HTML/Element/wbr

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGMLvoO" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/bGMLvoO">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## テキストがはみ出ないように改行位置を決める



- `overflow-wrap: break-word;`
    - 単語全体があふれずに行内に配置できない場合のみ改行する
    - Flexboxの時や`position:absolute`の時は`width`を指定する必要があります
    - テーブルの要素の時は`table-layout: fixed;`を指定する必要があります
- `word-break: break-all;`
    - コンテナからテキストがはみ出た時に改行される
    - 英単語の途中でも改行が入ってしまう

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwxQGzq" data-user="kabechiyo13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo13/pen/VwxQGzq">
  Untitled</a> by かべちよ (<a href="https://codepen.io/kabechiyo13">@kabechiyo13</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>