1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTML・CSS基礎まとめ

1
Last updated at Posted at 2026-04-12

前提

HTML/CSS/JSの役割

  • HTML = 構造(意味)
  • CSS = 見た目(レイアウト・デザイン)
  • JS = 振る舞い(動き)

セマンティックHTML

  • 例えば、画面上に「メニュー」を作りたいとする
  • 非セマンティックな書き方:
    • <div>タグにCSSで見た目だけメニューっぽくする
    • 人間にはメニューに見えるが、ブラウザや読み上げソフトにはただの「四角い箱」にしか見えない
  • セマンティックな書き方:
    • <nav>タグを使う
    • ブラウザや検索エンジン(Googleなど)が 「あ、ここはナビゲーションメニューなんだな」 と意味を正しく理解できる

基本レイアウト・描写

要素の移動系はtransformが便利

FlexboxとGrid

中央寄せ

便利プロパティ

レスポンシブデザイン

フォーム

data-*属性

JSでめっちゃ使う

CSRF対策

実装マニュアル

↑どういうリクエストが送られるかはここを参照↓

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?