LP制作を始めて作成している、ねこらのん（@nekoranon256）です。
現在LP制作で追われていて、行き止まりにあったのがwidthだったことが判明したのでまとめていきます。
widthのプロフィール
widthの基本的なプロフィールをまとめていきます。
| width | 幅を指定する |
| 使用 | <TABLE>・ <TD>・ <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT>などの領域の幅を指定 |
| 基本 | 要素の幅を設定。 コンテンツ領域の幅を設定 |
| 応用 | box-sizing を border-box に設定で境界領域の幅を設定。 →つまりwidth＋padding＋border。要素がブロック要素→コンテンツ領域の寸法は
の各プロパティによって正確に定義。 |
| 注意 | min-width および max-width プロパティはwidth を上書きに。 |
| 外側 | widthの外側は
の順で空白・けい線を表すプロパティに覆われている。 ※画像参照
|
| 動作webブラウザ | 全バージョンOK |
widthなめてました！奥が深い…！
widthで使う値（heightも含むものあり）
vscodeで先読みででてくる中に知らない値がズラーッとでてきたので、調べてまとめました。
| 値 | 意味 | 備考（相対的：フォント20ptの場合） | |
| 初 期 値 |
auto | ||
| 絶 対 的 |
px | 1画素（px）のサイズを1とする単位。 ※実際はdpiで表示。モニタ解像度により変化。 |
【利用場所】 ・border-radiusはpx指定が基本。 ・円や楕円形にする場合は50%指定。 【注意点】 ・px使用はレスポンシブデザインで調整が必要になり大変に。 ・使うときは相対値を使うべし。 |
| 相 対 的 |
% | 親要素のwidthの値を基準にして割合を%で表示。 PCブラウザのデフォルトである16pxをベースに<body>のフォントサイズをemで先に決めると本文の文字サイズに。 見出しは大きくコラムは小さく、文字のバランスをem設計。 |
（70%の場合：20pt✕70%） |
| em | 現在使用中の標準フォントの高さを1とする単位。 | （1.5emの場合：20pt✕1.5） | |
| rem | 基本のフォントサイズ基準の相対指定。 | （0.7remの場合：16px ✕ 0.75＝12px） | |
| ex | 現在使用中の標準フォントの小文字「x」の高さを1とする単位。 | （2.5exの場合：20ptの「x」の高さ✕2.5） | |
| 親から継承 | length | 絶対的な値で幅を定義 | |
| 他 | vw | viewport widthの略。 viewportの幅に対する割合。 |
|
| vh | viewport heightの略。 viewportの高さに対する割合。 |
||
| vmin | viewport minimumの略。viewportの幅と高さのうち、値が小さい方に対しての割合。 | ||
| vmax | viewport maxの略。viewportの幅と高さのうち、値が大きい方に対しての割合。 | ||
| ch | 半角数字の「0」の幅を1とする。 点字レイアウト。 |
||
| gd | グリッドモジュールの略。 | ||
| max-content | 望ましい固有の幅。 | 文字にぴったり合うマーカーなど | |
| min-content | 最小の固有の幅。 | ||
| fit-content (<length-percentage>) |
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換える。 つまり、min(max-content, max(min-content, <length-percentage>))。 |
||
| inherit | 親要素のwidthの設定を継承。 | ||
| max-width | 幅の最大値を指定する | ||
| min-width | 幅の最小値を指定する | ||
| height | 高さを指定する | ||
| max-height | 高さの最大値を指定する | ||
| min-height | 高さの最小値を指定する |
youtubeの海外の方を見ているとemを頻繁に使っていたので、今後これを使って応用していきたい。
参考URL①CSSの長さ、大きさを表す単位/変換
参考URL②【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）
おわりに
PCだときれいに画像が表示されているのに、レスポンシブデザインにすると縦長で文字が何も見えなくなり調べるとwidthが原因でした。
通常のcssでpxを指定し、レスポンシブデザインで%指定もしくはそのままできれいに表示されました！
もりけん塾（@terrace_tech）
Thanks：もりけんさん