HTMLとCSSを学び始めると、最初に直面する壁のひとつが「配置」と「大きさ」です。 テキストや画像を思った位置に置けない、スマホとPCで見え方が変わる、横スクロールが出てしまう……。こうした経験は誰もが一度はするものです。
なぜこのような問題が起きるのでしょうか？ その理由は、ブラウザが「画面」や「要素のサイズ」をどのように解釈しているかを、正しく理解できていないからです。
本書では、以下の流れで解説を進めます。
1. Viewport（表示領域）の基本 スマホやPCでの見え方の違いを整理し、正しい画面サイズの捉え方を学びます。
2. 要素の大きさとbox-sizing CSSの幅・高さ指定の仕組みを理解し、狙ったとおりのサイズで要素を配置する方法を身につけます。
3. レイアウトの基礎（FlexboxとGrid） モダンなレイアウト方法を使って、要素をきれいに並べる方法を学びます。
4. Canvasと解像度 高解像度ディスプレイでも崩れない描画を行うために、ピクセルと解像度の関係を理解します。
最終的に、あなたは「ブラウザがどのように配置と大きさを決めているのか」を体系的に理解し、狙ったレイアウトを安定して作れるようになります。
プログラミングの経験が少なくても問題ありません。 サンプルコードを実際にコピペしながら、少しずつ動かして確認してみてください。 「配置と大きさ」を制御できるようになると、Web制作の楽しさがぐっと広がります。

HTML・CSS「配置と大きさ」入門

第1章：画面サイズと表示領域を理解する

第2章：基本のボックスモデル

第3章：配置の基本 ― inline と block

第4章：要素の大きさを指定する

第5章：位置を決める方法

第6章：配置の現代的手法

第7章：画像・メディアのサイズ調整

第8章：レスポンシブデザイン

第9章：キャンバス要素 `<canvas>` の基礎

第10章総合サンプル

開発者ツールでの確認方法

終わりに

html

javascript

canvas

レスポンシブ対応

sosa