Web開発学習ロードマップ 5-3 DOMとは何か｜JavaScriptがHTMLを操作する仕組み
JavaScriptを学び始めると、ほぼ必ず次の疑問にぶつかります。・なぜJavaScriptでHTMLを書き換えられるのか・クリックすると表示が変わる仕組みが分からない・どこまでがHTMLで、どこからがJavaScriptなのか曖昧この疑...
Web開発学習ロードマップ 
Web開発学習ロードマップ 5-2 JavaScriptの基本文法
前の記事では、JavaScriptが・Webページに動きを与える・ユーザー操作に反応するための言語であることを学びました。ここからは、実際にJavaScriptを書くために必要な基本文法 を整理していきます。この記事の目的は、「すべて覚える...
Web開発学習ロードマップ 5-1 JavaScriptとは何か｜Webページに動きを与える仕組み
ここまでで、HTMLとCSSを使って・ページの構造を作る・見た目やレイアウトを整えることができるようになりました。しかし、HTMLとCSSだけでは、次のようなことはできません。・ボタンを押したら表示が変わる・入力内容に応じてチェックする・画...
Web開発学習ロードマップ 4-7 よくあるCSS崩れと原因の切り分け方
CSSを一通り学んだあと、多くの人が次の壁にぶつかります。・CSSを書いたのに反映されない・一部だけデザインが崩れる・修正したら別の場所が壊れたこれは珍しいことではなく、CSSでは誰もが必ず通る道です。重要なのは、「勘で直す」のではなく原因...
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の中？別ファイル？・書き方が複数あって混乱す...
Web開発学習ロードマップ 4-1 CSSとは何か｜HTMLとCSSの役割分担
3章では、HTMLを使ってWebページの構造を作る方法を学びました。しかし、HTMLだけでページを作ると、次のような状態になります。・文字はすべて同じ見た目・レイアウトが整っていない・デザインがほとんどないここで登場するのが、CSS（Cas...