レイアウトを始めたばかりの時、CSSは魔法のように思えるかもしれません。 暗い. なぜインデントが間違っているのですか？なぜ幅が収まらないのですか？なぜテキストは野良猫のように振る舞うのでしょうか？
落ち着いてください。どんなプロジェクトでも痛みを伴わずに始めるための実績のある方法があります。経験豊富な開発者は、ほとんどの場合、セットから始めます CSS の基本的な行 - そんな混沌からのミニシールド。
この魔法の10行が何であるか、そしてなぜそれらを各プロジェクトに追加する価値があるのかを見てみましょう。
🎯 1. box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
}なぜ必要なのですか？
デフォルトでは、CSSは幅と高さを計算します なし これは不便で混乱します。この行でブラウザに「ねえ、計算してみよう」と言っているのです。 すべて 普通の生活のように一緒に」
🧼 2. インデントをデフォルトで削除する
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote {
margin: 0;
}なぜ必要なのですか？
ブラウザはインデントを追加します。それらは異なり、予測不可能です。それらをリセットすることで、どこにどれだけのスペースを確保するかを自分で決めることができます。
💡 3. 美しいデフォルトフォント
body {
font-family: system-ui, sans-serif;
}なぜ必要なのですか？
だから、あなたは面倒なことなく、きちんと読みやすいフォントを手に入れます。すべてのデバイスで動作し、モダンに見えます。
🔢 4. 便利な行間
body {
line-height: 1.5;
}なぜ必要なのですか？
テキストが読みやすくなります。行間のスペースは単なる美しさではなく、目をいたわるものです。
🧍♂️ 5. ページの高さ = 100%
html, body {
height: 100%;
}なぜ必要なのですか？
画面の高さ全体を占めるもの（背景など）が必要な場合は、これは必須です。これがなければ、「高さ100％」は機能しません。
📦 6. 画像の動作を改善する
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}なぜ必要なのですか？
画像が枠からはみ出ることはありません。メディアが大きすぎるためにレイアウトが「壊れる」ことはもうありません。
🔁 7. フォームのフォントを継承する
input, button, textarea, select {
font: inherit;
}なぜ必要なのですか？
この行がないと、ボタンとフォームフィールドは独自のフォントを使用します。この行を追加すると、デザインに自然に見えます。
💨 8. Safariでフォーカス枠を削除する
button {
-webkit-appearance: none;
}なぜ必要なのですか？
Safariはボタンを作るのが好きです...独自の方法で。この行は、他のブラウザとの動作を調整するのに役立ちます。
🧹 9. リストをクリーンアップする
ul[role='list'], ol[role='list'] {
list-style: none;
}なぜ必要なのですか？
メニューやカードなど、箇条書きなしのリストを作成したい場合は、この機能が最適です。
🚫 10. 本文のマージンを削除します
body {
margin: 0;
}なぜ必要なのですか？
<body> にはインデントが組み込まれています。特にモバイルでは邪魔になります。これを削除すると、レイアウト用の空白のキャンバスが得られます。
📦 合計
これらすべてを合わせると、 魔法ではない、ただの適切なスタートです。毎回手動で書くのが面倒な場合は、 基本テンプレートまたは、これらの行を新しいプロジェクトの先頭にコピーするだけです。
もしあなたがこのアプローチを気に入ったなら、単純に、ビジネス上、そして難解な説明なしに、あなたは間違いなくKodikアプリケーションを気に入るでしょう。これは、プログラミングの道をゼロからスタートする人たちのために特別に作られています。アプリ内には、HTML、CSS、JavaScriptのレッスンがあり、まるで優しい指導者がそばにいるかのように、人間の言葉で説明されています。
コディックのウェブサイト - https://itcodik.com/