M
miki
デザインを考える上で必要になるコーディング知識①
2026年10月20日
要約
- HTMLで構造を作り、CSSで装飾することでWebサイトが成り立つ。
- 同じHTML要素には共通の名前を付け、文字はグループ化して効率的に構成する。
- Figmaのオートレイアウトも活用し、見やすく扱いやすいコードを意識する。
HTML・・・タグ(文字)で骨組みを作る
CSS・・・HTMLの要素を装飾する
→この2つでWEBサイトが成り立つ
・HTMLの要素で同じものを使用する際は名前を同じにする
( <p class=”名前(ここを同じにする)”>テキスト</p>
→そうするとコードの量も減って効率もいい
・文字を入力する際はまとめて改行ではなく、
一つ一つグループに分けて作る
→改行で作ると余白の大きさがわからなくなり計算する必要がある=めっちゃ手間
figma・・・オートレイアウト機能も活用する
※デザインが良くてもコードがめちゃくちゃだと使われない
どちらも効率よく、見やすくを意識すること
