Webデザイナー3年目、実装していて地味に悩むことランキング

# コーディングでの悩みをランキング形式で発表:crown:!
毎月、Qiita投稿しています。
が・・・、今月は正直ネタがないです！笑:rolling_eyes:
なので今回は、コーディングの愚痴・・・ではなく、**地味に悩むことを徒然なるままに書き連ねる回**にします。
それをランキング形式にして、どうやって解決しているかをご紹介します。

## では三位！
「**cssの名前の付け方と、詳細度、綺麗に書くことが難しい！**」

急いでcssを書くと、詳細度なんて細かく気にしなくなってしまいますよね。
あまり意識できていませんでしたが、この際に、詳細度関係で使えそうなcssについて勉強しようと思います。

:::note info
詳細度で使える、モダンなcss
**:has()**
**:where()**
**:is()**
:::
の３つについてを勉強します。
参考にした記事はこちら：
[CSSの:has()疑似クラスの便利な使い方を徹底解説](https://coliss.com/articles/build-websites/operation/css/has-pseudo-class.html)
[CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！](https://coliss.com/articles/build-websites/operation/css/css-new-pseudo-classes-is-and-where.html)



### **:has()について**
:has()は「子要素の状態によって親要素にスタイルを適用」できるCSS疑似クラスです。JavaScriptなしで、子の条件に応じた親の見た目変更が可能になります。
「同意する」にチェックが入ったら送信ボタンを有効化するUIも、:has(input:checked)を使えばフォームだけで制御できます。視覚的な状態変化に便利。
例： フォームの中に input:checked（＝チェックされた要素）があるなら、input[type=button] にスタイルを適用する
参考：[:has()を使ってCSSだけで同意チェックボタンを実装する方法](https://black-flag.net/css/20240717-8157.html)

![BUTTON (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/4352843e-f928-4573-a989-ff68eeda3e62.png)






### **:where()について**
複数のセレクタをまとめて指定でき、優先順位が低くなる（無効化する）ため、上書きされやすい特徴があります。
例： ボタンやリンクの共通スタイルをまとめつつ、必要なところでは簡単に個別に上書きできます。!importantで悩まなくなりそうです。
参考：[:where()セレクタはCSSの「詳細度戦争」を終結させてくれるかもしれない](https://qiita.com/NagayamaToshiaki/items/988f72c2222ee6446556)

#### 【詳細度の計算ルール】　
|セレクタの種類  |点数（重み） |
|---|---|
|インラインスタイル  |1000点  |
|IDセレクタ  |100点  |
|クラス・属性・擬似クラス  |10点  |
|要素・擬似要素	|1点|
|:where()	|0点（特別！）|


![BUTTON.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/5063c119-49e3-4006-9771-26e8bac4d10e.png)


### **:is()について**
複数のセレクタをまとめられる擬似クラスで、短く書けてコードがすっきりします。優先順位に注意！
例： .card h1, .card h2, .card h3 を .card :is(h1, h2, h3) にすれば、見やすく管理しやすくなります。

![BUTTON (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/f65fd2c0-965c-48a7-b137-d0f93e8f3e8f.png)



## 二位！
何気に面倒なことです。・・・それは、

「**デバイスごとのフォントの大きさ調整が大変**」

テキストのサイズ、ちゃんとカンプ通りにしてるのに、修正が入ることってありませんか？？
カンプ通り、ちゃんとpx指定しているのに、文字が大きいと言われたり、カンプと違うと言われたり・・・。
皆さんはどうですか？

私は最近、フォントサイズのレスポンシブ対応では、

**clamp()**

を使用しています。

### **clamp()について**
説明：
最小値・推奨値・最大値を指定し、画面サイズに応じて要素のサイズを自動調整できるCSS関数です。​

例：
見出しの文字サイズを、画面幅に応じて 18px から 32px の間で自動調整できます。​

```
h1 {
  font-size: clamp(18px, 5vw, 32px);
}
```

上のcssは、
18px：最小サイズ（どんなに画面が狭くても18px以下にはならない）
5vw：推奨サイズ（ビューポート幅の5%）
32px：最大サイズ（どんなに画面が広くても32px以上にはならない）
つまり、スマホなどの小さな画面では18px程度、大きな画面では32pxまで拡大され、中間のサイズでは自然にサイズが調整されるという意味です。
これのいいところは、フォントサイズにおいては、メディアクエリが不要なところですね。あと、中間のサイズは自動で調整してくれるという、神的cssだと思います:pray:

## 映えある一位は・・・
「**どんなデバイスで見ても、要素のポジション、配置がカンプに合わせたレイアウトに実装することが慣れない**」

これまたやっぱりレスポンシブ対応での問題。
一体どうして、この世のデバイスって、こんなにもサイズが豊富なんでしょうね:sweat_smile:

レイアウトの実装で特に悩むのが、

:::note info
* flexで調整するのか
* marginやpaddingで調整するか
* positionで調整するか
* または、上記をどうやって組み合わせてレイアウトするか
:::
というところではないでしょうか？？

最初に↑のどれでやるのか定まってないと、**デバイスによっては見た目の崩壊**:scream:を招きかねません泣　頑張って実装したのに、デバイスのサイズによっては意味不明な場所に要素が来ていたり・・・というのは、心当たりある方もいるのではないでしょうか？？

そういったレスポンシブ対応での試行錯誤を繰り返し、実装をして3年目にしてやっと、**実装は、相対的なセンスが必須なのだ**:bulb:
ということに気づきました。
グラフィックでは、絶対的な感覚がとても大事だと思います、1pxの違いが命取りになってくる領域なのかなと認識してます。

:::note info
豆知識:point_up:
グラフィックには詳しくないですが、ミッフィーちゃんの生みの親のディック・ブルーナさんは、自身の納得するミッフィーちゃんを書くために100枚以上、下書きするって逸話もあります:rabbit:
あんなにシンプルなデザイン（・×・）にそこまでこだわる、ブルーナさんのその絶対的デザイン感覚が、なんかやばすぎて好きです。
これほどこだわっているからこそ、ミッフィーちゃんは世界で愛されるんでしょうね。
:::

脱線しましたが、何が言いたいかと言うと、グラフィックと、Webは似ているようで、やはり違うのだということです。
グラフィックは、絶対的であり、完成されているもので、誰にとっても見え方は変わりません。
Webデザインは、相対的で動的で、見る人（の環境）によって見え方も変わります。
なので、自分はカンプを見る時に、**カンプをグラフィックとして捉えるのでは無く、前提として、「Webありきのカンプ」、つまり相対的に捉えないといけない**。と最近は思います。
それに気づくのに数年かかりました💧

そこで、見出し冒頭へ戻りますが、大切だなと思うのが、レイアウトをどのcssで再現するのか？ということです。
これは慣れないと判断が難しいところだなと思っていますが、自分のためにも備忘録としてパターンごとに分けてみようと思います。

### 現在の自分のレイアウト実装パターンについて:thinking:

まずは、flexボックスで実現できないかを検討します。
難しい場合、margin,paddingで調整。
要素を重ねたりする場合はpositionを検討する。
その際も、位置調整は基本はmargin,paddingで調整をする。
という感じで実装していますが、詳細にパターン化・言語化するのが難しかったです。

今後の目標は、「**カンプを見たら、どんなデバイス上でも崩れないレイアウトのcssを手を動かす前に検討できるようになる**」＆「それらを言語化できるようにする」ことにします！