HTMLとCSSを学び始めました。タグ、スタイル、フォントを追加するなど、すべてが簡単に思えます。しかし、突然すべてが壊れてしまいます。インデントがずれ、ボタンがクリックされず、ヘッダーが外に飛び出します。聞き覚えがありますか？ 😅
はい 最も一般的な10のミスレイアウトの初心者が犯しがちなミスと、それを防ぐためのヒント。
❌ エラー1：インデントにシステムがない
インデントは、ピクセル単位で、異なる margin と padding を使用して「目視で」設定されます。結果として、混乱が生じます。
回避方法： box-sizing: border-boxとインデントグリッド（たとえば、8 pxの倍数）を使用します。
❌エラー2：ブラウザのスタイルがリセットされていません
各ブラウザでは、h1、ul、bodyは異なって見えます。
回避方法： normalize.cssを接続するか、Tailwind CSSをゼロから使用します。
❌ 間違い3：構造なしの深いネスト
div in div in div 誰も何がどこにあるのかわかりません。
回避方法： 論理的な構造を構築し、セマンティックタグとメソドロジー（BEMなど）を使用します。
❌ 失敗 4: インデントに <br> を使用する
複数の <br> を配置することはレイアウトではありません。
回避方法： CSSを介してインデントを管理します: margin と padding。
❌エラー5：pxのレイアウト全体
サイトは画面サイズに合わせて拡大縮小されません。
回避方法： rem、%、clamp() を使用してください。これらはより柔軟で適応性があります。
❌ 失敗6：適応性を無視する
携帯電話ではすべてが壊れ、フォントが小さすぎて、ブロックが収まらない。
回避方法： 原則に従ってレイアウトする mobile first、@mediaリクエストを接続します。
❌ 失敗7：DevToolsを使用していない
初心者はブラウザのインスペクターを開くことを恐れていますが、恐れる必要はありません。
回避方法： DevToolsを使用して、スタイルの分析、デバッグ、および「ライブ」編集を行います。
❌ミス8：スタイルがバラバラ
CSSはどこにでもあります。style=""、<head>、さまざまなファイルにあります。
回避方法： スタイルを一元的に保持し、!importantを乱用しないでください。
❌エラー9：アクセシビリティの問題（a11y）
画像には alt がありません。ボタンは div です。
回避方法： セマンティクスに注意し、alt属性を追加し、正しいタグを使用してください。
❌ エラー10: JavaScriptへの早期移行
まず、HTMLとCSSをしっかりと理解する必要があります。
回避方法： 最初に flex、grid、position、適応性を学び、次にJSに進みます。
🧠 その結果は？
エラー | 回避方法 |
|---|---|
ランダムなインデント | グリッドを使用する + |
スタイルがリセットされていません | リセット/正規化を有効にする |
深いネスト | セマンティクス＋BEM |
| CSS を使用する |
|
|
適応性がない | Mobile first, |
DevToolsは無視されます | デバッグに使用 |
散らばったスタイル | 中央集中型CSS |
利用できません |
|
初期のJavaScript | まずはHTML + CSS |
頭痛や混乱を起こすことなくレイアウトを学びたいですか？ 「コディック」アプリ ブロックやFlexboxからレスポンシブやコンポーネントまで、レイアウトをゼロから学びます。水なし、練習のみ💻
コディックのウェブサイト - https://itcodik.com/