レスポンシブとスマホ対応の違い
スマホ対応はスマホサイズでの表示に対応するのに対して、レスポンシブ対応はタブレットなど含むあらゆるデバイスに最適化して表示を対応させる書き方です。
パーセント指定
横幅サイズが可変する場合の子要素の幅は固定値が使えない場合が多いのでパーセント指定で書きます。
width,heightのパーセント指定の基準値
width,heightにおいては【親要素の横幅、縦幅】がそれぞれパーセント指定の基準サイズになります。
ただしheightに関しては、親要素の高さが明示的に指定されていない場合のパーセント指定は無効になります。
gapのパーセント指定の基準値
gapにおいてパーセント指定の基準となるサイズは【コンテナ自身の横幅、縦幅】となります。
margin,paddingのパーセント指定の基準値
margin,paddingにおいてパーセント指定の基準となるサイズは【親要素の横幅】となります。
縦（block）方向、横（inline）方向関係なく【親要素の横幅】が基準となる点がポイントです。
CSSの世界では縦方向をblock、横方向をinlineと呼びます。
例えばmargin-top, margin-bottomは縦（block）方向の余白、margin-left, margin-rightは横（inline）方向の余白になります。
そしてmargin-inline、margin-blockと記述することでそれぞれの方向の余白を一括で指定することができます。
レスポンシブ対応でよく使う書き方
flex横並びの折り返しを許可
flexを使うと要素を横並びにすることができますが、通常ではアイテム数がどんなに多くても折り返すことはありません。
flex-wrap: wrap;を指定すると横幅が足りないときに要素が折り返し表示されるようになります。
折り返しなし
折り返しあり
左右詰め詰めの解消
タブレットサイズにしたとき、画面幅いっぱいで左右に余白がなくなってしまい要素が詰まって見えてしまう場合は左右にpaddingで余白を入れて解消します。
絶対配置（親要素基準）
絶対配置をすると要素を自由な位置で配置できます。
具体的には下記のような手順で指定します。
- 絶対配置したい要素にposition: absolute;を指定
- 基準にしたい親要素にposition: relative;を指定
- 絶対配置した要素にleftまたはright, topまたはbottomで【基準の親要素内の距離】を指定
絶対配置（画面固定）
position: fixedで画面スクロールに依存しない、画面内で常に固定表示される要素を配置できます。
スマホの場合メニューバーを固定するときなどに使います。
文字間、行間の設定
文字間、行間を指定するときはletter-spacing, line-heightを使います。
文字間の取得方法
XDで対象のテキストを選択した状態で、右側のテキスト属性に表示される【Average】の値を1000で割った数値を出し、それをemの単位で記載します。
Average / 1000 = 文字間em
例1）【AV】100 → 100 / 1000 = 0.1em
例2）【AV】20 → 20 / 10000 = 0.02em
行間の取得方法
行間はフォントサイズと高さの割合から計算して算出します。
高さ / フォントサイズ = 行間em
- 例1）【高さ】20 【フォント】14
- 20 / 14 = 1.428… = 1.4em
- 例1）【高さ】24 【フォント】16
-
24 / 16 = 1.5em
emはフォントサイズを基準にした相対的な単位です(1em = 100%)。例えば、フォントサイズが16pxの場合の1emは【16px】になります。
よって上記のline-height: 1.5em;はつまり【行間は文字サイズの1.5倍】という意味になります。
重なり順指定
コンテンツが重なったときの上下関係は基本的には【あとに書いた方が上】になりますが、z-indexプロパティで変更できます。主に絶対配置時の重なりの際に指定します。
テキスト1
テキスト2
テキスト3