HTMLとCSS：最初のウェブページを作ろう
HTMLがコンテンツを構造化し、CSSがスタイルを整えます。この2つの組み合わせが、コーディングへの最も分かりやすい入り口です。
HTMLとCSSの違いを理解する
HTMLは骨格です——見出し、段落、画像、リンク、ボタン。CSSは外見です——色、フォント、余白、レイアウト。CSSなしのページは機能しますが、生ドキュメントのように見えます。HTMLなしのページにはスタイルを当てるものがありません。デザインを考える前に、HTMLで構造をきれいに作ることを学びましょう——よく整理されたコンテンツは後からスタイルを当てやすくなります。
モダンなレイアウトをマスターする
古いテーブルを使ったトリックは忘れましょう。今日、2つのCSSツールがレイアウトの90%をカバーします——行や列に沿ってアイテムを並べるFlexbox、グリッドベースの配置に使うGrid。それぞれに1日かけてなじんでください。両方マスターしたら、ページのレイアウトが格闘ではなく、論理的なものになります。
最初からレスポンシブを意識する
ウェブトラフィックのほとんどはモバイルから来ています。ページはあらゆる画面サイズに適応する必要があります。固定ピクセルではなく柔軟な単位を使い、横幅に応じてレイアウトを調整するメディアクエリを活用しましょう。ブラウザのウィンドウをリサイズして定期的にテストしてください。パソコンでは美しいのにスマホで崩れるページは失敗です。
今すぐ実践しよう
- index.htmlファイルを作って基本的な構造を書く
- 見出し、段落、画像、リンクを追加する
- 外部CSSスタイルシートをリンクする
- FlexboxとGridを小さなサンプルで学ぶ
- メディアクエリでページをレスポンシブにする
- 無料でページをオンラインに公開してシェアする