レスポンシブウェブデザイン | Gulp.js ウェブサイトチュートリアル

はじめに

このプロジェクトでは、公式のGulp.jsウェブサイトに似た、ウェブサイトのレスポンシブレイアウトを実装する方法を学びます。画面サイズに基づいて、メディアクエリを使ってウェブページのレイアウトとスタイルを調整します。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

HTMLファイルにメディアクエリルールを追加して、レスポンシブレイアウトを作成する方法
異なる画面サイズに基づいて、ページ要素の幅と表示性を調整する方法
ブラウザウィンドウのサイズを変更することで、レスポンシブレイアウトをテストする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

メディアクエリを使ってレスポンシブなウェブデザインを実装すること
画面サイズに基づいてレイアウトとスタイルを調整すること
異なるデバイスと画面解像度に対して、効果的にウェブページをテストして最適化すること

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/display_property -.-> lab-300102{{"Gulp を使ったレスポンシブウェブデザイン"}} css/positioning -.-> lab-300102{{"Gulp を使ったレスポンシブウェブデザイン"}} css/media_queries -.-> lab-300102{{"Gulp を使ったレスポンシブウェブデザイン"}} css/mobile_first_design -.-> lab-300102{{"Gulp を使ったレスポンシブウェブデザイン"}} end

プロジェクトのセットアップ

このステップでは、プロジェクトをセットアップし、エディタでファイルを開きます。

プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。

├── css
├── imgs
├── js
└── index.html

WebIDEの右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新してページを表示します。

これで、まだレスポンシブではないGulpウェブサイトの静的ページが表示されます。ウィンドウサイズを手動で変更すると、以下のような結果が得られます。

メディアクエリの追加

このステップでは、HTMLファイルにメディアクエリを追加して、ページをレスポンシブにする方法を学びます。

コードエディタで index.html ファイルを開きます。
ドキュメントの <head> 内の最初の <style> セクションを見つけます。
<style> 内の /* TODO */ の下に、次のメディアクエリルールを追加します。

/* TODO */
@media screen and (max-width: 1400px) {
  nav.content,
  main section {
    width: 900px !important;
  }
}

@media screen and (max-width: 900px) {
  nav.content,
  main section {
    width: 700px !important;
  }
}

@media screen and (max-width: 650px) {
  main section,
  main ul li {
    width: 100% !important;
  }

  nav.content.list {
    display: none;
  }

  nav.content.menu {
    display: block;
    position: absolute;
    right: 10px;
  }

  main ul li:nth-child(even) {
    margin-left: 0 !important;
  }
}

これらのメディアクエリは、画面幅に基づいてページに特定のスタイルを適用します。最初のメディアクエリは、画面幅が1400px以下の場合、コンテンツとメインセクションの幅を900pxに設定します。2番目のメディアクエリは、画面幅が900px以下の場合、幅を700pxに設定します。3番目のメディアクエリは、画面幅が650px以下の場合、ナビゲーションリストを非表示にし、メニューアイコンを表示し、メインセクションとリスト項目の幅を100%に設定します。

レスポンシブレイアウトのテスト

このステップでは、レスポンシブデザインをテストし、必要な調整を行います。

index.html ファイルを保存します。
ブラウザでウェブページを更新します。
ブラウザウィンドウのサイズを様々な幅に変更して、レスポンシブレイアウトの変化を確認します。
ページのレイアウトが提供された画像に示された予想結果と一致することを確認します。

この時点で、Gulp.jsウェブサイトのレスポンシブレイアウトの実装が完了しています。ページはこれで必要に応じて異なる画面サイズに適応するようになっています。

完成したモバイルの結果を以下に示します。

おめでとうございます！Gulp.jsウェブサイトのレスポンシブレイアウトを正常に実装しました。

✨ 解答を確認して練習

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabExでさらに多くの実験を行って練習してください。