Create ⏱ 25 min

Build a Responsive Website | HTML, CSS Grid, Flexbox & More

What You Will Learn

レスポンシブなWebサイトを構築する方法を学びます
CSS GridとFlexboxを使用してレイアウトを作成する方法を学びます
フォームの送信とアニメーションを追加する方法を学びます

Key Concepts

CSS Gridは、Webページのレイアウトを容易に作成できる技術です。Flexboxは、要素の配置とサイズを調整するために使用されます。レスポンシブなWebサイトは、さまざまなデバイスで適切に表示されるように設計されています。Pseudoセレクターは、特定の要素を選択するために使用されます。Utilityクラスは、スタイルを簡単に適用するために使用されます。

Code Examples

<link rel="stylesheet" href="css/style.css">

このコードは、CSSファイルをHTMLファイルにリンクしています。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

このコードは、すべての要素のボックスサイズをborder-boxに設定し、パディングとマージンを0に設定しています。

<div class="navbar">
  <h1 class="logo">Laruki</h1>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="features.html">Features</a></li>
      <li><a href="docs.html">Docs</a></li>
    </ul>
  </nav>
</div>

このコードは、ナビゲーションバーを定義しています。

Lesson Summary

このレッスンでは、レスポンシブなWebサイトを構築する方法を学びました。まず、プロジェクトの構造を設定し、HTMLとCSSファイルを作成しました。次に、CSS GridとFlexboxを使用してレイアウトを作成しました。さらに、フォームの送信とアニメーションを追加しました。レスポンシブなWebサイトは、さまざまなデバイスで適切に表示されるように設計されています。このレッスンでは、PseudoセレクターとUtilityクラスを使用してスタイルを適用する方法も学びました。最後に、Netlifyを使用してWebサイトをデプロイしました。

Practice Exercise

以下のコードを完成させて、レスポンシブなナビゲーションバーを作成してみましょう。

<div class="navbar">
  <h1 class="logo">Your Website</h1>
  <nav>
    <ul>
      <!-- ここにリストアイテムを追加してください -->
    </ul>
  </nav>
</div>

CSSファイルに適切なスタイルを追加して、ナビゲーションバーがレスポンシブに動作するようにしてみましょう。

What Is Next

次のレッスンでは、Webサイトのデプロイとホスティングについて学びます。Netlifyなどのサービスを使用して、Webサイトをインターネット上に公開する方法を学びます。

Choose Language