Open6
マークアップとスタイリングをするときに考えていること
becolomochi- LPとUIで実装方針が変わる
- ブラウザの開発者ツールが友達
becolomochiマークアップ
- 構造
- セクション
- 見出し
- テキスト
- 画像
- リンク
- リスト
- セクション
- 共通部分
- クラス名
becolomochiスタイリング
基本
- リセットCSS
- box-sizing: border-box
- text-wrap
- margin: 0, padding: 0
- font-family
- line-height
コンポーネントごと
- 枠関連
- Flex, Grid, Position
- border
- box-shadow
- レスポンシブ時の調整
- サイズ関連
- padding, gap, margin
- border-radius
- background-color
- レスポンシブ時の調整
- タイポグラフィ関連
- font-size, font-weight, letter-spacing, line-height
- color
- text-decoration
- レスポンシブ時の調整
- 装飾関連
- ::before, ::after疑似要素
- hover, focus, active,selected
- レスポンシブ時の調整
becolomochiアクセシビリティ関連
- alt
- aria-hidden
becolomochiアニメーション関連
becolomochi大体上から順にやって行ってる。
要素ごとにレスポンシブにしたときのを考慮している。
PC→スマホの順でやってる
はみ出た部分をどうするかを考えたほうが、広がったらどうするかを考えるより簡単