Reset CSS 一覧

ブラウザの初期設定をリセットして、レイアウトを安定化させるための基本設定まとめ。

* { box-sizing: border-box }

全要素のサイズ計算を安定させ、padding / border による横ズレを防ぐ。

body { margin: 0 }

ブラウザのデフォルト余白8pxを削除し、レイアウトの起点を整える。

img, video { max-width: 100%; height: auto; }

レスポンシブ対応の基本。画像が枠をはみ出す事故を防ぐ。

a { text-decoration: none; color: inherit; }

リンクの青色＆下線を解除し、デザインに合わせて装飾を付けやすくする。

ul, ol { padding: 0; margin: 0; }

リスト周りのデフォルト余白をゼロにして、自由に調整できるようにする。

button, input { font: inherit; }

フォーム要素のフォント統一。ブラウザごとの勝手なフォント差を消す。

* { margin: 0; padding: 0; }

より強めのリセット。必要に応じて使うが、最近は軽めのリセットが主流。

遊び場テンプレ 01

HTML / CSS / JS の実験用サンドボックス。
文言・色・レイアウトを自由にいじってOK。

カード一覧へ

サンプルカード

ここを「作品ギャラリー」「実験メモ」など好きに変えてOK。

HTML / CSS 練習

余白・フォント・色を変えて、デザインの感覚を掴む用。

Layout

JS ちょい足し

クリックイベントやクラスの切り替えなどを試す。

JavaScript

API 連携用メモ

あとでFetchやAxiosのテストを書くスペース。

API

このページについて

このテンプレは「いじり倒す前提」の骨組みです。
クラス名やセクション構造を自分用に変えてOK。