このカテゴリでは、HTMLで作成した構造にデザインを適用する CSS の基礎を解説しています。
文字サイズや色の調整だけでなく、FlexboxやGridを使ったレイアウト、レスポンシブ対応まで段階的に学べます。
CSSは「なんとなく書く」とレイアウト崩れが起きやすいため、仕組みや優先順位を理解することが重要です。
このカテゴリを通して、見た目を自分で調整できるWebページを作れるようになります。
Web開発学習ロードマップ4-6 Flexboxの基本
前の記事では、displayとpositionを使ったレイアウトの基本を学びました。しかし、実際にレイアウトを組もうとすると、次のような悩みが出てきます。・要素を横に並べたいだけなのにCSSが複雑になる・中央揃えが思った以上に難しい・間隔を...
Web開発学習ロードマップ4-5 レイアウトの基本（display / position）
ボックスモデルを理解できたことで、CSSで「要素の大きさ」と「余白」は説明できるようになりました。次に出てくる疑問は、次のようなものです。・要素を横に並べたい・特定の位置に固定したい・なぜ勝手に改行されるのか分からないこれらを制御するのが、...
Web開発学習ロードマップ4-4 ボックスモデルを完全に理解する
CSS学習で、ほぼすべての人が一度はここで止まります。・余白を指定したのに思った位置にならない・widthを指定したのに要素がはみ出す・paddingやmarginの違いが分からないこれらの原因は、ボックスモデルの理解不足です。この記事では...
Web開発学習ロードマップ4-3 CSSセレクタの基本（class / id / 要素）
CSSを書き始めると、多くの人が最初につまずくのがこの問題です。・CSSを書いたのに反映されない・なぜこの要素だけ変わらないのか分からない・どこを指定しているのか曖昧その原因の多くは、CSSセレクタの理解不足にあります。この記事では、CSS...
Web開発学習ロードマップ4-2 CSSの書き方（inline / internal / external）
前の記事では、CSSがWebページの見た目を担当する言語であり、HTMLとは役割が分かれていることを学びました。次に出てくる疑問は、ほぼ確実にこれです。・CSSはどこに書けばいいのか・HTMLの中？別ファイル？・書き方が複数あって混乱するC...
Web開発学習ロードマップ4-1 CSSとは何か｜HTMLとCSSの役割分担
3章では、HTMLを使ってWebページの構造を作る方法を学びました。しかし、HTMLだけでページを作ると、次のような状態になります。・文字はすべて同じ見た目・レイアウトが整っていない・デザインがほとんどないここで登場するのが、CSS（Cas...